A collection of Vue.js components to work with OpenLayers.
Basic Usage:
1. Import and register the components.
import Vue from 'vue' import { Map, TileLayer, OsmSource, Geoloc } from 'vuelayers' import 'vuelayers/dist/vuelayers.css' Vue.use(Map) Vue.use(TileLayer) Vue.use(OsmSource) Vue.use(Geoloc)
// OR import Vue from 'vue' import VueLayers from 'vuelayers' import 'vuelayers/dist/vuelayers.css' Vue.use(VueLayers)
2. Create a simple map with OSM layer.
<template> <div> <vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true" data-projection="EPSG:4326" style="height: 400px"> <vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view> <vl-geoloc @update:position="geolocPosition = $event"> <template #default="geoloc"> <vl-feature v-if="geoloc.position" id="position-feature"> <vl-geom-point :coordinates="geoloc.position"></vl-geom-point> <vl-style-box> <vl-style-icon src="_media/marker.png" :scale="0.4" :anchor="[0.5, 1]"></vl-style-icon> </vl-style-box> </vl-feature> </template> </vl-geoloc> <vl-layer-tile id="osm"> <vl-source-osm></vl-source-osm> </vl-layer-tile> </vl-map> <div style="padding: 20px"> Zoom: {{ zoom }}<br> Center: {{ center }}<br> Rotation: {{ rotation }}<br> My geolocation: {{ geolocPosition }} </div> </div> </template>
export default { data () { return { zoom: 2, center: [0, 0], rotation: 0, geolocPosition: undefined, } }, } </template>
Preview:
Changelog:
v0.12.7 (02/21/2023)
- bugfixes
v0.12.3 (04/06/2022)
- bugfixes
v0.12 (02/24/2022)
- based on the current OpenLayers v6
- optimization and careful synchronization of the state between vuelayers and openlayers components
- renamed several properties and components to make naming consistent across the lib. All of them will be still available by deprecated names but log a warnings when process.env.NODE_ENV !== ‘production’.
v0.11.27 (09/21/2020)
- fix the early exit from function to resolve selected feature
v0.11.26 (07/07/2020)
- Bugs fixed
Download Details:
Author: ghettovoice
Live Demo: https://ghettovoice.github.io/vuelayers/
Download Link: https://github.com/ghettovoice/vuelayers/archive/master.zip
Official Website: https://github.com/ghettovoice/vuelayers
Install & Download:
npm install -S vue vuelayers