方式三:分图层设置 {"id":"beijing200plus","type":"fill","source":"beijing","paint":{"fill-color":"#b50a09"},"filter":['>=',["get","population"],200]},{"id":"beijing200","type":"fill","source":"beijing","paint":{"fill-color":"#f04040"},"filter":['all',['<',["ge...
首先,通过map对象获取到你想要重置颜色的图层的引用。可以使用map.getLayer方法,并传入图层的id来获取图层对象。 通过setLayoutProperty方法设置图层的属性。传入图层id、属性名称和新的属性值即可。在这种情况下,我们需要设置图层的"fill-color"属性。 将新的颜色值作为属性值传入setLayoutProperty方法。可以使用RGB、RGBA...
"type": "fill", "source": "beijing", "paint":{ "fill-color":"#ffaa7f" }, "filter":['all',['<',["get","population"],100],['>=',["get","population"],50]] }, { "id": "beijing50", "type": "fill", "source": "beijing", "paint":{ "fill-color":"#ffd0a6" }, ...
case表达式写起来较为繁琐,但它对判断值没有升序这种要求,只要是true或false就行了。 方式三:分图层设置 {"id":"beijing200plus","type":"fill","source":"beijing","paint":{"fill-color":"#b50a09"},"filter":['>=',["get","population"],200]},{"id":"beijing200","type":"fill","source"...
"fill-color":["get","color"] 在线示例 方式五:分图层设置颜色 通过图层的filter筛选条件实现,每个区设置成一个图层,然后设置每个图层的颜色。 图层样式设置方式: [{"id":"beijing-haidian","type":"fill","source":"beijing","paint":{"fill-color":"#FFCC99"},"filter":["==",["get","name"...
'fill-color': [ "step", ["get", "value"], "hsl(0, 0%, 100%)", 8, "hsl(202, 88%, 51%)", 18, "hsl(194, 88%, 51%)", 36, "hsl(185, 88%, 51%)", 54, "hsl(177, 96%, 53%)", 72, "hsl(157, 96%, 53%)", 90, ...
"fill-color": "rgba(32, 62, 122, 1)"最后的参数1同样是设置透明度,优先级要比fill-opacity低。 面图层属性设置链接:https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#fill mapbox-gl开发是讲述如何从基础到实际应用进行地图开发的教程,不定时进行持续进行更新,如有疑问,公众号留言进行讨论。
'fill-color': 'green', // 填充颜色 'fill-opacity': 1, // 透明度 'fill-outline-color': 'green' // 边缘颜色 } }) /** * radius: 半径,单位为千米,不能为0; * center: 圆心 */ const r = 1000 / 1000; const g = turf.circle([106.33, 38.333], r); ...
_this.map.moveLayer('areaMapFill', 'markerPoint') _this.map.moveLayer('areaMapLine', 'markerPoint') } 3:/ 层级越高越在上层 paint: { "fill-opacity": 0.9, "fill-color": "#00f" }, metadata:{ zIndex: 1 }
type:'fill', source:{ type:'vector', url:'mapbox://mapbox.3o7ubwm8' }, 'source-layer':'RPD_Parks', layout:{ visibility:'visible' }, paint:{ 'fill-color':'rgba(61,153,80,0.55)' } }); }); The final product for the code snippet above could be a map zoomed to show San ...