leaflet引入天地图底图

最新推荐文章于 2024-07-24 10:40:52 发布

兴芳

最新推荐文章于 2024-07-24 10:40:52 发布

阅读量892

点赞数 1

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/youxingfang/article/details/131853498

版权

1.安装leaflet.chinatmsproviders插件：

npm i leaflet.chinatmsproviders

提示：使用天地图底图，需要在天地图服务网站获取服务许可key值

2、页面引入：

import "leaflet.chinatmsproviders";

提示：页面内容

this.map = L.map("map").setView([37.8, -96], 4); 
const tileOptions = {
        minZoom: 1,
        maxZoom: 19,
        key:'你的key'
      }
L.tileLayer.chinaProvider('TianDiTu.Normal.Map',tileOptions).addTo(this.map);
L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion',tileOptions).addTo(this.map);