new mars3d.layer.GeoJsonLayer({加载边线为虚线的行政区效果

需求：加载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文件的数据格式，就是普通文件打开，花括号里面的数据。}