leaflet 加载地图-引入各种地图

leaflet 加载地图-引入各种地图

一、智图地图

1、Geoq.Normal.Gray (或 Geoq.Normal.Map)灰色

 let gaoDeLayer = L.tileLayer.chinaProvider('Geoq.Normal.Gray');
 gaoDeLayer.addTo(this.map);

在这里插入图片描述
2、Geoq.Normal.Warm 黄色

 let gaoDeLayer = L.tileLayer.chinaProvider('Geoq.Normal.Warm');
 gaoDeLayer.addTo(this.map);

在这里插入图片描述
3、Geoq.Normal.PurplishBlue 藏蓝色

 let gaoDeLayer = L.tileLayer.chinaProvider('Geoq.Normal.PurplishBlue');
 gaoDeLayer.addTo(this.map);

在这里插入图片描述

二、天地图

1、TianDiTu.Satellite.Annotion 卫星注记地图

 let gaoDeLayer = L.tileLayer.chinaProvider('TianDiTu.Satellite.Annotion');
 gaoDeLayer.addTo(this.map);

在这里插入图片描述
2、TianDiTu.Satellite.Map 卫星地图

 let gaoDeLayer = L.tileLayer.chinaProvider('TianDiTu.Satellite.Map');
 gaoDeLayer.addTo(this.map);

在这里插入图片描述
3、标准地图
TianDiTu.Normal.Map 标准地图;
TianDiTu.Normal.Annotion 标准地图注记图层;
在这里插入图片描述
4、影像地图
TianDiTu.Gov.Map 影像地图;
TianDiTu.Gov.Annotion 影像地图注记图层;
在这里插入图片描述

三、高德

1、GaoDe.Normal.Map

 let gaoDeLayer = L.tileLayer.chinaProvider('GaoDe.Normal.Map');
 gaoDeLayer.addTo(this.map);

在这里插入图片描述
2、GaoDe.Satellite.Map 卫星地图

 let gaoDeLayer = L.tileLayer.chinaProvider('GaoDe.Satellite.Map');
 gaoDeLayer.addTo(this.map);

在这里插入图片描述
3、GaoDe.Satellite.Annotion 标注地图

 let gaoDeLayer = L.tileLayer.chinaProvider('GaoDe.Satellite.Annotion');
 gaoDeLayer.addTo(this.map);

在这里插入图片描述

四、百度(待整理)

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Leaflet 是一款非常优秀的 JavaScript 开源地图库,可以方便地创建基于 Web 的交互式地图应用程序。在 Leaflet 中,我们可以利用各种扩展扩展库实现相关的任务,其中加载和使用天地图是一个非常常见的任务。 在这里,我们将详细说明如何在 Leaflet加载地图。首先,我们需要获取天地图的开发者密钥并引入相关库。具体来说,我们需要引入 `leaflet.js`、`proj4js`、`leaflet.ChineseTmsProviders.js`和 `leaflet-tilelayer-wmts.js`。需要注意的是,天地图使用 WGS84 坐标系统和 3857 坐标系统,因此我们必须使用 proj4js 将这两个坐标系统进行转换。 接着,我们可以创建一个 Leaflet 地图对象并添加天地图的图层,代码示例如下: ```javascript // 创建 Leaflet 地图 var map = L.map('map', { crs: L.CRS.EPSG3857, // 设置坐标系 center: [30, 120], // 设置中心点坐标 zoom: 6 // 设置缩放级别 }); // 添加天地图的图层 var baseLayer = L.tileLayer.chinaProvider('TianDiTu.Normal.Map', { maxZoom: 18, // 设置最大缩放级别 minZoom: 1 // 设置最小缩放级别 }); map.addLayer(baseLayer); ``` 在上面的示例中,我们首先创建了一个 Leaflet 地图对象,并设置了坐标系、中心点坐标和缩放级别。然后,我们使用 `tileLayer.chinaProvider` 方法添加了天地图的图层,其中 `'TianDiTu.Normal.Map'` 表示要添加的图层类型,这里我们添加了天地图的普通地图。除了 `'TianDiTu.Normal.Map'`,我们还可以添加其他类型的图层,比如卫星地图、地形图等。 最后,我们需要使用 CSS 定义一个容器来显示地图。完整的样例代码如下所示: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Leaflet 加载地图</title> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/leaflet/1.6.0/leaflet.css"> <style> #map { width: 100%; height: 800px; } </style> </head> <body> <div id="map"></div> <script src="https://cdn.bootcdn.net/ajax/libs/leaflet/1.6.0/leaflet.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/proj4js/2.6.1/proj4.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/leaflet.ChineseTmsProviders/1.22.0/leaflet.ChineseTmsProviders.js"></script> <script src="./leaflet-tilelayer-wmts.js"></script> <script> // 创建 Leaflet 地图 var map = L.map('map', { crs: L.CRS.EPSG3857, // 设置坐标系 center: [30, 120], // 设置中心点坐标 zoom: 6 // 设置缩放级别 }); // 添加天地图的图层 var baseLayer = L.tileLayer.chinaProvider('TianDiTu.Normal.Map', { maxZoom: 18, // 设置最大缩放级别 minZoom: 1 // 设置最小缩放级别 }); map.addLayer(baseLayer); </script> </body> </html> ``` 总之,使用 Leaflet 加载地图非常简单,只需要引入相关库、创建地图对象并添加天地图的图层。在这个过程中,需要注意的是天地图使用 WGS84 坐标系统和 3857 坐标系统,我们需要使用 proj4js 转换坐标系。同时,我们还可以根据需求添加其他类型的图层,比如卫星地图、地形图等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值