geojson数据与graphic数据层级zIndex叠加控制说明详解
前提说明:
1.在我们mars3d的设计架构中,矢量图层是带有地理信息特征的一些点线面的图形展示,来补充丰富三维效果。
2.常见的矢量图层有:GraphicLayer,BusineDataLayer,GeoJsonLayer
3.不同的图层叠加的时候,必然涉及层级控制。
3.1此时我们需要了解相关的矢量图层的矢量数据类型差别。
graphicLayer指定数据类型,需要在symbol的type中,指定详细的矢量数据的类型,此刻代码必须指定为Entity类型。
type: "point",
如果是 Primitive类型,则代码必须:
type: "rectangleP",
可选择的类型有:Global - V3.8.0 - Mars3D API文档
在代码中指定的需参考截图说明:
GeoJsonLayer指定数据类型,同样需要在symbol的type中,指定详细的矢量数据的类型,
3.2在保证了矢量数据类型,均是Entity类型或者均是Primitive类型后,
我们需要继续增加参数控制。在对应的StyleOptions中,增加clampToGround//是否贴地控制。
此时代码必须:
clampToGround: true,
参考的代码位置:
const graphicLayer = new mars3d.layer.GeoJsonLayer({zIndex: 9,data: {"type": "FeatureCollection","layer": {"id": "M-C91E06B6-AF6F-4DB3-8237-1F036F8F89C9","name": "1111"},"features": [{"type": "Feature","geometry": {"type": "Polygon","coordinates": [[[116.14095,30.758996,542.8],[116.237801,30.716212,194.7],[116.279206,30.787596,658.2],[116.242369,30.798216,488.6]]]}}]},popup: "zIndex是9,重叠的区域层级应该在矩形下面",symbol: {type: "polygon",styleOptions: {clampToGround: true,color: "#00ffff",opacity: 0.4,label: {text: "zIndex是9,重叠的区域层级应该在矩形下面",font_size: 18,color: "red"},//文字配置不想要可以直接注释label}},flyTo: true})map.addLayer(graphicLayer)
此时GraphicLayer的代码配置参考:
const graphicLayer1 = new mars3d.layer.GraphicLayer({popup: "zIndex矩形999最大应该在上面",})map.addLayer(graphicLayer1)graphicLayer1.startDraw({type: "rectangle",style: {clampToGround: true,color: "#ffff00",zIndex: 900,opacity: 1,outline: true,outlineWidth: 12,outlineColor: "#ff0000",label: {text: "zIndex矩形999最大重叠区域应该在上面",font_size: 18,color: "red",distanceDisplayCondition: true,distanceDisplayCondition_far: 500000,distanceDisplayCondition_near: 0}}})
效果:
json图层:
在json图层上面绘制的GraphicLayer效果:
重叠部分层级测试:
总结:
1.矢量图层层级控制,需要满足:
- 矢量数据类型type必须为同类型,
type: "rectangle",
- 矢量数据样式StyleOptions均为贴地样式,
style: {clampToGround: true,
- 层级控制zIndex,zIndex数值越大就在越上面,
zIndex: 900,
2.矢量图层层级控制,如果不是同类型的时候,需要使用setHeight参数,实现层级控制效果。
setHeight: 900,
补充说明:
1.矢量图层永远在瓦片图层上方。