腾讯地图绘制围栏

已于 2024-06-12 15:57:57 修改
阅读量481 收藏
点赞数 1
文章标签： jquery bootstrap 前端
于 2023-07-06 11:14:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_51713295/article/details/131571697
版权 
// 初始化地图
            map = new TMap.Map('container', {
                zoom: 12, // 设置地图缩放级别
                center: new TMap.LatLng(nowLat, nowLng), // 设置地图中心点坐标  //当前定位
            });
            // 初始化几何图形及编辑器
            var polygon = new TMap.MultiPolygon({
                map: map,
            });
            var circle = new TMap.MultiCircle({
                map: map,
            });
            var rectangle = new TMap.MultiRectangle({
                map: map,
            });
            editor = new TMap.tools.GeometryEditor({
                // TMap.tools.GeometryEditor 文档地址：https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocEditor
                map: map, // 编辑器绑定的地图对象
                overlayList: [
                    // 可编辑图层 文档地址：https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocEditor#4
                    {
                        overlay: polygon,
                        id: 'polygon',
                    },
                    {
                        overlay: circle,
                        id: 'circle',
                    },
                    {
                        overlay: rectangle,
                        id: 'rectangle',
                    },
                ],
                // EDITOR_ACTION.INTERACT  查看和修改 的工作模式
                actionMode: TMap.tools.constants.EDITOR_ACTION.DRAW, // 编辑器的工作模式绘制
                activeOverlayId: 'polygon', // 激活图层
                snappable: false, // 关闭吸附
            });
            // 监听绘制结束事件，获取绘制几何图形
            editor.on('draw_complete', (geometry) => {
                savedGeometryType = editor.getActiveOverlay().id
                // 判断当前处于编辑状态的图层id是否是overlayList中id为rectangle（矩形）图层
                if (editor.getActiveOverlay().id === 'rectangle') {
                    // 获取矩形顶点坐标  保存绘制的几何图形
                    var id = geometry.id;
                    var geo = rectangle.geometries.filter(function (item) {
                        return item.id === id;
                    });
                } else if (editor.getActiveOverlay().id === 'circle') {
                    var id = geometry.id;
                    var geo = circle.geometries.filter(function (item) {
                        return item.id === id;
                    });
                } else {
                    var id = geometry.id;
                    var geo = polygon.geometries.filter(function (item) {
                        return item.id === id;
                    });
                }
                editor.destroy()  //销毁编辑器
            });

初始化地图，进行绘制，只能绘制一个几何图

 var lat;
            var lng;
            var simplePath = [];
            if (savedGeometryType == 'polygon') {
                lat = savedGeometry.paths[0].lat
                lng = savedGeometry.paths[0].lng
                for (i = 0; i < savedGeometry.paths.length; i++) {
                    let a = savedGeometry.paths[i].lat
                    let b = savedGeometry.paths[i].lng
                    simplePath.push(new TMap.LatLng(a, b))
                }
                console.log(simplePath);
            } else if (savedGeometryType == 'circle') {
                lat = savedGeometry.center.lat
                lng = savedGeometry.center.lng
                for (i = 0; i < savedGeometry.paths.length; i++) {
                    let a = savedGeometry.paths[i].lat
                    let b = savedGeometry.paths[i].lng
                    simplePath.push(new TMap.LatLng(a, b))
                }
            } else {
                lat = savedGeometry.center.lat
                lng = savedGeometry.center.lng
                for (i = 0; i < savedGeometry.paths.length; i++) {
                    let a = savedGeometry.paths[i].lat
                    let b = savedGeometry.paths[i].lng
                    simplePath.push(new TMap.LatLng(a, b))
                }
            }
            map = new TMap.Map('container', {
                zoom: 12, // 设置地图缩放级别
                center: new TMap.LatLng(lat, lng), // 设置地图中心点坐标  //当前定位
            });
            document.querySelector('#container a').style.display = "none"
            // 初始化几何图形及编辑器
            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: savedGeometryType,
                        selectedStyleId: 'highlight'
                    }
                ],
                actionMode: TMap.tools.constants.EDITOR_ACTION.INTERACT, // 编辑器的工作模式 查看和修改 的工作模式 
                activeOverlayId: savedGeometryType, // 激活图层
                selectable: true, // 开启点选功能
                snappable: false // 关闭吸附
            });
            // 监听修改结束事件，获取修改几何图形
            editor.on('adjust_complete', (geometry) => {
                savedGeometryType = editor.getActiveOverlay().id
                // 判断当前处于编辑状态的图层id是否是overlayList中id为rectangle（矩形）图层
                if (editor.getActiveOverlay().id === 'rectangle') {
                    // 获取矩形顶点坐标  保存绘制的几何图形
                    var id = geometry.id;
                    var geo = rectangle.geometries.filter(function (item) {
                        return item.id === id;
                    });
                } else if (editor.getActiveOverlay().id === 'circle') {
                    var id = geometry.id;
                    var geo = circle.geometries.filter(function (item) {
                        return item.id === id;
                    });
                    savedGeometry = geo[0];
                } else {
                    var id = geometry.id;
                    var geo = polygon.geometries.filter(function (item) {
                        return item.id === id;
                    });
                    savedGeometry = geo[0];
                }
            });

