コンポーネントのインストール
cnpm i ol -S
Vueコード
<template>
<div id="map" ref="rootmap"></div>
</template>
<script>
import 'ol/ol.css'
import {
Map, View } from 'ol'
import TileLayer from 'ol/layer/Tile'
import OSM from 'ol/source/OSM'
import XYZ from 'ol/source/XYZ'
export default {
name: 'ol',
data () {
return {
message: 'ol-test',
map: null
}
},
mounted () {
var mapcontainer = this.$refs.rootmap
this.map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new XYZ({
visible: true,
url: 'http://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=2&scale=1&style=8',
})
})
],
view: new View({
projection: 'EPSG:4326',
center: [114.064839, 22.548857],
zoom: 1
})
})
},
methods: {
}
}
</script>
<style scoped>
#map {
height: 100%;
}
.ol-attribution,
.ol-zoom {
display: none;
}
</style>
示す