2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > vue高德地图开发 使用天地图卫星地图瓦片 解决不生效问题

vue高德地图开发 使用天地图卫星地图瓦片 解决不生效问题

时间:2020-09-01 19:16:53

相关推荐

vue高德地图开发 使用天地图卫星地图瓦片 解决不生效问题

高德地图开发文档多,api更多,但是卫星地图不全;天地图是政企地图,恰好相反。项目中结合二者来开发,踩了很多坑,在此记录。

项目是vue2框架,过去有一段时间,只记录下关键代码,有三种使用方式,建议先使用第一种

//地图初始化let that = thisthis.map = new AMap.Map('all-map', {zoom: 7,labelzIndex: 130,showBuildingBlock: false,animateEnable: false,mapStyle: 'amap://styles/darkblue',center:[112.472559, 42.340925]});//使用天地图瓦片//方式一,params方式(这种方式一定要注意参数(键)的大小写,天地图官网没有说明,不然不生效,问题很难找):var wms =new AMap.TileLayer.WMTS({url: 'http://t0./img_w/wmts',blend: false,tileSize: 256,zooms:[1,18],params: {// 参数必须按照天地图官网规范来Service:'WMTS',REQUEST:'GetTile',Version:'1.0.0',Layer:'img',STYLE:'default',TileMatrixSet:'w',Format:'tiles',tk:'你的秘钥'},});//方式二:var wms = new AMap.TileLayer({zIndex:2,blend: false,tileSize: 256,zooms:[1,18],getTileUrl:`https://t{1,2,3,4}./DataServer?T=img_w&x=[x]&y=[y]&l=[z]&tk=你的秘钥'`});//方式三,其实是方法二的扩展,不同的坐标系需要换算时候,可以用这种方式:function transformCoord([x,y]){//gcoord插件一些列转换……return [newX,newY]}var wms = new AMap.TileLayer({zIndex:2,blend: false,tileSize: 256,zooms:[1,18],getTileUrl: function(x , y, z){let [nx,ny]=that.transformCoord([x,y]);//通过gcoord插件转换坐标,转换函数return `https://t0./DataServer?T=img_w&x=${nx}&y=${ny}&l=${z}&tk=你的秘钥`;}});//最后一步添加进地图wms.setMap(this.map);

实测使用瓦片方式,地图的marker某些点击事件会失效,还没找到太好解决办法,欢迎交流

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。