渲染保存的几何图，用来修改已经绘制成功的几何图

// 渲染静态地图
        function staticMap() {
            var lat;
            var lng;
            var simplePath = [];
            if (savedGeometryType == 'polygon') {
                lat = savedGeometry.paths[0].lat
                lng = savedGeometry.paths[0].lng
                for (i = 0; i < savedGeometry.paths.length; i++) {
                    let a = savedGeometry.paths[i].lat
                    let b = savedGeometry.paths[i].lng
                    simplePath.push(new TMap.LatLng(a, b))
                }
                console.log(simplePath);
            } else if (savedGeometryType == 'circle') {
                lat = savedGeometry.center.lat
                lng = savedGeometry.center.lng
                for (i = 0; i < savedGeometry.paths.length; i++) {
                    let a = savedGeometry.paths[i].lat
                    let b = savedGeometry.paths[i].lng
                    simplePath.push(new TMap.LatLng(a, b))
                }
            } else {
                lat = savedGeometry.center.lat
                lng = savedGeometry.center.lng
                for (i = 0; i < savedGeometry.paths.length; i++) {
                    let a = savedGeometry.paths[i].lat
                    let b = savedGeometry.paths[i].lng
                    simplePath.push(new TMap.LatLng(a, b))
                }
            }
            if (tkxg == 2) {
                map = new TMap.Map('container', {
                    zoom: 12, // 设置地图缩放级别
                    center: new TMap.LatLng(lat, lng), // 设置地图中心点坐标  //当前定位
                });
                document.querySelector('#container a').style.display = "none"
            } else {
                map = new TMap.Map('staticCon', {
                    zoom: 10, // 设置地图缩放级别
                    center: new TMap.LatLng(lat, lng), // 设置地图中心点坐标  //当前定位
                });
                document.querySelector('#staticCon a').style.display = "none"
            }
            // 初始化几何图形及编辑器
            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: savedGeometryType,
                        selectedStyleId: 'highlight'
                    }
                ],
                activeOverlayId: savedGeometryType, // 激活图层
            });
            editor.destroy()
        }
        // 获取当前的不精确定位
        function nowDingWei() {
            geolocation.getIpLocation(showPosition)
        }
        function showPosition(position) {
            nowLat = position.lat
            nowLng = position.lng
        }

静态渲染以及获取当前定位

准备工作：

 <!-- 绘制围栏 -->

    <script charset="utf-8"

        src="https://map.qq.com/api/gljs?libraries=tools&v=1.exp&key=NRTBZ-4OFKZ-5FDXV-7XS7F-KW2P2-UABHQ"></script>

        <!-- 定位 -->

    <script type="text/javascript"

        src="https://apis.map.qq.com/tools/geolocation/min?key=NRTBZ-4OFKZ-5FDXV-7XS7F-KW2P2-UABHQ&referer=共享单车"></script>

