Neolithic Programming Machine
Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@mapgis/webclient-vue-mapboxgl

1.0.10 • Public • Published

Webclient-Vue-MapboxGL

组件式风格

通过 Vue 的组件方式调用 layers, markers, popups, 并且使用同步synchronized props来控制状态

Vue 控制

面向对象编程:地图元素拥有 Vue 的生命周期,将原生地图事件封装成 Vue 的事件

同步的 Promise Actions

原先异步的地图操作变成同步操作,并且采取Promise的方式进行开发避免大量的地图事件回调导致代码逻辑混乱,能够清晰的知道是什么行为导致地图的变化。

~ 快速提示,刚接触一定要看完指南部分和自定义插件部分。 熟悉后可以直接查看 API。

<template>
  <mapox-map
    container="map-test"
    :center.sync="center"
    :accessToken="accessToken"
    :mapStyle="mapStyle"
  >
    <mapbox-marker
      :coordinates.sync="markerCoordinates"
      color='green'
    />
    <mapbox-geojson-layer
      type="fill"
      :sourceId="sourceId"
      :layerId="layerId"
      :source="geojson"
      @click="handleClick"
    />
  </mapox-map>
</temaplate>
 
<script>
import {
  MapboxMap,
  MapboxMarker,
  MapboxGeojsonLayer
} from '@mapgis/webclient-vue-mapboxgl'
 
export default {
  name: 'App',
  data() {
    return {
      accessToken: 'some_token',
      mapStyle: 'mapbox://map_style',
      geojson: { /* … some geojson */}
      layerId: 'firstLayer',
      sourceId: 'firstSource',
      markerCoordinates='[50, 50]'
    }
  }
}
</script>

依赖

Vue.js 2.5+
MapGIS/Mapbox GL JS 0.54+
MapGIS/WebClient-MapboxGL

Keywords

Install

npm i @mapgis/webclient-vue-mapboxgl

DownloadsWeekly Downloads

28

Version

1.0.10

License

ISC

Unpacked Size

32.1 MB

Total Files

231

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar