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

效果图：

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

  //innervar 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);//outervar 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中实现面要素的立体化，这也可能是很多在开发中会遇到的问题，希望可以帮助到更多的小伙伴。

openLayers中实现面要素立体化效果相关推荐

开源GIS（七）——openlayers中单击获取要素（深度好文）
目录一.引言二.前台方法 1.interaction中select方法 2.map中forEachFeatureAtPixel方法三.gis server方法 1.wms中getfeaturei ...
Openlayers中使用Overlay实现点击要素显示html内容弹窗并且动态更改弹窗内容
场景 Openlayers中使用Overlay实现点击要素弹窗并且弹窗随之移动: Openlayers中使用Overlay实现点击要素弹窗并且弹窗随之移动_BADAO_LIUMANG_QIZHI的博客 ...
Openlayers中使用Overlay实现点击要素弹窗并且弹窗随之移动
场景 Vue+Openlayer使用overlay实现弹窗弹出显示与关闭: Vue+Openlayer使用overlay实现弹窗弹出显示与关闭_BADAO_LIUMANG_QIZHI的博客-CSDN博 ...
Openlayers中使用Cluster+Overlay实现点击单个要素和聚合要素时显示不同弹窗
场景 Openlayers中使用Cluster实现缩放地图时图层聚合与取消聚合: Openlayers中使用Cluster实现缩放地图时图层聚合与取消聚合_BADAO_LIUMANG_QIZHI的博客 ...
Leaflet中使用Leaflet.Pin插件实现图层要素编辑效果
场景 Leaflet快速入门与加载OSM显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880 前面所引用的 ...
Openlayers中使用animate实现车辆定位导航效果(以当前车辆为中心移动)
场景 Openlayers中加载Geoserver切割的EPSG:900913离线瓦片地图并显示: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/ ...
开源GIS（十五）——openlayers通过geoserver中WFS删除要素
目录一.引言二.WFS要素删除实现三.WFS要素删除原理 1.请求xml 2.postman使用 3.要素删除 4.返回xml 四.openlayers中feature的坐标信息获取五.总结 ...
openlayers中使用rBush(R树）来存放要素等信息，本文修改了一点其中的rbush源码中的demo，使用canvas画出了insert和delete操作（建立树和删除树中数据）
openlayers中使用rBush(R树)来存放要素等信息,本文修改了一点其中的rbush源码中的demo,使用canvas画出了insert和delete操作(建立树和删除树中数据) 修改后的源代 ...
Openlayers中使用Cluster实现点位元素重合时动态聚合与取消聚合
场景 Openlayers中使用Cluster实现缩放地图时图层聚合与取消聚合: Openlayers中使用Cluster实现缩放地图时图层聚合与取消聚合_BADAO_LIUMANG_QIZHI的博客 ...

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

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

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

二、实现过程及效果展示

三、总结

openLayers中实现面要素立体化效果相关推荐

最新文章

热门文章