「WebGIS」1. 更改图层源

通过 setSource()方法进行图层源的更改。

首先设置 DOM

<button id="open" class="code">展示底图</button>
<button id="close" class="code">关闭底图</button>
<div id="map" class="map"></div>

缓存地图源，瓦片地图对象

var source = new ol.source.OSM();
var layer = new ol.layer.Tile();

创建 ol 地图对象，挂载到 map DOM 上。

var map = new ol.Map({
  layers: [layer],
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    zoom: 2
  })
});

给两个按钮绑定事件, 可以通过更新layer对象达到更新图层的效果。

document.getElementById('set-source').onclick = function () {
  layer.setSource(source);
};

document.getElementById('unset-source').onclick = function () {
  layer.setSource(null);
};