[原创.数据可视化系列之六]使用openlyaers进行公网地图剪切

进行地图开发的过程当中,我通常使用天地图或者微软的地图做为地图,由于这两种地图的经纬度误差最小,基本能够知足用户需求,好比:html

不用说,都是所有地图,这也是最经常使用的一种方法。json

可是用户说,我只看大连的地图,就要大连这一块。这样须要一个整个大连地区的面,使用这个面去切地图,结果就能够了,以下图:post

这样的图有点相似本身的发布的图。切图代码原理openlayers 3例子参见:url

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

 

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

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';
});htm

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
})
});blog

相关文章
相关标签/搜索