109 lines
3.6 KiB
Vue
109 lines
3.6 KiB
Vue
<template>
|
||
<div :id="id" class="myMap"></div>
|
||
</template>
|
||
<style lang="scss" scoped>
|
||
.myMap{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
</style>
|
||
<script lang="ts">
|
||
import {Component,Emit,Prop,Vue} from 'vue-property-decorator';
|
||
import PlayerUtils from "@/utils/player"
|
||
@Component
|
||
export default class MapComponent extends Vue {
|
||
@Prop()
|
||
id:string;
|
||
public playerUtils = new PlayerUtils();
|
||
public player:any;
|
||
public timer: any;
|
||
public moving = false;
|
||
public playerApi:any;
|
||
@Emit("onLoaded")
|
||
public loadPlayer(){
|
||
return {
|
||
palyer:this.player,
|
||
api:this.playerApi,
|
||
utils:this.playerUtils
|
||
}
|
||
}
|
||
@Emit("onHandleChange")
|
||
public handleChange(data){
|
||
//
|
||
}
|
||
created(){
|
||
this.playerUtils.onEvent = async(data)=>{
|
||
this.handleChange(data)
|
||
|
||
}
|
||
this.playerUtils.onReady = (data)=>{
|
||
this.playerApi.settings.setMapMode(2, {
|
||
'coordType': 0, //坐标系类型，0：经纬度；1：本地（默认值是0）
|
||
'serviceType': 4,//服务类型，0：MVT矢量切片（默认值）； 1：WMTS(ArcGIS)； 2：WMS； 3：MapServer(ArcGIS) ； 4：Mapbox
|
||
'mapPoint': [492848.00, 2491968.00],//同名点，取值范围：[x,y]，（默认值是[0, 0]）
|
||
'longitude': 113.9354020,//经度，取值范围：[0~180]（默认值是0.0）
|
||
'latitude': 22.5222660,//纬度，取值范围：[0~90]（默认值是0.0）
|
||
'style': 'mapbox://styles/mapbox/streets-v10',//风格路径，字符串地址，（默认值是 "mapbox://styles/mapbox/streets-v10"）
|
||
'coordOrder': 0,//坐标顺序，0: XY; 1: YX（默认值为0）
|
||
'cache': ':memory:',//缓存路径，字符串地址，（默认值是 ":memory:"）
|
||
'renderMode': 0,//渲染模式，0：正常；1：透明；2：标注；3：贴地（默认值是0）
|
||
'groundHeight': 0,//地面高度，取值范围：[0~任意数值]（默认值是0.0）
|
||
//'serverURL': []
|
||
}, () => {
|
||
console.log('设置大地图模式完成');
|
||
});
|
||
// this.playerApi.tileLayer.hide("48D390964B7F0D37D07DD8A2D5596E64")
|
||
this.loadPlayer();
|
||
}
|
||
}
|
||
mounted(){
|
||
window.addEventListener("resize",this.resize)
|
||
// document.addEventListener("mousemove", this.fixedCamera)
|
||
this.player = this.playerUtils.initPlayer(this.id,"2423385884355");
|
||
this.playerApi = this.player.getAPI();
|
||
|
||
}
|
||
|
||
// 旋转镜头
|
||
public fixedCamera() {
|
||
if (this.timer) {
|
||
clearInterval(this.timer);
|
||
this.timer = null;
|
||
if(this.moving){
|
||
this.playerApi.camera.stop();
|
||
this.moving= false
|
||
}
|
||
}
|
||
this.timer = setInterval(() => {
|
||
this.moving = true;
|
||
this.playerApi.camera.flyAround([
|
||
13312716.658437,
|
||
4098255.982695,
|
||
60.714346
|
||
], [0,-45,0], 60, 20)
|
||
}, 20 * 1000)
|
||
}
|
||
beforeDestroy(){
|
||
|
||
if (this.timer) {
|
||
clearInterval(this.timer);
|
||
this.timer = null
|
||
}
|
||
}
|
||
destroyed(){
|
||
window.removeEventListener("resize",this.resize)
|
||
document.removeEventListener("mousemove", this.fixedCamera)
|
||
//关闭云渲染并释放资源
|
||
this.playerApi.destroy();
|
||
}
|
||
beforeRouteLeave(){
|
||
console.log('des')
|
||
}
|
||
|
||
public resize(){
|
||
this.player.resize()
|
||
}
|
||
}
|
||
</script>
|
||
|