整合腾讯云地图的绘制和编辑几何图形

官方绘制案例:https://lbs.qq.com/webDemoCenter/glAPI/glEditor/toolDraw

官方编辑案例:https://lbs.qq.com/webApi/javascriptV2/jsGuide/jsCover

整合绘制和编辑代码如下:

记得把代码里的key改成自己的!

​
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>编辑几何图形</title>
</head>
<script charset="utf-8"
  src="https://map.qq.com/api/gljs?libraries=tools&v=1.exp&key=改成自己的key"></script>
<style type="text/css">
  html,
  body {
    height: 100%;
    margin: 0px;
    padding: 0px;
  }

  #map-container {
    width: 100%;
    height: 80%;
    position: relative;
  }

  #toolControl {
    position: absolute;
    top: 10px;
    left: 0px;
    right: 0px;
    margin: auto;
    width: 126px;
    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;
  }

  #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');
  }

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

<body onload="initMap()">
  <div id="map-container"></div>
  <div id="toolControl">
    <div class="toolItem" id="polygon" title="多边形" onclick="drawShape('polygon');"></div>
    <div class="toolItem" id="circle" title="圆形" onclick="drawShape('circle');"></div>
    <div class=" toolItem" id="delete" onclick="editor.delete();" title="删除"></div>
  </div>
  <div>
    单选:鼠标左键点击图形<br />
    多选:按下ctrl键后点击多个图形<br />
    删除:选中图形后按下delete键或点击删除按钮可删除图形<br />
    编辑:选中图形后出现编辑点,拖动编辑点可移动顶点位置,双击实心编辑点可删除顶点<br />
    拆分:选中单个多边形后可绘制拆分线,拆分线绘制完成后自动进行拆分<br />
    合并:选中多个相邻多边形后可进行合并,飞地形式的多边形不支持合并<br />
    中断:按下esc键可中断当前操作,点选的图形将取消选中,编辑过程将中断
  </div>
  <script type="text/javascript">
    var map, editor, shape;

    function drawShape(e) {
      console.log("drawPolygon!!: ", e)
      shape = e
      document.getElementById(shape).className = "toolItem active";
      editor.setActiveOverlay(shape)
      editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.DRAW);
    };
    function initMap() {
      // 初始化地图
      map = new TMap.Map("map-container", {
        zoom: 17, // 设置地图缩放级别
        center: new TMap.LatLng(40.04019000341765, 116.27446815226199) // 设置地图中心点坐标
      });

      // 初始化几何图形及编辑器
      editor = new TMap.tools.GeometryEditor({
        map, // 编辑器绑定的地图对象
        overlayList: [ // 可编辑图层
          {
            overlay: new TMap.MultiPolygon({
              map,
              styles: {
                highlight: new TMap.PolygonStyle({
                  color: 'rgba(255, 255, 0, 0.6)'
                }),
                highlight2: new TMap.PolygonStyle({
                  color: 'rgba(255, 0, 0, 0.6)'
                })
              }
            }),
            id: 'polygon',
            selectedStyleId: 'highlight'
          }, {
            overlay: new TMap.MultiCircle({
              map,
              styles: {
                highlight2: new TMap.PolygonStyle({
                  color: 'rgba(255, 0, 0, 0.6)'
                })
              }
            }),
            id: 'circle',
            selectedStyleId: 'highlight2'
          }
        ],
        actionMode: TMap.tools.constants.EDITOR_ACTION.INTERACT, // 编辑器的工作模式
        activeOverlayId: 'polygon', // 激活图层
        selectable: true, // 开启点选功能
        snappable: true // 开启吸附
      });

      // 监听删除、修改、拆分、合并完成事件
      let evtList = ['delete', 'adjust'];
      evtList.forEach(evtName => {
        editor.on(evtName + '_complete', evtResult => {
          console.log(evtName, evtResult);
        });
      });
      // 监听绘制结束事件,获取绘制几何图形
      editor.on('draw_complete', (geometry) => {
        document.getElementById(shape).className = "toolItem";
        editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.INTERACT);
      });
    }
  </script>
