[原創.數據可視化系列之六]使用openlyaers進行公網地圖剪切

進行地圖開發的過程當中，我通常使用天地圖或者微軟的地圖做爲地圖，由於這兩種地圖的經緯度誤差最小，基本能夠知足用戶需求，好比：

不用說，都是所有地圖，這也是最經常使用的一種方法。

可是用戶說，我只看大連的地圖，就要大連這一塊。這樣須要一個整個大連地區的面，使用這個面去切地圖，結果就能夠了，以下圖：

這樣的圖有點相似本身的發佈的圖。切圖代碼原理openlayers 3例子參見：

 http://openlayers.org/en/latest/examples/layer-clipping.html?q=clip

 

var style = new ol.style.Style({
fill: new ol.style.Fill({
color: 'black'
})
});

var clipLayer = new ol.layer.Image({
source: new ol.source.ImageVector({
source: new ol.source.Vector({
url: '//openlayers.org/en/v3.14.2/examples/data/geojson/countries.geojson',
format: new ol.format.GeoJSON()
}),
style: style
})
});
clipLayer.on('postcompose', function(e) {
e.context.globalCompositeOperation = 'source-over';
});
clipLayer.on('precompose', function(e) {
e.context.globalCompositeOperation = 'destination-in';
});

var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'sat'})
}),
clipLayer
],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 1
})
});