61 lines
1.2 KiB
Vue
61 lines
1.2 KiB
Vue
|
<template>
|
||
|
|
<div id="map" class="map">222222</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: "Index",
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
goTarget(href) {
|
||
|
|
window.open(href, "_blank");
|
||
|
|
},
|
||
|
|
initMap() {
|
||
|
|
// 创建地图实例
|
||
|
|
this.map = new Map({
|
||
|
|
target: 'map', // 对应页面上的div的id
|
||
|
|
layers: [ // 添加图层
|
||
|
|
new TileLayer({
|
||
|
|
source: new XYZ({
|
||
|
|
url:'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
|
||
|
|
//'http://wprd03.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=2&style=8'
|
||
|
|
})
|
||
|
|
}),
|
||
|
|
],
|
||
|
|
view: new View({ // 定义视图
|
||
|
|
center: [0, 0], // 地图中心坐标
|
||
|
|
zoom: 2, // 缩放级别
|
||
|
|
}),
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.initMap();
|
||
|
|
},
|
||
|
|
created(){
|
||
|
|
this.initMap();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.map{
|
||
|
|
width: 1000px;
|
||
|
|
height: 800px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|