腾讯地图绘画多边形，计算面积，删除多边形？

腾讯地图绘画多个多边形，计算面积，同时删除多边形
zhooson

1170人浏览 · 2023-12-17 11:15:36
zhooson · 2023-12-17 11:15:36 发布
效果图：
腾讯地图绘画多边形-PC版本
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>地图</title>
  </head>

  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.4/vue.min.js"></script>
  <script
    type="text/javascript"
    src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"
  ></script>
  <script
    charset="utf-8"
    type="text/javascript"
    src="https://map.qq.com/api/gljs?libraries=tools,geometry&v=1.exp&key=更换你的KEY"
  ></script>

  <style type="text/css">
    html,
    body {
      height: 100vh;
      margin: 0px;
      padding: 0px;
    }
    #my_app {
      height: 100%;
    }

    #container {
      width: 100%;
      height: 80%;
    }

    #toolControl {
      position: absolute;
      top: 10px;
      left: 0px;
      right: 0px;
      margin: auto;
      width: 252px;
      z-index: 1001;
    }

    .toolItem {
      width: 30px;
      height: 30px;
      float: left;
      margin: 1px;
      padding: 4px;
      border-radius: 3px;
      background-size: 30px 30px;
      background-position: 4px 4px;
      background-repeat: no-repeat;
      box-shadow: 0 1px 2px 0 #e4e7ef;
      background-color: #ffffff;
      border: 1px solid #ffffff;
    }

    .toolItem:hover {
      border-color: #789cff;
    }

    .active {
      border-color: #d5dff2;
      background-color: #d5dff2;
    }

    #marker {
      background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker_editor.png');
    }

    #polyline {
      background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/polyline.png');
    }

    #polygon {
      background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/polygon.png');
    }

    #circle {
      background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/circle.png');
    }

    #rectangle {
      background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/rectangle.png');
    }

    #ellipse {
      background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/ellipse.png');
    }

    .next {
      margin: 50px auto 0 auto;
      width: 300px;
      height: 60px;
      background: red;
      color: #fff;
      font-size: 40px;
      text-align: center;
    }
  </style>

  <body>
    <div id="my_app" v-cloak>
      <div id="container"></div>

      <div class="next" @click="nextHandler">下一步</div>

      <div id="toolControl">
        <div
          v-for="(item)  in list"
          :key="item.id"
          class="toolItem"
          :class="{'active': activeId === item.id}"
          :id="item.id"
          :title="item.title"
          @click="selectItem(item.id)"
        ></div>
        <!-- <div class="toolItem" id="deleteButton" @click="del">del</div> -->
      </div>
    </div>
  </body>
  <script>
    var one = new Vue({
      el: '#my_app',
      data: {
        activeId: '', // 初始化默认值
        selectId: '', // 已选择ID
        editor: '',
        list: [
          // {
          //   id: 'marker',
          //   title: '点标记',
          // },
          // {
          //   id: 'polyline',
          //   title: '折线',
          // },
          {
            id: 'polygon',
            title: '多边形',
          },
          // {
          //   id: 'circle',
          //   title: '圆形',
          // },
          // {
          //   id: 'rectangle',
          //   title: '矩形',
          // },
          // {
          //   id: 'ellipse',
          //   title: '椭圆',
          // },
        ],
        map: null,
        locationList: [],
      },
      mounted() {
        this.$nextTick(() => {
          this.initMap();
        });
      },
      methods: {
        // del() {},
        selectItem(id) {
          this.activeId = id;

          // 切换编辑器模式(进入绘画模式)
          this.editor.getActionMode() === 1
            ? this.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.DRAW)
            : '';

          this.editor.setActiveOverlay(id); // 激活图层
          this.editor.enable(); // 是否启用 disable 停用 enable 启用
        },

        initMap() {
          // 初始化地图
          this.map = new TMap.Map('container', {
            zoom: 17, // 设置地图缩放级别
            center: new TMap.LatLng(39.984104, 116.307503), // 设置地图中心点坐标
          });

          var polygon = new TMap.MultiPolygon({
            map: this.map,
            styles: {
              highlight: new TMap.PolygonStyle({
                color: 'rgba(255, 255, 0, 0.6)',
              }),
            },
          });

          this.editor = new TMap.tools.GeometryEditor({
            map: this.map, // 编辑器绑定的地图对象
            overlayList: [
              {
                overlay: polygon,
                id: 'polygon',
                selectedStyleId: 'highlight',
              },
            ],

            actionMode: TMap.tools.constants.EDITOR_ACTION.DRAW,
            // 编辑器的工作模式
            activeOverlayId: '', // 激活图层
            snappable: true, // 开启吸附
            selectable: true, // 开启点选功能
            zIndex: 1,
          });
          this.editor.disable(); // 初始化状态禁用编辑器

          // 监听绘制结束事件，获取绘制几何图形
          this.editor.on('draw_complete', (geometry) => {
            console.log('绘画成功event', geometry); // 每种图形返回值不一样，需要特殊处理
            this.locationList.push({ ...geometry, type: this.activeId });
            // 多边形处理
            if (this.activeId === 'polygon') {
              this.computeArea(geometry.paths, this.locationList.length - 1);
            }
            //... 其他类型的形状 面积 自行处理
          });

          // polygon.on('click', (res) => {
          //   console.log('当前点击哪个图形', res);

          //   // 切换编辑器为 可编辑模式[绘制 = 1， 编辑 = 2]
          //   this.editor.getActionMode() === 2
          //     ? this.editor.setActionMode(
          //         TMap.tools.constants.EDITOR_ACTION.INTERACT
          //       )
          //     : '';
          //   // 选择
          //   this.editor.select([res.geometry.id]);
          //   // 记录当前id
          //   this.selectId = res.geometry.id;
          // });

          // this.editor.on('delete_complete', (geometry) => {
          //   console.log('删除成功', geometry); // 每种图形返回值不一样，需要特殊处理
          // });
          // 监听删除、修改、拆分、合并完成事件
          let evtList = ['delete', 'adjust', 'split', 'union'];
          evtList.forEach((evtName) => {
            this.editor.on(evtName + '_complete', (evtResult) => {
              console.log(11, evtName, evtResult);
            });
          });

          // 添加删除按钮的点击事件
          // document
          //   .getElementById('deleteButton')
          //   .addEventListener('click', () => {
          //     this.editor.delete();
          //     const selectItem = this.locationList.find(
          //       (c) => c.id === this.selectId
          //     );
          //     selectItem.infowindow.destroy();
          //   });
        },

        // 计算路径围成的多边形的面积
        computeArea(path, index) {
          // 绘画结束后，停用编辑模式
          this.editor.disable(); // disable 停用 enable启用
          this.activeId = '';

          // 计算面积
          const area = TMap.geometry.computeArea(path);
          this.locationList[index].area = area;

          // 计算中心点坐标
          const position = TMap.geometry.computeCentroid(path);
          console.log('position', position);
          let idName = 'close_' + String(index);

          this.locationList[index].infowindow = new TMap.InfoWindow({
            content: `<div class="info">
                       <div id=${idName} data-item=${JSON.stringify(
              this.locationList[index]
            )} style="margin: 0 auto; text-align: center; color: #fff; width: 30px; height: 30px; background: rgba(0,0,0,0.4); line-height: 30px">X</div>
                       <div style="padding: 2px 5px; background: #fff; margin-top: 5px">面积：${area.toFixed(
                         0
                       )}平方米</div>
                     </div>`, //设置信息窗口的文本内容
            position: position,
            map: this.map, //指定信息窗体显示在哪张地图上
            offset: { x: 0, y: 10 },
            zIndex: 2,
            enableCustom: true, //自定义窗口
          });

          // 给 infowindow 绑定click事件（PC用click，在移动端用 touchstart ）
          document
            .getElementById(idName)
            .addEventListener('click', (e) => {
              // document.getElementById(idName).onclick = (e) => {
              console.log(333, JSON.parse(e.target.dataset.item));
              const res = JSON.parse(e.target.dataset.item);

              // 切换编辑器为 可编辑模式[绘制 = 1， 编辑 = 2]
              this.editor.getActionMode() === 2
                ? this.editor.setActionMode(
                    TMap.tools.constants.EDITOR_ACTION.INTERACT
                  )
                : '';
              // 选择
              this.editor.select([res.id]);
              // 记录当前id
              this.selectId = res.id;

              // console.log('close-event');
              const selectItem = this.locationList.find(
                (c) => c.id === this.selectId
              );
              selectItem.infowindow.destroy();
              this.editor.delete();
            });
        },

        initMap2() {
          // 初始化地图
          this.map = new TMap.Map('container', {
            zoom: 17, // 设置地图缩放级别
            center: new TMap.LatLng(39.984104, 116.307503), // 设置地图中心点坐标
          });

          // 初始化几何图形
          var marker = new TMap.MultiMarker({
            map: this.map,
          });
          var polyline = new TMap.MultiPolyline({
            map: this.map,
          });
          var polygon = new TMap.MultiPolygon({
            map: this.map,
          });
          var circle = new TMap.MultiCircle({
            map: this.map,
          });
          var rectangle = new TMap.MultiRectangle({
            map: this.map,
          });
          var ellipse = new TMap.MultiEllipse({
            map: this.map,
          });

          this.editor = new TMap.tools.GeometryEditor({
            // TMap.tools.GeometryEditor 文档地址：https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocEditor
            map: this.map, // 编辑器绑定的地图对象
            overlayList: [
              // 可编辑图层 文档地址：https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocEditor#4
              {
                overlay: marker,
                id: 'marker',
              },
              {
                overlay: polyline,
                id: 'polyline',
              },
              {
                overlay: polygon,
                id: 'polygon',
                selectedStyleId: 'highlight',
              },
              {
                overlay: circle,
                id: 'circle',
              },
              {
                overlay: rectangle,
                id: 'rectangle',
              },
              {
                overlay: ellipse,
                id: 'ellipse',
              },
            ],
            actionMode: TMap.tools.constants.EDITOR_ACTION.DRAW, // 编辑器的工作模式
            activeOverlayId: this.activeId, // 激活图层
            snappable: true, // 开启吸附
            zIndex: 1,
            selectable: true, // 开启点选功能
          });
          // 监听绘制结束事件，获取绘制几何图形
          this.editor.on('draw_complete', (geometry) => {
            console.log('所有顶点坐标集合', geometry); // 每种图形返回值不一样，需要特殊处理
            this.locationList.push({ ...geometry, type: this.activeId });
            // 多边形处理
            // if (this.activeId === 'polygon') {
            //   this.computeArea(geometry.paths, this.locationList.length - 1);
            // }
            //... 其他类型的形状 面积 自行处理
          });

          // polygon.on('click', (res) => {
          //   console.log(12312331, res);
          //   // this.map.removeLayer(res.id);
          // });
        },

        nextHandler() {
          wx.miniProgram.getEnv(function (res) {
            console.log(res.miniprogram); // true
            if (res.miniprogram) {
              wx.miniProgram.navigateTo({
                url: `/pages/test/test?lcation=${JSON.stringify(
                  this.locationList
                )}`,
              });
            }
          });
        },
      },
    });
  </script>
</html>