openLayers中实现面要素立体化效果

**

一、面要素立体化的效果实现方法

**
对于面要素，想要实现立体效果，之前写了一篇博客，添加阴影来实现立体化，但是可能在很多情况下，更加想要的是可以多面要素的边框进行不同颜色，不同线宽的样式设置，从而达到立体化的效果。此次所写的博客中正是利用了此种方式来实现立体化效果。

二、实现过程及效果展示

利用openLayers添加一个面要素到图层中

//添加中国地图图层
			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);
            })

效果图：

利用面要素的边框不同颜色，线宽的样式设置实现立体化

  //inner
        var innerLayer= new ol.layer.Vector({
    
    
        source: new ol.source.Vector({
    
    }),
        style: new ol.style.Style({
    
     
          stroke:new ol.style.Stroke({
    
    
             width:15,
             color:'rgba(170,170,170,0.8)'
        }),
          fill:new ol.style.Fill({
    
    
             color:'rgba(255,0,0,0)'
          })
        }),
          zIndex:2
        });
        map.addLayer(innerLayer);

        //outer
        var outerLayer = new ol.layer.Vector({
    
    
        source: new ol.source.Vector({
    
    }),
        style: new ol.style.Style({
    
     
          stroke:new ol.style.Stroke({
    
    
            width:30,
            color:'rgba(170,170,170,0.4)'
        }),
        fill:new ol.style.Fill({
    
    
            color:'rgba(255,0,0,0)'
          })
        }),
          zIndex:2
        });
        map.addLayer(outerLayer);

再将面要素添加到两个图层中，设置zIndex层级比原图低一些。实现的效果图如下：

三、总结

本次博客又提供了一种在openLayer中实现面要素的立体化，这也可能是很多在开发中会遇到的问题，希望可以帮助到更多的小伙伴。