需求:加载geojson数据的时候,实现边框线边线虚线效果。
export function showRegion() { removeLayer() graphicLayer = new mars3d.layer.GeoJsonLayer({ name: "合肥市", url: "//data.mars3d.cn/file/geojson/areas/340100_full.json", symbol: { styleOptions: { fill: true, randomColor: true, // 随机色 opacity: 0.3, outline: true, outlineStyle: { color: "#FED976", width: 3, opacity: 1, materialType: mars3d.MaterialType.PolylineDash, materialOptions: { color: Cesium.Color.CYAN, dashLength: 8.0 } }, // 高亮时的样式 highlight: { opacity: 0.9, outlineStyle: { width: 6, color: "#ff0000", addHeight: 100 } }, label: { // 面中心点,显示文字的配置 text: "{name}", // 对应的属性名称 opacity: 1, font_size: 40, color: "#ffffff", font_family: "楷体", outline: true, outlineColor: "#000000", outlineWidth: 3, background: false, backgroundColor: "#000000", backgroundOpacity: 0.1, font_weight: "normal", font_style: "normal", scaleByDistance: true, scaleByDistance_far: 20000000, scaleByDistance_farValue: 0.1, scaleByDistance_near: 1000, scaleByDistance_nearValue: 1, distanceDisplayCondition: false, distanceDisplayCondition_far: 10000, distanceDisplayCondition_near: 0, visibleDepth: false } } }, popup: "{name}", // "tooltip": "{name}", flyTo: true }) map.addLayer(graphicLayer) // 绑定事件 graphicLayer.on(mars3d.EventType.load, function (event) { console.log("数据加载完成", event) }) graphicLayer.on(mars3d.EventType.click, function (event) { console.log("单击了图层", event) }) }
此效果唯一的问题在于,json数据的格式,在边框部分会存在重合的效果。所以需要把json数据格式改为TopoJSON数据。
示例链接地址:
1.http://mars3d.cn/editor-vue.html?id=layer-graphic/geojson/basis
关键代码:
outline: true, outlineStyle: { color: "#FED976", width: 3, opacity: 1, materialType: mars3d.MaterialType.PolylineDash, materialOptions: { color: Cesium.Color.CYAN, dashLength: 8.0 }
关键api支撑:
Mars3D三维可视化平台 | 火星科技
json数据地址:
//data.mars3d.cn/file/geojson/areas/340100_full.json
修改为为TopoJSON数据后,可以传一下new mars3d.layer.GeoJsonLayer({的data。与url是二选一的。
data:{//说明:data里面传的是json文件的数据格式,就是普通文件打开,花括号里面的数据。}