js 南京地图开放平台地图绘制虚线

经纬度数据

lineData: [
    [
      [118.65848076002578, 31.979939940927373],
      [118.66587124452269, 31.982411780406892],
      [118.6784025250397, 31.989793219616068],
      [118.68638477906819, 31.992282309581604],
      [118.69368038758762, 31.99468556885921],
      [118.69943104371663, 31.998204627086515],
      [118.69865856751966, 32.00507108216479],
      [118.69839203016392,32.01666034692894],
      [118.69890701429523,32.02155269617208],
      [118.70482933180017,32.03013576501981],
      [118.71435653822078,32.046443595830304],
      [118.72140076831079,32.05924459568437],
      [118.72174409106441,32.074350796856294],
      [118.70517876819008,32.059673749126844],
      [118.6868048872156,32.04206623070339],
      [118.67315780774021,32.017690315180694],
      [118.65865242139319,31.979581489493228],
    ]
]

绘制虚线

设置虚线的样式，例如[5, 3]表示5个像素的虚线段和3个像素的间隔

// 绘制虚线
getLine() {
  var that = this;
  // 创建geojson对象
  var GeoJSONUtil = new GeoGlobe.Format.GeoJSONUtil();
  // 通过点方法组装点geojson串
  var geojson = GeoJSONUtil.lines(this.lineData);

  var colorArr = [
    "#ae1041",
    "#15f0b0",
    "#f91352",
    "#f8d10f",
    "#04f3e0",
  ];
  var m = 0;
  var data = geojson.data.features;
  for (var i = 0; i < data.length; i++) {
    data[i].properties = {
      "color": colorArr[m], //颜
    };
    m++;
  }
  // 添加线数据源
  that.map.addSource('line-source', geojson);
  // 添加线图层
  var layerData = {
    'id': 'lines', //图层ID
    'type': 'line', //类型
    'source': 'line-source', //数据源
    'paint': {
      'line-width': 4, //线宽
      'line-color': ['get', 'color'], //通过颜色属性来显示对应的线颜色
       'line-dasharray': [5, 3] // 设置虚线的样式，例如[5, 3]表示5个像素的虚线段和3个像素的间隔
    }
  }
  that.map.addLayer(layerData);
},