安徽富通建设集团有限公司网站,网站开发工程师职位概要,php做的网站,wordpress 多备份mapbox并没有一个属性类似于’text-field’的symbol图层的直接可以标注的办法#xff0c;这里笔者提供两种其他的面图层标注的办法用来大家参考
效果图 方案一 把面图层当做点图层直接展示
在mapbox里面#xff0c;面图层是可以直接渲染成线图层和点图层的#xff0c;这里…mapbox并没有一个属性类似于’text-field’的symbol图层的直接可以标注的办法这里笔者提供两种其他的面图层标注的办法用来大家参考
效果图 方案一 把面图层当做点图层直接展示
在mapbox里面面图层是可以直接渲染成线图层和点图层的这里我们的图层标注就是直接将面图层渲染成点图层一个souce两个layer渲染成一个面在渲染成点点会在每一个闭合的要素上都会有标注这个方案就是快速简单缺点就是有要素不规范的时候存在一种情况就是有好多个稀碎的面组成一个面导致出现在一个面会出现很多个点标注解决办法就是自己处理一下geojson文件把那些稀碎的给它删了。 map.addSource(county,{type:geojson,data:你的geojson文件})let countyLayer {id:county,source:county,type:fill,maxzoom:8,paint: {// fill-opacity: 0.4,fill-color:blue,},layout: {visibility: visible},}let countyNoteLayer {id:countyNote,source:county,type:symbol,maxzoom:8,paint: {text-color:#505050,text-halo-color:#ffffff,text-halo-blur: 1, text-halo-width:1,},layout: {visibility: visible,text-field: {county},text-size:12,text-font: [ Microsoft YaHei ],icon-allow-overlap : true,text-allow-overlap: true,text-anchor: center},}方案二 把面geojson取每个要素的中心点改造为点geojson
这里我提供一个函数。这里使用了turf.center方法来取要素中心点就是两个souce两个layer一个面souce来渲染面把面的geojson封装成点的souce来渲染点用来标注
//把面取中心点封装成点数据
const changeFillToPoint (fillGeojson){let pointGeojson fillGeojson.features.map(function(feature) {let center turf.center(feature);return {type: Feature, geometry: { type: Point, coordinates: center.geometry.coordinates}, properties: {...feature.properties// 可以包含原始面的属性或者添加新的属性 } }; })return pointGeojson
}