腾讯地图绘制电子围栏
qq_45527370的博客
05-27 1294
腾讯地图在弹框组件中的渲染，进行绘制电子围栏及标记点。以及其编辑和删除
在vue中使用腾讯地图绘制围栏功能
soberbloke的博客
08-13 6108
首先，先看效果图 里面包含了自定义多边形绘制围栏。圆形绘制以及矩形等方式，以及清除围栏经纬度的方法和获取围栏经纬度的方法。 首先在项目的index.html中引入腾讯地图 <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=你的密钥&libraries=drawing"></script> 在你的密钥这个位置。去腾讯地图申请，然后替换了就可以了。 最后奉上具体代码： <temp
地图选点画围栏
Bruce_Json的博客
11-03 1138
thymeleaf中要把 & 替换成 &amp; 链接中的key要自己申请 <!DOCTYPE html> <html style="height: 100%;"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width,initial-scale=1.0"/> <link rel="i..
腾讯位置服务点标记
最新发布
可可的博客
03-21 168
腾讯地图marker标点
基于腾讯地图的微信小程序电子围栏.zip
12-03
uniapp写的基于腾讯地图的微信小程序的电子围栏(服务范围)，里面的key换成自己再腾讯地图api官网申请的，如果哪里有写的不好的地方，请多多谅解！
vue中使用腾讯地图.围栏使用
weixin_63443072的博客
11-06 1183
废话少说，直接开始。
腾讯地图api开发的微信小程序电子围栏
09-13
基于腾讯地图api开发的微信小程序的电子围栏(服务范围)
微信小程序+腾讯地图开发实现路径规划绘制
12-09
我们想用微信小程序实现在map>组件上自定义显示导航路径，但是目前为止官方并未给出相应的方法实现，map>组件确实有绘制点对点连线的属性polyline,但是呢我们没有一系列的坐标集合也是画不出一条路径的， ...
微信小程序地图功能开发：绘制多边形和标记点
10-16
本资源是一个专为微信小程序设计的地图组件，它允许开发者在地图上绘制多边形区域和添加标记点。这个组件非常适合需要展示特定区域或位置的应用，如停车场管理、城市服务区域展示等。 核心功能 1.多边形绘制：组件...
vue电子地图围栏
03-01
vue电子地图围栏，只包含前端代码，后台需要根据自己需要连接起来
uniapp使用腾讯地图实现围栏效果
weixin_70243424的博客
06-29 447
【代码】uniapp使用腾讯地图实现围栏效果。
腾讯地图Demo
12-30
腾讯地图，里面包含了各种地图的实现，从最基础的定位到，地理围栏都有。值得学习
腾讯地图DEMO
06-30
腾讯地图Demo sdk状态 个人位置 地理围栏 定位level
vue 腾讯地图绘画电子围栏 增删改
Chenqy1027的博客
05-10 1765
下面是index.heml里面需要先引入腾讯地图api。在vue里面的使用方法。
腾讯地图基于 WebGL实现自定义栅格图层踩坑实录
@宝儿姐
07-08 1131
以下内容转载自totoro的文章《WebGL-Y轴翻转踩坑实录》 作者：totoro 链接：https://blog.totoroxiao.com/webgl-flipY/ 来源：https://blog.totoroxiao.com/ 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 前言 自定义栅格图层 是指用户可以通过特定软件，将自定义的图像按照上文所述的方式切割为瓦片，并生成图片，然后按照瓦片坐标拼接形成地图的图层。常用于手绘地图、卫星图、地形图等。 案例背景 基于 WebG.
腾讯地图绘制多边形
化名三爷
03-05 3893
可以随着地图级别放大而详情，单击显示详情，再次单击取消显示详情 这是那效果图： 直接上手代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l..
腾讯位置服务实现点击建筑显示围栏及建筑信息效果
小小码农biubiubiu
08-21 905
前言 AOI（area of interest），也叫兴趣面，与POI类似。POI用于标记一个点，而AOI用于标记一个区域。在腾讯地图APP中点击建筑物，会使用轮廓线将该建筑物包围，同时显示建筑物的相关信息，如：名称、地址、距离、电话等等。如下图所示： 使用场景 点击地图中POI名称，显示该建筑的AOILayer，并且通过腾讯地图SDK的检索功能获取该建筑物的相关信息。 准备 1、腾讯地图3D SDK 2、AOILayer 3、地点检索 核心代码 1、监听点击POI的回调，获取POI信息： - (vo
前端-腾讯地图个性化图层功能实现
weixin_55717063的博客
05-30 1464
点击图层创建到创建图层，可以理解就是ps里的图层，相当于你把一张图片盖在了地图上，只不过你这张图片和地图的路线河流等都是高度契合的，这个其实比较考验ui的功底，创建好图层后需要审核，审核需要一俩个工作日可能，审核通过后需要和你的应用进行绑定，src就是网址路径，大家可以理解成小程序页面嵌套了一个H5就好了，也就是你提前写好web端的个性化地图，然后通过web-view去展示到小程序上，，写代码需要这个id来确定你使用哪个图层，目前是只支持web端使用个性化图层，小程序端是要钱的，亲测。
H5手绘地图（自定义栅格图层）踩坑
weixin_39639298的博客
05-14 4014
手绘地图简介 手绘地图顾名思义就是手工绘制的地图，比普通的地图更有观赏性和生动性，通过把特定的地点绘制出来，兼具实用和纪念性，同时更加具有可看性。一般在旅游景点有很多这种纸质版手绘地图。比如这种： 前期开发准备 1.手绘地图绘制 我们找的是一个专门做手绘地图的团队，因为这个不是纸质版地图，是要在页面上显示的，并且在地图上面要有对应的点位标记，所以让他们以腾讯地图为基础在上面进行一比一绘制，点位，道路，河流尽量要对准，不然在后期开发的过程中，点位的偏移会很大。地图开发完成之后，以一张png图片给我们，我们通过
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值