如何使用Vue.Js在Leaflet Map上添加搜索框（L.Control.Search）全局位置

Question

我有一个案例，所以我的讲师分配我在Vue.js框架中使用leaflet.js创建一个地图，它可以显示地图，可以全局搜索位置，还可以用2个地图层更改地图层，如何做使用 vue.js??

Answer 1

1. 您需要使用 npm install leaflet 将 leaflet 安装到您的项目中。
2. 您需要使用 install leaflet-search 来安装 leaflet-search

导入此代码

  import L from 'leaflet';
  import 'leaflet/dist/leaflet.css';
  import 'leaflet-search/dist/leaflet-search.min.css';
  import LControlSearch from 'leaflet-search';
  import 'leaflet-search';

并将此代码导出为运行依赖性的函数

  data() {
    return {
      baseLayer: null,
      satelliteLayer: null,
      map: null,
      searchControl: null,
    }
  },

现在是组件，将此代码放入mounted()此代码用于baseLayer

    this.map = L.map('map').setView([-0.9085086842426627, 118.1511063353415], 5)
    this.baseLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
      maxZoom: 18
    }).addTo(this.map);
    this.satelliteLayer = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
      attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
      maxZoom: 18
    });

在baseLayer下你需要把searchBox的代码放在这里

    new L.Control.Search({
      url: 'https://nominatim.openstreetmap.org/search?format=json&q={s}',
      jsonpParam: 'json_callback',
      propertyName: 'display_name',
      propertyLoc: ['lat','lon'],
      marker: L.circleMarker([0,0],{radius:30}),
      autoCollapse: true,
      autoType: false,
      minLength: 2
    }).addTo(this.map);

在searchBox下放置layerControl的代码

      L.control.layers({
        'Peta Display': this.baseLayer,
        'Peta Satelit': this.satelliteLayer
      },{},{
        collapsed: true,
      }).addTo(this.map);

像这样将地图导入到 vue 中。

<template>
  <div>
    <div id="map" class="map">
    </div>
  </div>
</template>

最后您可以在地图中搜索全球位置可以更改地图图层。

如果您的地图没有出现在屏幕上，请添加此代码。

  <style>
  .map{
    height: 575px;
    width: auto;
  }
  </style>

如果您觉得困难，这是完整的代码。

<template>
  <div>
    <div id="map" class="map">
    </div>
  </div>
</template>
  
  <script>
  import L from 'leaflet';
  import 'leaflet/dist/leaflet.css';
  import 'leaflet-search/dist/leaflet-search.min.css';
  import LControlSearch from 'leaflet-search';
  import 'leaflet-search';
  
  export default {
  data() {
    return {
      baseLayer: null,
      satelliteLayer: null,
      map: null,
      searchControl: null,
    }
  },
  mounted() {
    this.map = L.map('map').setView([-0.9085086842426627, 118.1511063353415], 5)
    this.baseLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
      maxZoom: 18
    }).addTo(this.map);
    this.satelliteLayer = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
      attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
      maxZoom: 18
    });

    new L.Control.Search({
      url: 'https://nominatim.openstreetmap.org/search?format=json&q={s}',
      jsonpParam: 'json_callback',
      propertyName: 'display_name',
      propertyLoc: ['lat','lon'],
      marker: L.circleMarker([0,0],{radius:30}),
      autoCollapse: true,
      autoType: false,
      minLength: 2
    }).addTo(this.map);
  
      L.control.layers({
        'Peta Display': this.baseLayer,
        'Peta Satelit': this.satelliteLayer
      },{},{
        collapsed: true,
      }).addTo(this.map);
  
  },

  }
  </script>
  <style>
  .map{
    height: 575px;
    width: auto;
  }
  </style>

我希望这对你有帮助......

Answer 2

这仅适用于 Vue2，现已被弃用