Визуализация карты Vue (2) статьи mapbox

MapBox

Использование MapBox в проекте также является случайной возможностью.В проекте необходимо использовать 3D-карты.Когда существующие инструменты (Baidu Maps) не могут удовлетворить наши потребности, нам определенно нужны более продвинутые карты с открытым исходным кодом.К сожалению, Google Maps использовать нельзя в Китае. Да, я нашел Leafle. Сначала я был поражен уровнем открытого исходного кода leafle и его характерным стилем карты. Позже я пошел по подсказкам и нашел коммерческую карту, которая является нашим главным героем — MapBox

Как чужая карта, когда вы увидите ее эффект, вы выйдете из-под контроля

Поскольку проект в основном использует 3D GL, в этом отношении нет много внутренних документов, поэтому мы можем только удерживать косу и факел социализма, и снова прочитать его официальные документы снова и снова.
mapbox gl Эй, Ма Пинг Boxing.com / Ма Пинг Бокс - км - просто ...

• Проект представляет Mapbox

CDN-режим
Вставьте мапбокс прямо в

html проекта

<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css' rel='stylesheet' />

режим сборщика модулей
npm install --save mapbox-gl
// cnpm install --save mapbox-gl

• Инициализировать карту

Идеи здесь и статья, которую я написал ранее[百度地图组件化][2]То же, карта извлекается отдельно

mapbox.vue

<template>
  <div style="height:100%;width:100%;text-align:left;">
    <div ref="basicMapbox" :style="mapSize"></div>
  </div>
</template>
<script>
import mapboxgl from 'mapbox-gl'
export default {
  props: {
    mapWidth: {
      type: String
    },
    mapHeight: {
      type: String
    }
  },
  data () {
    return {
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    // 初始化
    init () {
      mapboxgl.accessToken = 'your AK'
      const map = new mapboxgl.Map({
        container: this.$refs.basicMapbox,
        style: 'mapbox://styles/mapbox/streets-v9'
      })
      console.log(map)
    }
  },
  computed: {
    mapSize () {
      let styleObj = {
        width: this.mapWidth,
        height: this.mapHeight
      }
      return styleObj
    }
  }
}
</script>
<style>
@import url('https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css');
</style>

Поэтому карту можно загрузить, внедрив mapbox.vue отдельно в бизнес-компонент

<mapbox-map mapWidth="100%" mapHeight="600px"></mapbox-map>

Изображение эффекта:

• визуализация мапбокса

mapbox изначально предоставляет интерфейс для визуализации данных, но это не соответствует нашим потребностям
Поэтому мы часто используем плагины визуализации d3.js и echarts во фронтенде, после горизонтального сравнения их производительности и универсальности остановились на последнем.
echarts также предоставляет echart-gl для 3D-рендеринга с использованием мощного картографического сервиса mapbox и визуального рендеринга echaers-gl для удовлетворения наших первоначальных требований.
(3D-моделирование должно потреблять много операций графического процессора, ранний этап проекта в основном основан на реализации функций, а более поздний этап будет сосредоточен на оптимизации производительности)

Изображение эффекта:

Компонентизация визуализации mapbox
1. Конфигурация карты: элементы конфигурации мапбокса инкапсулированы в echarts-GL, и простая настройка может быть выполнена непосредственно через мапбокс опций (центральная точка, уровень, наклон камеры, высота камеры и источник света и т. д.)

mapbox: {
      center: [113.206456, 23.072519],
      zoom: 6.2,
      pitch: 60,
      bearing: 0,
      style: 'mapbox://styles/mapbox/dark-v9',
      boxHeight: 20,
      light: {
        main: {
          intensity: 1,
          shadow: true,
          shadowQuality: 'high'
        },
        ambient: {
          intensity: 0.2
        }
      }
    }

2. Инструмент визуализации: установите диаграмму в ряд параметров echarts-Gl и получите объект карты с помощью getModel().getComponent('mapbox3D').getMapbox().

series: {
      name: '常驻人口',
      type: 'bar3D',
      shading: 'realistic',
      coordinateSystem: 'mapbox',
      silent: true,
      barSize: 1, // 柱子粗细
      bevelSize: 0.3,
      emphasis: {
        label: {
          show: false
        }
      },
      label: {
        show: true,
        distance: 0,
        formatter: '{b}',
        textStyle: {
          fontSize: 12
        }
      },
      data: []
    }

3. Действия и расширения: mapbox управляет картой через атрибут on API карты и mapboxgl, например, изменение стиля карты, загрузка слоев, добавление инструментов навигации и другие действия взаимодействия с пользователем.
Например: добавить операцию навигации:

    this.nav = new mapboxgl.NavigationControl()
    map.addControl(this.nav)

Добавить слой Geojson

 map.addSource('states', {
        'type': 'geojson',
        'data': gdData
      })
    map.addLayer({
        'id': 'state-fills',
        'type': 'fill',
        'source': 'states',
        'layout': {},
        'paint': {
          'fill-color': '#627BC1',
          'fill-opacity': 0.1
        }
    })

Резюме идей: С помощью описанного выше трехэтапного мышления мы можем грубо разделить компонент на три части.

核心的mapbox.vue是地图视图
可视化图表由echarts-gl组成
动作及拓展对地图视图和图表进行操作

Изображение эффекта:

Полный адрес проекта на github:GitHub.com/astronaut7/vue-of-…

Я не знаю, где вы можете оставить сообщение ниже или шепотом. Для интересов, то следующий момент, как это, коллекция GitHub и собирать маленькие звезды, спасибо.