</body>

</html>

​

 

热门文章

暂无图片
编程学习 ·

关于Error:java: Compilation failed: internal java compiler error的解决方案

文章目录事故现场分析解决方案最终结果 事故现场分析 使用Idea导入新项目或升级idea或新建项目时会出现以上异常信息,导致这个错误的原因主要是因为jdk版本问题,此处有两个原因,一个是编译版本不匹配,一个是当前项目jdk版本不支持 常规分析:看一下compile,原来真的是错在…
暂无图片
编程学习 ·

性能优化总结

性能优化方向流畅(启动速度、卡顿) 稳定(内存泄漏、崩溃) 功耗(耗电、网络) 安装包(包体积)一、 流畅 卡顿优化 1、 布局优化简单布局使用Java代码代替布局文件 Android加载Xml布局文件,并将其转换成View,需要经历XML解析,使用Java代码直接创建View可以省去这一过程使用标签…
暂无图片
编程学习 ·

COMP暴涨 风险暗藏

作者|JX kin编辑|文刀6月29日,在以太坊上构建的DeFi借贷协议Compound,因资金规模首超10亿美元引起市场关注,更受关注的是该协议的治理代币COMP近期的暴涨暴跌。从几十美元到400多美元再到如今的200多美元,COMP这趟过山车仅仅开了不到半个月。6月16日,自Compound以“流动性…
暂无图片
编程学习 ·

自适应核回归算法讲解

该文是对07年论文“Kernel Regression for Image Processing and Reconstruction”的总结性介绍。对于初学者来说,首先要搞明白“核回归”是什么意思。所谓“回归”可以简单地理解为对样本值的拟合。在目标函数中,通常会给不同样本值误差分配不同的权重,决定权重分配的函数即…
暂无图片
编程学习 ·

Linux磁盘管理与文件系统

Linux磁盘管理与文件系统磁盘结构1.硬盘的物理结构2.硬盘的数据结构3.硬盘的接口fdisk命令mkfs命令mkswap 命令挂载、卸载文件系统 前言:管理磁盘是管理员的重要工作内容之一,此次将从磁盘的分区和格式化操作等方面,学习在linux系统中的磁盘和管理技术。除此之外,文件系统也…
暂无图片
编程学习 ·

13年蓝桥杯javaB组

13年蓝桥杯javaB组1.末世纪的星期天2.马虎的算式3.振兴中华4.黄金分数割5.有理数类6.三部排序7.错误票据 1.末世纪的星期天 曾有邪教称1999年12月31日是世界末日。当然该谣言已经不攻自破。 还有人称今后的某个世纪末的12月31日,如果是星期一则会是世界末日 有趣的是,任何一个…
暂无图片
编程学习 ·

05 | 消息积压了该如何处理?

1.应用场景https://blog.csdn.net/william_n/article/details/1040254082.学习/操作2.1 阅读文档这节课我们来聊一聊关于消息积压的问题。据我了解,在使用消息队列遇到的问题中,消息积压这个问题,应该是最常遇到的问题了,并且,这个问题还不太好解决。我们都知道,消息积压…
暂无图片
编程学习 ·

2. judgeSquareSum

