Vue项目中引入天地图

在Vue的静态资源目录下的index.html中引入天地图的底图天地图API；
在引入了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); // 重新创建地图对象// 这里获取的经度纬度是实际经纬度四舍五入后的获取的});}}}

Vue项目中引入天地图相关推荐

vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...
如何在Vue项目中引入ArcGIS JavaScript API 创建三维可视化地图（含vue项目创建教程）
新手上路之在Vue项目中引入ArcGIS API 视频教程 B站搜索 X北辰北,感谢up主无私的教学~ B站地址:https://www.bilibili.com/video/BV18E411K7B ...
VUE 项目中引入外部js文件（CND引入）
以VUE项目中引入echarts文件为例: 第一步在VUE项目中找到index.html文件引入 :<script src="https://cdnjs.cloudflare.com ...
如何在vue项目中引入html页面
在vue项目中引入html页面的两种方法第一种:/static/page.html 第二种:通过iframe嵌入第一种:/static/page.html 在static或public文件夹下,新 ...
vue项目中引入bootstrap的方法
vue项目中引入bootstrap?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 相关教程推荐:<bootstrap教程> 在 vue 项目 ...
【EasyExcel】在SpringBoot+VUE项目中引入EasyExcel实现对数据的导出（封装工具类）
在SpringBoot+VUE项目中引入EasyExcel实现导入导出一.引入EasyExcel 通过maven引入,坐标如下: <dependency><groupId>c ...
Vue项目中应用天地图
引入天地图 js 首先到天地图官网获取服务许可key:国家地理信息公共服务平台天地图全局引入地图 js 库在Vue项目的index.html 文件中,全局引入天地图js库 <body> ...
vue项目中引入字体包
问题: 项目开发过程中,因UI的显示要求,需要引入一些字体,那如何引入外部字体呢?很简单,只需要以下3步一下载对应的字体包文件,放置到我们的项目中比如我需要PingFangSC的系列字体,我 ...
vue项目中引入monaco editor
monaco-editor概述 monaco-editor 是微软开源的一款web代码编辑器,vscode就是集成monaco-editor来实现的. 官方示例官方文档使用安装 npm安装 np ...

Vue项目中引入天地图

Vue项目中引入天地图相关推荐

最新文章

热门文章