openlayers学习之俩个地图用一个视图与预解析 让浏览器提前加载指定资源(加载后并不执行),在需要执行的时候再执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>预解析</title>
<link rel="stylesheet" href="./v5.3.0-dist/v5.3.0-dist/ol.css">
<script src="./v5.3.0-dist/v5.3.0-dist/ol.js"></script>
<style>
html,
body {
width: 100%;
height: 100%;
}
#map,
#map1 {
width: 100%;
height: 450px;
}
</style>
</head>
<body>
<!-- 第一个个地图容器 -->
<div id="map">
</div>
<!-- 第二个地图容器 -->
<div id="map1">
</div>
<script>
// 视图
var view= new ol.View({
center: [0, 0],
zoom: 2
})
// 第一个容器的地图
let map=new ol.Map({
target: 'map',
// 预解析
preload:Infinity,
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view
})
// 第二个容器的地图
let map1=new ol.Map({
target: 'map1',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view
})
</script>
</body>
</html>