图形编辑器（GeometryEditor）

      通过本工具可在 PC 端地图中以所见即所得的方式点实现绘制编辑多边形、圆形与折线，点击标注 marker 等操作，工具提供了灵活的 API 接口，可方便的将其集成到您的系统中。

绘图工具以 Javascript API GL 的附加库的形式加载：
引入时须传入&libraries=tools 参数（查看：Javascript API GL 加载参数说明)

<script src='https://map.qq.com/api/gljs?v=1.exp&key=YOUR_KEY&libraries=tools'></script>

查看在线示例

多边形绘制、编辑

用于电子围栏、园区范围、服务范围的可视化编辑，提供邻近区域贴边吸附功能，操作简单不留缝隙，支持拆分与合并。

Head	Head
邻近多边形（围栏）贴边吸附	多边形（围栏）拆分
在线体验	在线体验

示例说明：

<!--放置一个按钮，点击开始绘制-->
<button onclick="drawing_polygon()">点我绘制围栏</button>

<script type="text/javascript">
  var map, editor

  //调用本函数，激活编辑工具绘制状态，开始绘制
  function drawing_polygon(){
      editor.setActiveOverlay("polygon133");
      //参数中的"polygon133"即为要进行编辑的MultiPolygon的id（注意方代码有定义）
  }

  //程序入口
  function initMap() {
      // 初始化地图
      map = new TMap.Map("container", {
          zoom: 12, // 设置地图缩放级别
          center: new TMap.LatLng(39.984104, 116.307503) // 设置地图中心点坐标
      });

      // 初始化几何图形及编辑器
      editor = new TMap.tools.GeometryEditor({
          map, // 编辑器绑定的地图对象
          overlayList: [ // 可编辑图层
              {
                  //GeometryEditor 以 MultiPolygon（可以理解为多边形图层）激活进行编辑
                  id: 'polygon133'
                  overlay: new TMap.MultiPolygon({
                      map
                  }),
              }
          ],
          actionMode: TMap.tools.constants.EDITOR_ACTION.DRAW, //编辑器的工作模式
          snappable: true // 开启邻近吸附
      });

      // 监听绘制结束事件，获取绘制几何图形
      editor.on('draw_complete', (geometry) => {
          console.log(geometry);
      });
  }
</script>

在线体验

Head	Head
点、线绘制	多边形绘制
在线体验	在线体验

编辑器接口调用

现在编辑器可以通过 select 方法和 stop 方法实现图形的点选功能和停止绘制或编辑的效果

示例说明：

<script type="text/javascript">
  editor = new TMap.tools.GeometryEditor({
    map, // 编辑器绑定的地图对象
    overlayList: [
      // 可编辑图层
      {
        overlay: new TMap.MultiPolygon({
          map,
          styles: {
            highlight: new TMap.PolygonStyle({
              color: 'rgba(255, 255, 0, 0.6)',
            }),
          },
          geometries: [
            {
              id: 'polygon1',
              paths: simplePath,
            },
          ],
        }),
        id: 'polygon',
        selectedStyleId: 'highlight',
      },
    ],
    actionMode: TMap.tools.constants.EDITOR_ACTION.INTERACT, // 编辑器的工作模式
    activeOverlayId: 'polygon', // 激活图层
    selectable: true, // 开启点选功能
    snappable: true, // 开启吸附
  });
  editor.select(['polygon1']); // 选中属于激活状态的图层内的几何图形
  editor.stop(); // 停止编辑
</script>

编辑器支持自定义样式

开发者可通过iconInfo配置参数替换编辑器中默认 icon 效果

示例说明：

<script type="text/javascript">
  editor = new TMap.tools.GeometryEditor({
    map, // 编辑器绑定的地图对象
    overlayList: [
      // 可编辑图层
      {
        overlay: new TMap.MultiPolygon({
          map,
          styles: {
            highlight: new TMap.PolygonStyle({
              color: 'rgba(255, 255, 0, 0.6)',
            }),
          },
          geometries: [
            {
              paths: simplePath,
            },
          ],
        }),
        id: 'polygon',
        selectedStyleId: 'highlight',
      },
    ],
    actionMode: TMap.tools.constants.EDITOR_ACTION.INTERACT, // 编辑器的工作模式
    activeOverlayId: 'polygon', // 激活图层
    selectable: true, // 开启点选功能
    snappable: true, // 开启吸附
    iconInfo: {
      // 编辑器的icon样式
      virtual: {
        // 改变虚点icon的样式
        src: '../img/point1.png', // 编辑点图片url或base64地址，若为url地址图片一定要在服务器端配置允许跨域
        width: 20, // 图片的宽度，默认为10px
        height: 20, // 图片的高度，默认为10px
        anchor: {
          // 图片的锚点位置，对象字面量{x:Number, y:Number}形式，在地图各种操作中，锚点的位置与标注位置点是永远对应的；若没有锚点默认为{ x: width / 2, y: height / 2 }；锚点以图片左上角点为原点
          x: 10,
          y: 10,
        },
      },
      actual: {
        // 改变实点icon的样式
        src: '../img/point2.png',
        width: 20,
        height: 20,
        anchor: {
          x: 10,
          y: 10,
        },
      },
    },
  });
</script>