忘记是自然选择,重要的是抽取学习方法双指针 --判断某一非负整数是否是两数平方和(easy) leecode输入:5 输出:true 5=1^2 + 2^2 思路:等于从一个有序数组找两个数平方和为target,注意的是最大值肯定小于Math.sqrt(target)public boolean judgeSquareSum(int c) {if (c < 0)…
暂无图片
编程学习 ·

萝卜小姐——知乎上看到的好用的IOT平台

作者:码云 Gitee 链接:https://www.zhihu.com/question/266251753/answer/827948303 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。码云Gitee 上有几个不错的物联网平台项目推荐给你,希望对你有帮助:)推荐项目1、开源的、分布式的物联…
暂无图片
编程学习 ·

WWDC20 苹果发布会

iphone上的ios14亮点不多 主要是桌面小组件 分类app显示 画中画 还有小程序 来电小窗提示和siri ui更新与更加智能 还有汽车智能钥匙 不用带钥匙只需要nfc就可以打开车门与开车 首款支持的汽车是 宝马5系ipad上的ipadOS14 拥有ios14的的全部更新 更加方便的ui以及全局搜索 也…
暂无图片
编程学习 ·

企业OA系统迁移

企业OA系统迁移 6.1 问题 本例要求通过LAMP网站平台的离线迁移过程,进一步熟悉网站和数据库的备份、恢复相关操作,完成下列任务: 1)备份 tts.123.cn 上的OA系统网站和数据库资料 2)准备一台新虚拟机(tts.123.cn–>192.168.10.8) 安装并启动LAMP网站平台 注册本地域名…
暂无图片
编程学习 ·

C语言指针笔记

C语言指针 一.地址与指针变量 程序在执行过程中需要有内存来存储需要用到的数据和程序代码,它们都占据一些内存单元,地址是这些内存单元的编号,同时包括它所指向的数据的类型信息。因此,可以把地址形象化地称为"指针"。 但不要把地址和指针混为一个概念,地址是数…
暂无图片
编程学习 ·

LeetCode 535. TinyURL 的加密与解密

目录结构1.题目2.题解1.题目TinyURL是一种URL简化服务, 比如:当你输入一个URL https://leetcode.com/problems/design-tinyurl 时,它将返回一个简化的URL http://tinyurl.com/4e9iAk.要求:设计一个 TinyURL 的加密 encode 和解密 decode 的方法。你的加密和解密算法如何设计…
暂无图片
编程学习 ·

01初识HTML

网站建站的流程 整个网站的开发流程 1.访问网站,是通过域名去访问,也就是网址,需要注册域名 2.网址不好记忆,不会直接输入网址,通过网址去访问服务器,租用空间 3.网站建设(确定网站主题,搜集资料,规划网站,制作页面) 4.网站推广 5.网站维护web标准HTML是用于描述页面…
暂无图片
编程学习 ·

PHP用户连续签到赠送额外积分

目录一、需求1、为什么要赠送积分2、怎么获取积分3、积分如何使用1)、兑换2)、抵扣3)、等等二、规则1、用户注册2、成功邀请新用户3、用户签到4、联想三、数据表1、用户表 user2、用户签到表 user_sign3、积分(获取)日志表 integral_log四、代码1、用户签到方法2、公共类 …
暂无图片
编程学习 ·

网络安全技术及应用第3版 主编贾铁军等——教材习题 期末重点 复习题 知识提炼(第4章 黑客攻防与检测防御)

参考教材:网络安全技术及应用 第3版 主编贾铁军等 第4章 黑客攻防与检测防御填空题简答题论述题 填空题 (1)端口扫描的 防范也称为 系统“加固”,主要有 防止IP地址的扫描 和(关闭 闲置及有潜在危险 端口)。 (2)(分布式拒绝服务攻击DDoS)就是利用更多的傀儡机对目标发…
暂无图片
编程学习 ·

使用hibernate框架完成CRUD操作

1.ORM思想: 简单来说就是对数据库中的表的字段和Java实体类中属性的映射O: Object , 表示Java应用中的实体类R: Relational关系型数据表M:映射例如在数据库中有一张表t_ser , t_user表中有三个字段 id,name,age , Java对象中有一个实体类与之映射User,User类中有三个属性id,nam…
暂无图片
编程学习 ·

什么是python?python有什么用途?

新手哪门编程语言最合适?绝对是python。python是目前主流的编程语言,也是当下发展最为迅速的编程语言,python可以做很多事情,无论是入门新手还是专业级选手都可以使用python。python是什么?有什么用途?python是一门非常具有条理、强大的面向对象的程序设计语言,类似于Pe…