效果對比
之前實現的遮罩效果，在深色背景的底圖上，對要突出的區域採用半透明遮罩，以此來突出該區域。暫且稱之爲中心遮罩，遮罩前後對比如下圖：
但是有時底圖顏色偏白，這時候不再適合對要突出的區域採用遮罩，而是要對突出區域之外進行遮罩處理。暫且稱爲四周遮罩如下圖：
代碼實現
實現代碼如下：
js代碼
(function(){
var map, converLayer;
function initMap() {
var baselayer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetGray/MapServer/tile/{z}/{y}/{x}'
})
});
map = new ol.Map({
target: 'map',
layers: [baselayer],
view: new ol.View({
projection: 'EPSG:4326',
center: [112, 36],
zoom: 6
})
});
var mystyle = new ol.style.Style({
fill: new ol.style.Fill({
color:"rgba(72,61,139, 0.4)",
}),
stroke: new ol.style.Stroke({
color:"#BDBDBD",
width:2
})
});
converLayer = new ol.layer.Vector({
source: new ol.source.Vector(),
style: mystyle
});
map.addLayer(converLayer);
}
//todo
//添加遮罩
function addconver(data) {
$.getJSON(data, function(data) {
var fts = new ol.format.GeoJSON().readFeatures(data);
var ft = fts[0];
var converGeom = erase(ft.getGeometry());
var convertFt = new ol.Feature({
geometry: converGeom
})
converLayer.getSource().addFeature(convertFt);
})
}
// 擦除操作,生產遮罩範圍
function erase(geom) {
var extent = [-180,-90,180,90];
var polygonRing = ol.geom.Polygon.fromExtent(extent);
var coords = geom.getCoordinates();
coords.forEach(coord =>{
var linearRing = new ol.geom.LinearRing(coord[0]);
polygonRing.appendLinearRing(linearRing);
})
return polygonRing;
}
initMap();
var dataURL = '/static/data/shanxi.geojson'
addconver(dataURL);
})();
html代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>周邊遮罩</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
<script src="/static/js/node_modules/jquery/dist/jquery.min.js"></script>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
<style>
head,body,#map{
width: 100%;
height: 100%;
background-color: black;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="/static/js/conver.js"></script>
</body>
</html>
原理
利用GIS空間運算中的擦除操作，熟悉GIS數據處理的同學應該不陌生這個操作。在Openlayers中，雖然並不支持空間運算，但是我們可以取構建擦除運算的結果。正常情況下，擦除運算的結果類似一個空心環，分爲外環和內環，內外環之間爲填充區域。
環裝幾何
openlayers支持環狀幾何，我們將地圖周邊視爲外環，將中心視爲內環，構建環，在利用半透明填充即可實現四周遮罩。具體方法見js代碼中的erase函數。