Vue天地图之图层类型切换

Vue项目引入天地图

在vue的静态资源目录下的index.html中引入天地图的底图 http://lbs.tianditu.gov.cn/api/js4.0/guide.html
在引入了vue项目以后及将需要用到的功能从window对象下赋值给当前项目的Data

<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=你申请的key">
// 引入天地图底层图export default {data () {return :{}},mounted(){var T = window.T;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 lay = new T.TileLayer(imageURL, { minZoom: 1, maxZoom: 16 });var config = { layers: [lay] };this.map = new T.Map('mapDiv', config); // 地图实例this.map.centerAndZoom(new T.LngLat(this.lists[0].Longitude, this.lists[0].latitude), 3);// //允许鼠标双击放大地图this.map.enableScrollWheelZoom();//创建地图图层对象let mapTypeSelect = [{'title': '地图', //地图控件上所要显示的图层名称'icon': 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png', //地图控件上所要显示的图层图标（默认图标大小80x80）'layer': window.TMAP_NORMAL_MAP //地图类型对象，即MapType。},{'title': '卫星','icon': ' http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellite.png','layer': window.TMAP_SATELLITE_MAP}, {'title': '卫星混合','http': 'api.tianditu.gov.cn/v4.0/image/map/maptype/satellitepoi.png','layer': 'TMAP_HYBRID_MAP'}, {'title': '地形','icon': ' http://api.tianditu.gov.cn/v4.0/image/map/maptype/terrain.png','layer': window.TMAP_TERRAIN_MAP},{'title': '地形混合','icon': ' http://api.tianditu.gov.cn/v4.0/image/map/maptype/terrainpoi.png','layer': window.TMAP_TERRAIN_HYBRID_MAP}];var ctrl = new T.Control.MapType({ mapTypes: mapTypeSelect }); // 初始化地图类型选择控件this.map.addControl(ctrl); //添加地图选择控件this.map.setMapType(window.TMAP_HYBRID_MAP);      // 设置地图位地星混合图层this.GetMaps ()},methods: {GetMaps () {let T = window.T;//设置显示地图的中心点和级别this.map.clearOverLays();this.map.centerAndZoom(new T.LngLat(this.lists[0].Longitude, this.lists[0].latitude), 3);console.log(index);var icon = new T.Icon({iconUrl: 'http://api.tianditu.gov.cn/img/map/markerA.png',iconSize: new T.Point(33, 33),iconAnchor: new T.Point(10, 25)});var latlng = new T.LngLat(21,22,); // 设置坐标点传入经度纬度let marker = new T.Marker(latlng, { icon: icon });// 创建标注const that = this;marker.addEventListener('click', function (e) { // 监听点击事件let clientx = e.lnglat.lat; // 获取marker当前经纬度let clientY = e.lnglat.lng; that.map.centerAndZoom(new T.LngLat(clientY, clientx), 10); // 重新创建地图对象// 这里获取的经度纬度是实际经纬度四舍五入后的获取的});}}}

上面一段是我从自己项目中抠出来的，本来不想发出来的，但是现在百度上搜天地图的资源实在是少得可怜，很多天地图的error因为Vue框架的问题需要从window中获取，但是在百度上搜到的，几乎没有人会把这个发出来，从而导致开发效率大幅的降低。因于心不忍，故此次前来造福百姓

Vue天地图之图层类型切换相关推荐

2021-02-23 天地图图层类型总结
天地图图层类型 1. 矢量数据+地名中英文 vec: 矢量底图=Vector cva: 矢量注记图层(中文)=Chinese Vector Annotation eva: 矢量注记图层(英文)=Eng ...
2021-02-02 天地图图层类型
天地图图层类型 vec: 矢量底图 cva: 矢量注记图层 eva: 矢量注记图层-英文注记 img: 影像底图 cia: 影像注记图层 eia: 影像注记图层 -英文 ter: 地形底图 cta: ...
天地图添加自定义图层
天地图添加自定义图层这个其实很简单哈,官网给的资料挺详细的,自己去查一下然后直接粘贴过来用就可以了. 添加 WMS 图层 addWMS(layers, url) {var config = {ver ...
Vue 组件封装之 Tab 切换
Vue 组件封装之 tab 切换一.Tab 切换组件二.使用案例三.API 使用指南四.源代码五.总结一.Tab 切换组件组件说明: 实现 tab 切换. 效果展示: 实现 tab 切换 ...
openlayers6【十九】vue HeatmapLayer热力图层实现热力图效果详解
文章目录 1. 写在前面 2. Heatmap 类实现热力图 2.1 Heatmap 参数 2.2 实现热力图 3. 完整代码 4. 添加删除map图层的方法 5. 热力图自身的get,set方法 1 ...
php 标签页切换,vue.js实现标签页切换效果
第二个实例是关于标签页切换的,先看一下效果: 这也是一个很常见的交互效果,以往正常的javascript写法是给各个按钮绑定事件来切换不同的层,当然也可以用纯css写,给上面的三个切换的层分别添加一个 ...
本篇文章使用vue结合element-ui开发tab切换vue的不同组件，每一个tab切换的都是一个新的组件。
本篇文章使用vue结合element-ui开发tab切换vue的不同组件,每一个tab切换的都是一个新的组件. 1.vue如何使用element-ui 上一篇文章已经分享了如何在vue中使用eleme ...
vue实现1-4-9宫格切换
vue实现1-4-9宫格切换 <!DOCTYPE html> <html lang="en"><head><meta charset=&q ...
vue当前页面中英文语言切换
在开发页面时,比如就一个页面,需要切换语言的元素并不多时,我们就不必从外部引入各种插件,包,直接在项目内实现语言切换,以vue项目为例,下面为具体实现过程写入中英文数据在vue中,把要展示的中英文 ...

Vue天地图之图层类型切换

Vue项目引入天地图

Vue天地图之图层类型切换相关推荐

最新文章

热门文章