vue整合leaflet地图与百度地图坐标系实验

实验目的

通过查看leaflet官方文档和查找网上资料，实现在vue中使用leaflet地图并加入百度地图坐标系。

初始化vue项目

这么简单的事情，一般我都不告诉别人

在项目中添加leaflet依赖并引入

npm install leaflet
在main.js中：import L from 'leaflet';import 'leaflet/dist/leaflet.css';

初始化地图

代码

<template>
  <div class="home" id="leafletMap"></div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {};
  },

  methods: {
    initLeaflet() {
      var map = L.map("leafletMap").setView([51.505, -0.09], 13);

      L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
        attribution:
          '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      }).addTo(map);

      L.marker([51.5, -0.09])
        .addTo(map)
        .bindPopup("A pretty CSS3 popup.<br> Easily customizable.")
        .openPopup();
    }
  },
  mounted(){
    this.initLeaflet();
  }
};
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
}
</style>

效果图：

1591322050766.jpg

依照官方文档，我们可以看到，我们对leaflet的引入已经成功了。但是这是不够的，首先我们可以看到地图瓦片不符合我们的生产需求，然后就是地图的初始化也是一个简单的实例。但至少我们知道了需要去做些什么

引入百度地图离线瓦片

引入离线地图之前，我们先需要引入两个自定地图坐标系proj4leaflet+proj4转换插件
npm install proj4 --save
npm install proj4leaflet --save
在src目录下新建util文件夹并创建tileLayer.baidu.js，然后编写百度地图底图调用插件代码：

require('proj4')
require('proj4leaflet')

// 本地百度地图离线瓦片地图
const titleD = 'http://127.0.0.1:8886/{z}/{x}/{y}.png'

var urlPath = titleD;
//请引入 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 () {
        level = 19
        var res = [];
        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])
});

L.tileLayer.baidu = function (option) {
    option = option || {};

    var layer;
    var subdomains = '0123456789';
    switch (option.layer) {
        //单图层
        case "vec":
        default:
            layer = L.tileLayer(urlPath, {
                name:option.name,subdomains: subdomains, tms: true
            });

            break;
        case "img_d":
            layer = L.tileLayer('http://shangetu{s}.map.bdimg.com/it/u=x={x};y={y};z={z};v=009;type=sate&fm=46', {
                name: option.name, subdomains: subdomains, tms: true
            });
            break;
        case "img_z":
            layer = L.tileLayer('http://online{s}.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}&styles=' + (option.bigfont ? 'sh' : 'sl') + '&v=020', {
                name: option.name, subdomains: subdomains, tms: true
            });
            break;

        case "custom"://Custom 各种自定义样式
            //可选值：dark,midnight,grayscale,hardedge,light,redalert,googlelite,grassgreen,pink,darkgreen,bluish
            option.customid = option.customid || 'midnight';
            // layer = L.tileLayer('http://api{s}.map.bdimg.com/customimage/tile?&x={x}&y={y}&z={z}&scale=1&customid=' + option.customid, {
            //     name: option.name, subdomains: "012", tms: true
            // });
            layer = L.tileLayer(urlPath, {
                name:option.name,subdomains: subdomains, tms: true
            });

            break;

        case "time"://实时路况
            var time = new Date().getTime();
            layer = L.tileLayer('http://its.map.baidu.com:8002/traffic/TrafficTileService?x={x}&y={y}&level={z}&time=' + time + '&label=web2D&v=017', {
                name: option.name, subdomains: subdomains, tms: true
            });
            break;

        //合并
        case "img":
            layer = L.layerGroup([
                L.tileLayer.baidu({ name: "底图", layer: 'img_d', bigfont: option.bigfont }),
                L.tileLayer.baidu({ name: "注记", layer: 'img_z', bigfont: option.bigfont })
            ]);
            break;
    }
    return layer;
};

在地图中使用tileLayer.baidu.js插件

在页面导入插件require("@/util/tileLayer.baidu.js");
编写地图初始化函数initMap

initMap() {
      const _this = this;
      let map = L.map("leafletMap", {
        minZoom: 3,
        maxZoom: 18,
        center: [32.051354, 118.786226],
        zoom: 8,
        zoomControl: false,
        attributionControl: false,
        crs: L.CRS.Baidu
      });

      L.tileLayer.baidu({layer: 'vec'}).addTo(map);
    }

效果

1591324546490.jpg

在这里我们实现了我们的整合目的，至于对地图的其它操作，等我有时间了再更新，可以肯定的是：会有更新