Vue-CLI и Leaflet (1): отображение карты

Vue.js

I. Обзор

В этой статье описывается разработка функций, связанных с картой, в сочетании с leaflet.js в проекте Vue.js. Читатели должны иметь определенные базовые знания о Vuejs и leafletjs. Использование Leaflet в Vue.js В этой теме я поделюсь с читателями опытом разработки, полученным в ходе реальной работы, и обобщу примеры реализации общих функций отображения для справки читателей. Во-первых, краткое введение в Vue.js и Leaflet.

1) Vuejs

VueJS
Vuejs — это популярный интерфейсный фреймворк MVVM, который легко освоить. Его особенности и основные преимущества есть везде в Интернете, поэтому я не буду их здесь представлять.

2) Leaflet

Leaflet

Leaflet Официальный сайтНазвание очень прямое и простое:

Интерактивная карта, оптимизированная для мобильных устройств, и библиотека Javascript с открытым исходным кодом. По моему опыту, leaflet — это очень легкая библиотека WebGIS. В сочетании с окружающими ресурсами этого достаточно для охвата большинства функций веб-ГИС с менее сложными требованиями к функциям анализа.

И использование Leaflet в Vue.js В этой серии вы увидите все так:

(1) Vue-CLI и Leaflet: начало работы — использование Leaflet в Vue-CLI

(2) Vue-CLI и Leaflet: основные операции с картой (увеличение, уменьшение, панорамирование, позиционирование и т. д.)

(3) Vue-CLI и Leaflet: добавьте маркер, полилинию, многоугольник

(4) Vue-CLI и Leaflet: добавление всплывающих подсказок и всплывающих окон.

(5) Vue-CLI и Leaflet: точечное рисование

(6) Vue-CLI и Leaflet: рисование линий

(7) Vue-CLI и Leaflet: рисование поверхности

(8) Vue-CLI и брошюра: загрузка картографического сервиса Esri ArcGIS

(9) Vue-CLI и Leaflet: реализация основных функций управления слоями

(10) Vue-CLI и Leaflet: запрос свойств AGS и запрос точечного графа

(11) Vue-CLI и Leaflet: агрегация точек Leaflet.markercluster

Пожалуйста, обратитесь к исходному кодумой GitHub, Поскольку статья написана во время кодирования, исходный код в Github может быть немного запутанным, вы можете найти соответствующий код по функции. Это будет улажено позже.

2. Создание среды и реализация кода

1) Создайте среду разработки

Машина, которую я использую для разработки, — Win10 или iMac. Разработка с использованием IDE также довольно распространена в VS Code. Среда разработки относительно проста:

  1. nodejsДолжен быть установлен. Ссылаться наОфициальный сайт

  2. Vue-CLIДолжны быть установлены стандартные инструменты. Ссылаться наОфициальный сайт

    npm install -g @vue/cli
2) Создайте проект Vue-CLI

После установки Vue-CLI создайте проект Vue и запустите команду.

vue create leaflet-tutorail

​ Официальный сайт для создания проекта Vue очень подробный. Если необходимоПожалуйста, обратитесь к. После завершения установки у вас должна получиться вот такая директория проекта.

content

Обычно после некоторой простой модульности проекта каталог проекта выглядит следующим образом, и в то же время его изменяютmain.jsСсылка в , смонтировать модуль набора инструментов в проекте вVueНа объекте:

Vue.prototype.$utils = utils;

content-highlight

3) Установите листовку в vue
npm install leaflet --save

После того, как пакет листовок успешно установлен, его необходимо внедрить в проект в проекте Vue. Обычно мой подход заключается в том, чтобы инкапсулировать работу листовки в качестве инструмента модуля карты в отдельный модуль.map.js. Таким образом, если логика функции сложна или необходимо настроить некоторые параметры загрузки,map.jsСопровождение может сделать код более кратким, улучшить читабельность и удобство сопровождения кода.

Следует отметить, что при ссылке на Листовку ее необходимо вводить одновременно.leaflet.cssстиль.

// utils/map.js

import "leaflet/dist/leaflet.css"
import $L from "leaflet";

export default { };

Также смонтируйте модуль карты в наборе инструментов:

import map from "./map";

export default {
  map
};
4) Загрузка карты проста

После выполнения трех вышеуказанных приготовлений вы можете начать операцию отображения карты.

Простой способ загрузки карты выглядит следующим образом:

  1. СоздайтеОбъект карты.

    объект картыОтносительно контейнеров, содержащих географические ресурсы. а такжегеографические ресурсыОн включает в себя все, что вы видите в окне просмотра карты, например общие ресурсы картографического сервиса, географическую графику (точки, линии, многоугольники) и различные элементы, такие как элементы управления картой. Способ создания тоже очень прост. В моем проекте мне нужно добавить метод для создания объекта карты следующим образом:

    // utils/map.js

import "leaflet/dist/leaflet.css"
import $L from "leaflet";

const createMap = (divId, options) => {
  let map = $L.map(divId, options);
  return map;
};

export default { createMap };

    После успешного создания объекта карты вы можете увидеть окно просмотра карты, как показано ниже:

    // src/views/Map.Vue

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

<script>
export default {
  name: "map",
  components: {},
  data(){
    return {
      map: null
    }
  },
  mounted() {
    this.map = this.$utils.map.createMap("map-container");
  }
};
</script>
<style lang="less">
.map-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
</style>

MapView

2) Загрузите картографический сервис

Наличие контейнера карты не означает, что вы можете видеть карту. Представление карты требует добавления слоев или графики для отображения содержимого. Здесь я модифицировал пример на официальном сайте.Официальный сайт добавил сервис открытой карты улиц:

первый вmap.jsДобавьте метод загрузки слоя в . Следует отметить, что метод создания слоев в листовке является асинхронным методом, поэтому здесь я используюasyncа такжеawaitбороться с асинхронностью.

// src/utils/map.js

const createTileLayer = async (map, url, options) => {
  let tileLayer = await $L.tileLayer(url, options);
  tileLayer.addTo(map);
  return tileLayer;
};

Затем снова вызовите этот метод на странице карты, чтобы отобразить карту.

// src/views/Map.Vue

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

<script>
export default {
  name: "mapView",
  components: {},
  data() {
    return {
      map: null,
      OSMUrl: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    };
  },
  mounted() {
    this.map = this.$utils.map.createMap("map-container");
    
    // 加载 open street map 图层服务
    this.$utils.map.createTileLayer(this.map, this.OSMUrl, {});

    // 设施地图视图 中心位置
    this.map.setView([51.505, -0.09], 13);
  }
};
</script>
<style lang="less">
.map-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
</style>

На этом первый шаг в использовании Leaflet с Vue-CLI завершен.

3) Резюме

Эта серия статей является кратким изложением накопленной ранее работы. Содержание может быть относительно простым, надеюсь, оно поможет тем, кто его увидит. В то же время я также надеюсь, что есть могущественные боги, которые могут видеть и подсказывать.

Категории