OpenLayers实现阴影效果

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在图层渲染之前利用画布上下文实现阴影效果。