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

前言

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

内容概览

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'),
    });
top Created with Sketch.