前言

leaflet-webpack 入门开发系列环境知识点了解：

node 安装包下载
webpack 打包管理工具需要依赖 node 环境，所以 node 安装包必须安装，上面链接是官网下载地址

webpack 配置介绍文档
详细的 webpack 文档配置介绍，适合新手查看，我也是边看边学

vscode 安装包下载，我这边用 vscode工具编译开发前端项目，个人觉的这款工具还不错

leaflet api文档介绍，详细介绍 leaflet 每个类的函数以及属性等等

leaflet 在线例子

leaflet 插件，leaflet 的插件库，非常有用

内容概览

leaflet 加载不同在线地图切换显示
源代码 demo 下载

本篇 demo 加载在线地图分别是 OSM 地图、ArcGIS 地图、天地图、高德地图、谷歌地图以及百度地图，由于加载百度地图比较特殊，它采用的投影坐标系方案定义跟其他在线地图不一致，需要自定义 L.Proj.CRS，所以，为了简单化测试，加载百度地图是在另一个地图页面来的。
效果图如下：
百度地图效果：

其他在线地图效果：

实现思路

核心用到 leaflet 的 TileLayer 图层类，专门加载瓦片数据图层，还有就是 leaflet 底图切换控件Control.Layers，TileLayer 类具体使用，可以参照 api说明：
TileLayer
在线地图配置信息

const config = {
/*----------------------------------地图配置部分-------------------------------------*/
mapInitParams: {
center: [23.1441, 113.3693],
zoom: 13
},
baseMaps: [
{
label: "OSM街道图",
Url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
},
{
label: "ArcGIS影像图",
Url:
"https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
},
{
label: "ArcGIS街道图",
Url:
"http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}"
},
{
label: "天地图街道图",
Url:
"http://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=7786923a385369346d56b966bb6ad62f"
},
{
label: "天地图影像图",
Url:
"http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=7786923a385369346d56b966bb6ad62f"
},
{
label: "谷歌街道图",
Url:
"http://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}"
},
{
label: "谷歌影像图",
Url:
"http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}"
},
{
label: "高德街道图",
Url:
"http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}"
},
{
label: "高德影像图",
Url:
"http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}"
},
{
label: "百度街道图",
Url:
"http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles={styles}&scaler=1&p=1"
},
{
label: "百度影像图",
Url:
"http://shangetu{s}.map.bdimg.com/it/u=x={x};y={y};z={z};v=009;type=sate&fm=46"
}
]
};export default config;

百度地图加载完整代码：

import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import 'leaflet.chinaProvider';
import config from "./config";
/* This code is needed to properly load the images in the Leaflet CSS */
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
iconUrl: require('leaflet/dist/images/marker-icon.png'),
shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
});//请引入 proj4.js 和 proj4leaflet.js
L.CRS.Baidu = new L.Proj.CRS(
'EPSG:900913',
`+proj=merc
+a=6378206
+b=6356584.314245179
+lat_ts=0.0
+lon_0=0.0
+x_0=0
+y_0=0
+k=1.0
+units=m
+nadgrids=@null
+wktext
+no_defs`, {
resolutions: function () {
var res = [],
level = 19;
res[0] = Math.pow(2, 18);
for (var i = 1; i < level; i++) {
res[i] = Math.pow(2, (18 - i))
}
return res;
}(),
origin: [0, 0],
bounds: L.bounds([20037508.342789244, 0], [0, 20037508.342789244])
});const map = L.map("map", {
crs: L.CRS.Baidu, // if use baidu L.CRS.EPSG3857
attributionControl: false
}).setView(config.mapInitParams.center, config.mapInitParams.zoom);
……

完整demo源码见小专栏文章尾部：GIS之家leaflet小专栏

文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波

leaflet-webpack 入门开发系列二加载不同在线地图切换显示（附源码下载）相关推荐

cesium 3dtiles 加载本地数据_cesium结合geoserver实现地图空间查询(附源码下载)
前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...
VC++几种加载图片方法的讨论（附源码）
目录 1.图片加载的相关说明 2.使用LoadBitmap来加载位图图片 3.使用CImage加载图片
安卓mysql导出excel_Android开发实现的导出数据库到Excel表格功能【附源码下载】...
本文实例讲述了Android开发实现的导出数据库到Excel表格功能.分享给大家供大家参考,具体如下: 之前一直在电脑上用Excel表格记录家庭帐单,不久前重装系统不小心干掉了,伤心了好久,那可是我记 ...
Android开发之使用TabLayout快速实现选项卡切换功能(附源码下载)
看下效果图: 先看下布局: TabLayout的简单使用: 当选项卡过少时候设置填充全屏app:tabGravity="fill"设置下面切换选项卡的小滑片颜色app:tabInd ...
android 原生开发 3d地图下载_arcgis api 3.x for js 入门开发系列二不同地图服务展示（附源码下载）...
前言关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
vscode中安装webpack_leaflet-webpack 入门开发系列一初探篇（附源码下载）
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载 webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址w ...
arcgis开发多版本之间如何兼容_arcgis api 4.x for js 结合 react 入门开发系列初探篇（附源码下载）...
你还在使用 JQuery 或者 Dojo 框架开发 arcgis api 4.x for js 吗?想试试模块化开发吗?随着前端技术的发展,arcgis api 4.x for js 也有了结合 re ...
Vue+OpenLayers入门（加载高德在线地图）
开发环境的搭建在上一篇教程中已有描述,如果不知道怎么搭建,请移步Vue+OpenLayers入门(加载OSM在线地图) 此代码为加载高德在线地图以及清除地图上的默认控件: <template&g ...
cesium加载百度地图_Cesium专栏-百度地图加载（附源码下载）
Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精度,渲染质量以 ...

leaflet-webpack 入门开发系列二加载不同在线地图切换显示（附源码下载）

前言

内容概览

实现思路

leaflet-webpack 入门开发系列二加载不同在线地图切换显示（附源码下载）相关推荐

最新文章

热门文章