<!-- OpenLayers -->
<template>
<div class="OpenLayers_container">
<div id="LBTmap" class="lbtolmap">
</div>
<div id="popup" class="info_popup">
{{popupInfo.jqxx_name}} <br>
{{popupInfo.jqxx_xx}}
</div>
</div>
</template>
<script>
//這里可以導入其他文件（比如：組件，工具js，第三方插件js，json文件，圖片文件等等）
//例如：import 《組件名稱》 from '《組件路徑》';
import axios from 'axios'
export default {
//import引入的組件需要注入到對象中才能使用
components: {},
props:{
},
data() {
//這里存放數據
return {
popupInfo:{},//彈窗信息
popupOverlay:null,//彈窗
};
},
//監聽屬性 類似於data概念
computed: {},
//監控data中的數據變化
watch: {},
//方法集合
methods: {
// 初始化單擊選擇
initSelect(){
var LBTselect, LBTinitSelect = [
{
layer: LBTvectorlayerblankpolygon,
style: LBTstyleAploygon_S
}
];
LBTselect = LBTglobe.clickSelect(LBTinitSelect);
var _this=this
LBTselect.on('select', function(e) {
LBTglobe.selectStyle(e.selected[0]);
if (e.selected.length > 0) {
let centerCoord= ol.extent.getCenter(e.selected[0].getGeometry().getExtent())//獲取選擇面的中心點
_this.addMarker(e.selected[0].j,centerCoord)
} else {
console.log("沒有選中要素...");
_this.popupOverlay.setPosition(undefined)
}
});
},
// 添加信息彈窗
addMarker(info,coord) {
this.popupInfo=info
this.popupOverlay = new ol.Overlay({
position: coord,//投影坐標
element: document.getElementById("popup"),
positioning: "center-center",
stopEvent: false,
insertFirst:false,
autoPan: true, // 定義彈出窗口在邊緣點擊時候可能不完整 設置自動平移效果
autoPanAnimation: {
duration: 250 //自動平移效果的動畫時間 9毫秒）
}
});
LBTmap.addOverlay(this.popupOverlay);
},
},
//生命周期 - 創建完成（可以訪問當前this實例）
created() {},
//生命周期 - 掛載完成（可以訪問DOM元素）
mounted() {
/*
定義地球
*/
window.LBTglobe = new LBTGSglobe('LBTmap', LBTview, LBTstart);
window.LBTmap = LBTglobe.map;
/*
增加影像圖層
*/
var LBTtilelayercn = LBTglobe.addTileLayer(LBTlayerCnTile, true);
var LBTtilelayerhn = LBTglobe.addTileLayer(LBTlayerHnTile, true);
/*
增加矢量圖層
*/
window.LBTvectorlayerblankpolygon = LBTglobe.addVectorLayer(LBTlayerBlankVectorpolygon, true);
axios.get(configBase.mapUrl.geojsonTcqy).then(res=>{
// /*
// 增加面feature到圖層LBTvectorlayerblank
// */
var LBT_featuresgon = [];
var LBT_featureName=[]
res.data.features.forEach(item => {
item.geometry.coordinates[0].forEach((item1,index)=>{
item1.forEach((item2,index2)=>{
item.geometry.coordinates[0][index][index2]=LBTglobe.toLonLat([item2[0],item2[1]])
})
})
// 地塊面feature
let LBTfeatureInfogon = {
geometry: LBTglobe.newGeometry('Polygon', item.geometry.coordinates[0]),
jqxx_name:item.properties.NAME,
jqxx_Jname:item.properties.ANAME,
jqxx_pano:item.properties.PANOADD,
jqxx_mj:item.properties.TAREA,
jqxx_xx:item.properties.信息,
jqxx_x:item.properties.Shape_Leng,
jqxx_y:item.properties.Shape_Area,
};
LBT_featuresgon.push(LBTglobe.newFeature(LBTfeatureInfogon));
});
LBTglobe.addFeatures(LBTvectorlayerblankpolygon, LBT_featuresgon);
})
this.initSelect()
},
beforeCreate() {}, //生命周期 - 創建之前
beforeMount() {}, //生命周期 - 掛載之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 銷毀之前
destroyed() {}, //生命周期 - 銷毀完成
activated() {}, //如果頁面有keep-alive緩存功能，這個函數會觸發
};
</script>
<style lang='scss' scoped>
.OpenLayers_container{
width: 100%;
height: 100%;
}
.lbtolmap{
width: 100%;
height: 100%;
}
.check_box{
width: 100px;
height: 50px;
background: blue;
position: absolute;
bottom: 10px;
right: 10px;
z-index: 5;
cursor: pointer;
}
.info_popup{
width: 200px;
padding:10px 20px;
position: absolute;
background: #fff;
border-radius: 5px;
font-size: 12px;
}
</style>
