vue3 项目开发过程中需要渲染地图，并在地图中绘制线条，线条要可以点击，触发弹窗，这里我们使用的是南京地图开放平台

首先引入依赖

在index.html中引入以下文件。

<link rel="stylesheet" href="//mapservices.njghzy.com.cn:84/njapis/njmaps/mapbox/css/mapbox-gl.css">
<script type="text/javascript" src="//mapservices.njghzy.com.cn:84/njapis/njmaps/mapbox/js/mapbox-gl.js"></script>
<script type="text/javascript"
        src="//mapservices.njghzy.com.cn:84/other/njapis/auth/GeoGlobe/GeoGlobeJS.min.js?njtoken=your token"></script>
<script src="//polyfill.alicdn.com/polyfill.min.js"></script>

线条经纬度数据

lineData: [
[
  [118.72465105161245, 32.04129231819045],
  [118.83348107172577, 32.04356254941491]
],
[
  [118.77850801374001, 32.071876614710554],
  [118.77854291775418, 32.060043311688545],
  [118.7652679585209, 32.03146929570509],
  [118.74936775548377, 32.02623267304445]
],
]

绘制线条

将线条的内容绘制出来

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

  var colorArr = ["rgba(0, 244, 224, 1.00)", "rgba(245, 20, 83, 1.00)"];
  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);

  // 添加线图层
  that.map.addLayer({
    'id': 'lines', //图层ID
    'type': 'line', //类型
    'source': 'line-source', //数据源
    'paint': {
      'line-width': 5, //线宽
      'line-color': ['get', 'color'] //通过颜色属性来显示对应的线颜色
    }
  });
},

监听线条点击事件

map.on('click', 'lines', function (e) {
  var feature = e.features[0]; // 获取点击的要素
  console.log('图层被点击了', feature);
  console.log('图层被点击了', e);
  that.show2 = true
  that.left = e.originalEvent.layerX
  that.top = e.originalEvent.layerY
})

点击线条后，我们可以获取当前位置信息以及线条信息，这时候我们就可以通过这些信息来添加弹窗信息了。