【Vue@Leaflet】底图 Baselayer

基础地图

1.加载在线地图

L.tileLayer(
      "http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
      {
        subdomains: ["1", "2", "3", "4"],
        attribution: "高德"
      }
    ).addTo(map);

2.自定义带参数设置

L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}", {
      foo: "bar",
      attribution:
        'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
    }).addTo(map);

// 默认subdomains a,b,c
// leaflet-src.js   line:11456

3.加载无标注地图

  var group = L.layerGroup().addTo(map);

    var url =
      "http://webst0{s}.is.autonavi.com/appmaptile?style={type}&x={x}&y={y}&z={z}";
    var basemap = L.tileLayer(url, {
      type: "6",
      subdomains: ["1", "2", "3", "4"],
      attribution: "高德"
    }).addTo(group);
    var annotion = L.tileLayer(url, {
      type: "8",
      subdomains: ["1", "2", "3", "4"],
      attribution: "高德"
    }).addTo(group);

    //  Map: 'http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
    // Annotion: 'http://webst0{s}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}'

4.切换底图

 changeMap() {
      if (this.map.hasLayer(this.Normal)) {
        this.map.removeLayer(this.Normal);
        this.Satellite.addTo(this.map);
      } else {
        this.map.removeLayer(this.Satellite);
        this.Normal.addTo(this.map);
      }
    }

5.加载离线地图

this.Normal = L.tileLayer("./../static/autonavi.com/{z}/{y}/{x}.png", {
      attribution: "高德"
    }).addTo(this.map);

6.补充自动加载组件

 const files = require.context('./../components', false, /\.vue$/)

var routes = [{
  path: '/',
  name: 'HelloWorld',
  component: HelloWorld
}, {
  path: '*',
  redirect: '/',
  // hidden: true
}]
files.keys().forEach(key => {
  let name = key.split('/').pop().split('.').shift();
  let component = files(key).default
  let p = {
    path: /${name},
    name,
    component
  }
  routes.push(p);
});

查看相关视频