51 lines
936 B
Vue
51 lines
936 B
Vue
<template>
|
|
<view class="container">
|
|
<view id="olMap" class="olMap">
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
|
|
<script module="ol" lang="renderjs">
|
|
// import "../../static/ol/ol.css";
|
|
// import data from "@/static/china.json";
|
|
export default {
|
|
data() {
|
|
return {
|
|
map: null,
|
|
}
|
|
},
|
|
mounted() {
|
|
if (typeof window.ol === 'function') {
|
|
this.initAmap()
|
|
} else {
|
|
// 动态引入较大类库避免影响页面展示
|
|
const script = document.createElement('script')
|
|
script.src = '../../static/ol/ol.js'
|
|
script.onload = this.initAmap.bind(this)
|
|
document.head.appendChild(script)
|
|
}
|
|
},
|
|
methods: {
|
|
initAmap() {
|
|
this.map = new ol.Map({
|
|
layers: [
|
|
new ol.layer.Tile({
|
|
source: new ol.source.OSM()
|
|
})
|
|
],
|
|
target: "olMap",
|
|
view: new ol.View({
|
|
zoom: 18,
|
|
center: [114, 25],
|
|
projection: "EPSG:4326"
|
|
})
|
|
})
|
|
}
|
|
<script>
|
|
|
|
|
|
<style>
|
|
|
|
</style>
|