maptalks批量添加标注_maptalks批量标注-CSDN博客

本文链接：https://blog.csdn.net/qq_36179257/article/details/106136587

maptalks有很多例子，但都是基于一个点实现，具体可以参考官方文档:https://maptalks.org/examples/cn/style/text-marker/#style_text-marker

要实现批量多点添加，无非就是把所有点放到集合里，直接上代码(复制可直接运行)：

<!DOCTYPE html>
<html>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>批量添加文字标注</title>
  <style type="text/css">
    html,body{margin:0px;height:100%;width:100%}
    .container{width:100%;height:100%}
  </style>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css">
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.min.js"></script>
  <body>
    <button type="button" onclick="showText()">添加标注</button>
    <button type="button" onclick="hideText()">移除标注</button>
    <div id="map" class="container"></div>
    <script>
      var addMap,removeMap;
      var map = new maptalks.Map('map', {
        center: [110.300661,19.963663], //地图中心点
        zoom: 8, //初始缩放比例
        attribution: true,
        baseLayer: new maptalks.TileLayer('base', { //切片底图
          urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
          subdomains: ['a','b','c','d'],
          attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'
        })
      });

      var layer = new maptalks.VectorLayer('v').addTo(map);
      var markers = []; //标注集合
      //测试数据
      var dataCity = [
          { "NAME": "三沙", "LON": 112.336879273047771, "LAT": 16.836754905528128},
          { "NAME": "澄迈", "LON": 109.992097486993245, "LAT": 19.68731407109917},
          { "NAME": "陵水", "LON": 109.940284947678308, "LAT": 18.568091047210167},
          { "NAME": "琼中", "LON": 109.850423797032974, "LAT": 19.033948799611515},
          { "NAME": "临高", "LON": 109.71550393766463, "LAT": 19.802623077068805},
          { "NAME": "乐东", "LON": 109.052600159488279, "LAT": 18.654156081567358},
          { "NAME": "海口", "LON": 110.423592399535693, "LAT": 19.836467222233491},
          { "NAME": "东方", "LON": 108.838141722685279, "LAT": 18.995256092382061},
          { "NAME": "白沙", "LON": 109.347495333027027, "LAT": 19.211798953459351},
          { "NAME": "五指山", "LON": 109.5069668586804, "LAT": 18.82743722073732 },
          { "NAME": "屯昌", "LON": 110.04995053082937, "LAT": 19.344360642923714},
          { "NAME": "保亭", "LON": 109.64525083524768, "LAT": 18.593295628622144},
          { "NAME": "三亚", "LON": 109.419350587707115, "LAT": 18.392773600317582},
          { "NAME": "儋州", "LON": 109.399937987613555, "LAT": 19.570685903351542},
          { "NAME": "文昌", "LON": 110.769283441612515, "LAT": 19.744194915066803},
          { "NAME": "万宁", "LON": 110.285758871302605, "LAT": 18.835831050228151},
          { "NAME": "定安", "LON": 110.318376843402064, "LAT": 19.476566950745699},
          { "NAME": "琼海", "LON": 110.402535382871235, "LAT": 19.210154372684158},
          { "NAME": "昌江", "LON": 108.999507523347788, "LAT": 19.218402349243231}
      ]
      //循环获取测试数据经纬度和名称，添加到标注属性
      for (var i = 0; i < dataCity.length; i++) {
          var x = dataCity[i].LON
          var y = dataCity[i].LAT
          markers.push(new maptalks.Marker([x, y], { //标注添加到集合
              'symbol' : {
              'textName' : dataCity[i].NAME,
              'textSize' : 10
          }
          }));
      }
    layer.addGeometry(markers);

    //显示标注图层
    showText = function() {
      layer.show()
    }
    //隐藏标注图层
    hideText = function() {
      layer.hide()
    }

    </script>
  </body>
</html>