效果图:

实现代码:

export function showChinaLine() {
  map.basemap = 2017

  graphicLayer = new mars3d.layer.GeoJsonLayer({
    name: "全国省界",
    url: "https://data.mars3d.cn/file/geojson/areas/420000_full.json",
    format: simplifyGeoJSON,
    symbol: {
      type: "polylineP",
      styleOptions: {
        width: 2,
        color: "rgba(255,255,255,0.3) ",
        label: {
          text: "{name}",
          position: "{center}", // 省会位置center
          font_size: 30,
          color: "#ffffff",
          outline: true,
          outlineColor: "#000000",
          scaleByDistance: true,
          scaleByDistance_far: 60000000,
          scaleByDistance_farValue: 0.2,
          scaleByDistance_near: 1000000,
          scaleByDistance_nearValue: 1,
          distanceDisplayCondition: true,
          distanceDisplayCondition_far: 10000000,
          distanceDisplayCondition_near: 100000,
          setHeight: 10000
        }
      }
    },
    flyTo: true
  })
  map.addLayer(graphicLayer)

  const graphic = new mars3d.layer.GeoJsonLayer({
    name: "全国省界",
    url: "https://data.mars3d.cn/file/geojson/areas/420000.json",
    format: simplifyGeoJSON,
    symbol: {
      type: "polyline",
      styleOptions: {
        color: "rgba(255,255,255,0.3)",
        width: 4,
        opacity: 0.8,
      }
    },
    flyTo: true
  })
  map.addLayer(graphic)


}

对应链接:

功能示例(Vue版) | Mars3D三维可视化平台 | 火星科技 

Logo

电影级数字人,免显卡端渲染SDK,十行代码即可调用,工业级demo免费开源下载!

更多推荐