vue中天地图限制缩放层级以及拖拽区域

最新推荐文章于 2024-08-15 10:43:25 发布

毛三仙

最新推荐文章于 2024-08-15 10:43:25 发布

阅读量1.6k

点赞数 1

分类专栏：地图大屏文章标签： vue.js 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/m0_74149462/article/details/129645544

版权

地图同时被 2 个专栏收录

26 篇文章 2 订阅

订阅专栏

大屏

21 篇文章 0 订阅

订阅专栏

文章讲述了如何使用天地图官网API来设定地图的缩放层级限制，确保在17-18级之间，并配置拖拽区域限制，当地图边缘达到特定经纬度范围时会自动反弹回原位。示例代码展示了创建自定义图层及设定最大边界的方法。

摘要由CSDN通过智能技术生成

限制缩放层级是指当达到限制时不能缩放
限制拖拽区域是指当拖拽地图时，达到地图边界就自动弹回原位

天地图官网API ---> http://lbs.tianditu.gov.cn/api/js4.0/class.html

// 设置缩放层级  
var imageURL = "http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=你的key";
                var imageURL2 = "http://t0.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=你的key";
                var imageURL3 = "http://t0.tianditu.gov.cn/ibo_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ibo&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=你的key";
                //创建自定义图层对象
                this.lay = new T.TileLayer(imageURL, {minZoom: 17, maxZoom: 18});
                this.lay2 = new T.TileLayer(imageURL2, {minZoom: 17, maxZoom: 18});
                this.lay3 = new T.TileLayer(imageURL3, {minZoom: 17, maxZoom: 18});
                var config = {layers: [this.lay, this.lay2, this.lay3]};

 // 设置拖拽范围
map.setMaxBounds(new T.LngLatBounds(new T.LngLat(121.872371, 30.900936), new T.LngLat(121.902217, 30.879642)));