openlayer实现阴影效果
首先非常感谢大佬，跟着大佬的思路，利用OpenLayers实现了阴影效果。本文使用的OpenLayers4.6
未添加阴影效果图层
就是直接读取数据，添加要素到图层中即可。
//添加中国地图图层
var chinaLayer = new ol.layer.Vector({
source:new ol.source.Vector({
}),
visible:true,
style:new ol.style.Style({
stroke:new ol.style.Stroke({
lineDash:[1,2,3,4,5,6],
lineDashOffset:10,
color:'black',
width:2
})
})
});
map.addLayer(chinaLayer);
//数据路径
var urlC = '../data/china.geojson';
//读取本地数据
const promise = new Promise(function (resolve, reject) {
//执行异步操作
$.ajax({
url: urlC,
type: 'get',
success: function (response) {
if (response) {
resolve(response);
}
}
})
})
//请求成功之后处理的事件
promise.then(response => {
var features = (new ol.format.GeoJSON({
featureProjection: 'EPSG:3857'})).readFeatures(response);
var f = features[0];
chinaLayer.getSource().addFeature(f);
})
实现效果图
实现图层阴影效果
function addHighlightLayer(layer){
layer = new ol.layer.Vector({
source: new ol.source.Vector(),
style: () => {
const style = new ol.style.Style({
fill: new ol.style.Fill({
color: 'raba(0,0,0,1)'
}),
stroke: new ol.style.Stroke({
color: 'rgba(255, 255, 255, 1)',
width: 1
})
});
return style;
}
});
map.addLayer(layer);
onBindLayerClick(layer);
return layer;
}
function onBindLayerClick(layer){
layer.on('precompose', evt => {
evt.context.shadowBlur = 25;
evt.context.shadowColor = 'black';
});
layer.on('postcompose', evt => {
evt.context.shadowBlur = 0;
evt.context.shadowColor = 'black';
});
}
promise.then(response => {
var features = (new ol.format.GeoJSON({
featureProjection: 'EPSG:3857'})).readFeatures(response);
var f = features[0];
chinaLayer.getSource().addFeature(f);
//添加阴影的图层
var highlightLayer = addHighlightLayer(chinaLayer);
//新增以下代码
highlightLayer.setStyle(() => {
return new ol.style.Style({
fill: new ol.style.Fill({
color: (f.style && f.style.getFill) ? f.style.getFill().getColor() : '#aaa' }),
stroke: new ol.style.Stroke({
color: 'rgba(255, 255, 255, 0.2)', width: 2 })
});
}
);
highlightLayer.getSource().addFeature(f);
})
图层添加阴影效果图
总结
OpenLayers默认是canvas渲染,利用precompose在图层渲染之前利用画布上下文实现阴影效果。