1.Map类:
map是ol中的核心组件。初始化一幅地图(map)时,至少需要一个可视化区域(view),一个或多个图层(layer)和一个地图加载的目标(HTML的tag标签)。
map -> view -> layers -> div
区别以下两段等效代码:
2.View类:
view对象代表map的2D view,view的三种状态:center、resolution(zoom)、rotation,此外view还有投影信息。
案例:同一个view可以为两个map对象所调用,呈现联动效果:
<div class="mapview">
<div id="map1" class="map"></div>
<div id="map2" class="map"></div>
</div>
<script src="./ol/ol.js"></script>
<script src="./ol/jquery.min.js"></script>
<script>
var view = new ol.View({
center: ol.proj.transform([110, 39], "EPSG:4326", "EPSG:3857"),
zoom: 4,
});
var map1 = new ol.Map({
controls: new ol.control.defaults({
attribute: false
}).extend([]),
target: "map1",
layers: [
getTdtLayer('vec_w'),
getTdtLayer('cva_w'),
],
view: view
});
var map2 = new ol.Map({
controls: new ol.control.defaults({
attribute: false
}).extend([]),
target: "map2",
layers: [
getTdtLayer('img_w'),
],
view: view
});
function getTdtLayer(lyr) {
var tiandituTk = "518e1a4a17bf485d6b8adf9a50e3abfa";
var url = 'http://t0.tianditu.com/DataServer?T=' + lyr + '&X={x}&Y={y}&L={z}' + '&tk=' + tiandituTk;
var layer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: url
})
});
return layer;
}
</script>