需求:加载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支撑:
json数据地址:
//data.mars3d.cn/file/geojson/areas/340100_full.json
修改为为TopoJSON数据后,可以传一下new mars3d.layer.GeoJsonLayer({的data。与url是二选一的。
data:{//说明:data里面传的是json文件的数据格式,就是普通文件打开,花括号里面的数据。}