leaflet学习笔记-地图图层控制(二)

2023-12-28 10:56:32

图层介绍

Leaflet的地图图层控件可控制两类图层:一类是底图图层(Base Layers),一次只能选择一个图层作为地图的背景图层,即底图图层,在地图图层控件中用单选按钮控制;另一类是覆盖图层(Overlays),也就是覆盖在底图上的其他图层,一次可以覆盖一个图层,也可以覆盖多个图层,甚至可以不覆盖任何图层,在地图图层控件中用复选框控制。

添加图层

featureGroup使用(相当于arcgis的featureLayer/graphicLayer)

    let littleton = L.marker([25.61, 102.7]).bindPopup('This is Littleton, CO.');
    let denver = L.marker([25.61, 102.71]).bindPopup('This is Denver, CO.');
    let aurora = L.marker([25.61, 102.72]).bindPopup('This is Aurora, CO.');
    let golden = L.marker([25.61, 102.73]).bindPopup('This is Golden, CO.');

    //相当于arcgis的featureLayer
    let featureGroup= L.featureGroup([littleton, denver, aurora, golden]);
    featureGroup.addTo(this.mainMap);

    //聚焦所有的marker
    let bound = featureGroup.getBounds();
    this.mainMap.fitBounds(bound);

使用地图图层控件

Leaflet的地图图层控件可控制两类图层:一类是底图图层(Base Layers),一次只能选择一个图层作为地图的背景图层,即底图图层,在地图图层控件中用单选按钮控制;另一类是覆盖图层(Overlays),也就是覆盖在底图上的其他图层,一次可以覆盖一个图层,也可以覆盖多个图层,甚至可以不覆盖任何图层,在地图图层控件中用复选框控制。

首先要创建基础底图(Base Layers)

    //添加瓦片图层(作为底图备选)
    let openstreetmapLayer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}', {foo: 'bar'}).addTo(this.mainMap);
    let somedomainLayer = L.tileLayer('http://{s}.somedomain.com/{foo}/{z}/{x}/{y}.png', {foo: 'bar'});   
    //基础底图(每次只能有一个)
    let baseLayers = {
      openstreetmapLayer,
      somedomainLayer,
    };

这里要注意的是openstreetmapLayer图层已经直接添加到了地图上,所以后面我们会看到基础地图的单选项,默认选中的是openstreetmapLayer选项

创建覆盖图层(Overlays)

    //覆盖图层
    let overlays = {
      // circle,
      // littleton,
      // denver,
      // aurora,
      // golden,

      '<i style="color:red;">featureGroup</i>': featureGroup
    };

注意这里的key值就是图层控制里面要显示的label,这里可以直接用html标签,这种设计真的很方便,后面可以看看呈现的效果featureGroup就是上面用到的featureGroup将 circle、ittleton、 denver、 aurora、 golden这几个marker都包含在里面,方便一起操作

实例化 L.control.layers

 //添加图层管理组件
 let layerControl = L.control.layers(baseLayers, overlays, {position: 'topright'}).addTo(this.mainMap);

这里就用到了上边的 baseLayersoverlays

右上角展开的就是我们添加的图层控制组件,上边的单选就是底图的选择(每次只会有一种底图)。下面的多选就是我们后面添加的featureGroup,它的label变成了斜体红色就是因为我们上面提到的用了html的标签和样式。

完整代码

<template>
  <div id="mainMap"></div>
</template>

<script>
export default {
  name: "MainMap",
  data: () => {
    return {
      centerLatLng: [25, 102.7],
      mainMap: null
    }
  },
  methods: {},
  mounted() {
    this.mainMap = L.map('mainMap', {
      center: [25, 102.7], // 地图中心
      zoom: 14, //缩放比列
      zoomControl: true, //禁用 + - 按钮
      doubleClickZoom: true, // 禁用双击放大
      attributionControl: false, // 移除右下角leaflet标识
    });

    //添加瓦片图层(作为底图备选)
    let openstreetmapLayer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}', {foo: 'bar'}).addTo(this.mainMap);
    let somedomainLayer = L.tileLayer('http://{s}.somedomain.com/{foo}/{z}/{x}/{y}.png', {foo: 'bar'});

    let circle = L.circle(this.centerLatLng, {radius: 100, fillColor: 'red'});

    let littleton = L.marker([25.61, 102.7]).bindPopup('This is Littleton, CO.');
    let denver = L.marker([25.61, 102.71]).bindPopup('This is Denver, CO.');
    let aurora = L.marker([25.61, 102.72]).bindPopup('This is Aurora, CO.');
    let golden = L.marker([25.61, 102.73]).bindPopup('This is Golden, CO.');

    //相当于arcgis的featureLayer
    let featureGroup = L.featureGroup([circle, littleton, denver, aurora, golden]);
    featureGroup.addTo(this.mainMap);
    //聚焦所有的marker
    let bound = featureGroup.getBounds();
    this.mainMap.fitBounds(bound);

    //基础底图(每次只能有一个)
    let baseLayers = {
      openstreetmapLayer,
      somedomainLayer,
    };

    //覆盖图层
    let overlays = {
      // circle,
      // littleton,
      // denver,
      // aurora,
      // golden,

      '<i style="color:red;">layerGroup</i>': featureGroup
    };

    //添加图层管理组件
    let layerControl = L.control.layers(baseLayers, overlays, {position: 'topright'}).addTo(this.mainMap);

  }
}
</script>

<style scoped>

#mainMap {
  width: 100vw;
  height: 100vh;
}
</style>

本文为学习笔记,仅供参考

文章来源:https://blog.csdn.net/u012917880/article/details/135246418
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。