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