中地数码
@mapgis/webclient-vue-mapboxgl
Declarative style
You can use map elements like layers, markers, popups as Vue components and control them via synchronized props
Vuefied
Map elements declared as components respect Vue lifecycle, emit map events like Vue events and can be used in OOP-style
Promisified async actions
You can do async map operations and get results in Promise without messing with map events and figuring out what action cause it
If you like long story, check out blog post (opens new window)
// main.js
import Mapgis2d from "@mapgis/webclient-vue-mapboxgl";
Vue.use(Mapgis2d);
<template>
<mapgis-web-map
container="map-test"
:center.sync="center"
:accessToken="accessToken"
:mapStyle="mapStyle"
>
<mapgis-marker :coordinates.sync="markerCoordinates" color="green" />
<mapgis-geojson-layer
type="fill"
:sourceId="sourceId"
:layerId="layerId"
:source="geojson"
@click="handleClick"
/>
</mapgis-web-map>
</template>
<script>
export default {
name: 'App',
data() {
return {
accessToken: 'some_token',
mapStyle: 'mapbox://map_style',
geojson: { /* … some geojson */}
layerId: 'firstLayer',
sourceId: 'firstSource',
markerCoordinates='[50, 50]'
}
}
}
</script>
Dependencies
Vue.js 2.5+ (opens new window)
Mapbox GL JS 1.9.2+ (opens new window)
map-promisified (opens new window)
Size
~ 15 kB minified and gzipped
Browser compatibility
Coming soon