vue-mapvgl

Из-за требований библиотеки Baidu к открытому исходному коду, компонентная библиотека прекратила поддержку, последующие документы также будут удалены. Для нуждающихся можно скачать исходный код и запустить его локально для просмотра документов. Ключ Baidu будет недействителен, поэтому рекомендуется использовать свой ключ.

vue-mapvgl@next — это набор компонентов карт, основанный на Vue3 и библиотеке mapvgl от Baidu. Этот компонент зависит от vue-bmap-gl@next, подробнее см. руководство. В этом выпуске были внесены изменения для совместимости с Vue3.

Для использования с Vue2 используйте версию OnClickListener 0.x, соответствующий раздел vue2.

Если вам понравился проект, пожалуйста, оставьте звездочку.

Донаты

Установка

npm i -S vue-mapvgl@next

Документация

https://vue-mapvgl.guyixi.cn

Быстрый старт

Установите vue-bmap-gl@next и vue-mapvgl@next

// Подключение vue-bmap-gl
import VueBMap, { initBMapApiLoader } from 'vue-bmap-gl';
import VueMapvgl from 'vue-mapvgl';
import 'vue-bmap-gl/dist/style.css';
```// Инициализация vue-bmap-gl
initBMapApiLoader({
  // Ключ Baidu
  ak: 'YOUR_KEY',
});

createApp(App).use(VueBMap).use(VueMapvgl);

Автоматическое импортирование

Сначала установите плагины unplugin-vue-components, unplugin-auto-import и @vuemap/unplugin-resolver.

npm install -D unplugin-vue-components unplugin-auto-import @vuemap/unplugin-resolver

Затем в main.ts импортируйте CSS и выполните инициализацию ключа.

import App from './App.vue';
import { initBMapApiLoader } from 'vue-bmap-gl';
import 'vue-bmap-gl/dist/style.css';

initBMapApiLoader({
    ak: 'YOUR_KEY'
});

Затем создайте приложение (App) и монтируйте его.

createApp(App).mount('#app');

Затем отредактируйте конфигурационный файл и вставьте следующий код в ваш файл конфигурации Vite или Webpack.

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { VueBmapGlResolver, VueMapvglResolver } from '@vuemap/unplugin-resolver';

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      dts: './src/auto-imports.d.ts',
      imports: ['vue', 'vue-router'],
    }),
    Components({
      dts: './src/components.d.ts',
      dirs: ['src/components'],
      resolvers: [VueBmapGlResolver(), VueMapvglResolver()],
    }),
  ],
});

КомпонентыНа данный момент завершены компоненты:

• el-bmapv-view (управление слоями, контейнер слоёв)
• el-bmapv-point-layer (основной слой точек PointLayer)
• el-bmapv-icon-layer (слой значков IconLayer)
• el-bmapv-point-trip-layer (слой трассировки точек PointTripLayer)
• el-bmapv-heat-point-layer (слой тепловых точек HeatPointLayer)
• el-bmapv-heat-map-layer (слой тепловой карты HeatmapLayer)
• el-bmapv-heat-grid-layer (слой тепловых столбцов HeatGridLayer)
• el-bmapv-spark-layer (слой фейерверка SparkLayer)
• el-bmapv-circle-layer (слой круга CircleLayer)
• el-bmapv-ripple-layer (слой волновых точек RippleLayer)
• el-bmapv-text-layer (слой текста TextLayer)
• el-bmapv-fan-layer (слой радара FanLayer)
• el-bmapv-simple-line-layer (основной слой линий SimpleLineLayer)
• el-bmapv-line-layer (широкий слой линий LineLayer)
• el-bmapv-wall-layer (слои трехмерной стены WallLayer)
• el-bmapv-heat-line-layer (слой тепловой линии HeatLineLayer)
• el-bmapv-line-flow-layer (слой линии с потоком LineFlowLayer)
• el-bmapv-line-trip-layer (слой трассировки линии LineTripLayer)
• el-bmapv-wall-trip-layer (слой трассировки стены WallTripLayer)
• el-bmapv-fly-line-layer (слой летящих линий FlyLineLayer)
• el-bmapv-shape-layer (основной слой формы ShapeLayer)
• el-bmapv-shape-line-layer (слой линий формы ShapeLineLayer)
• el-bmapv-polygon-layer (плоский слой полигонов PolygonLayer)
• el-bmapv-cluster-layer (слой агрегации точек ClusterLayer)
• el-bmapv-honeycomb-layer (слой сот HoneycombLayer)
• el-gltf-layer (реализация gltf от Baidu)
• el-gltf-three-layer (расширение модели ThreeLayer и библиотеки ThreeJS)
• el-bmapv-marker-list-layer (компонент списка маркеров MarkerListLayer)
• el-bmapv-bar-layer (слой столбчатой диаграммы BarLayer)## Встроенные эффекты mapvgl
• Эффект свечения BloomEffect
• Эффект освещения объектов BrightEffect

Встроенные инструменты mapvgl

• Генератор диапазона цветов Intensity
• Генератор кривых Безье BezierCurve
• Генератор геодезических кривых GeodesicCurve(zh-cn/util/GeodesicCurve.md)
• Генератор кривых OD OdCurve