<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="http://bigemap.com/offline_data/newjunbiao/vue.js"></script>
<link
href="http://ua.bigemap.com:30081/bmsdk/bigemap-gl.js/v1.1.0/Widgets/widgets.css"
rel="stylesheet"
/>
<script src="http://ua.bigemap.com:30081/bmsdk/bigemap-gl.js/v1.1.0/bigemap-gl.js"></script>
<!-- elementui -->
<script src="http://bigemap.com/offline_data/newjunbiao/elementui.js"></script>
<link
rel="stylesheet"
href="http://bigemap.com/offline_data/newjunbiao/elementui.css"
/>
<!-- 引入turf.min.js -->
<script src="http://bigemap.com/offline_data/newjunbiao/turf.min.js"></script>
<!-- popupLayer 相關的插件 -->
<script src="http://bigemap.com/offline_data/newjunbiao/bmgl-plot.min.js"></script>
<title>點擊事件</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
#app {
width: 100%;
height: 100%;
}
#baseMap {
width: 100%;
height: 100%;
}
.tools {
position: absolute;
z-index: 9;
top: 40px;
right: 60px;
width: 200px;
height: 40px;
display: flex;
align-items: center;
}
.div-layer {
background-color: rgba(59, 67, 77, 0.8);
width: 400px;
/* height: 210px; */
border-radius: 4px;
}
.div-layer .top {
width: 400px;
height: 40px;
padding: 2px 4px;
box-sizing: border-box;
}
.div-layer .top .title {
color: white;
float: left;
line-height: 36px;
width: 100%;
border-bottom: 1px solid #3ea6ff;
}
.div-layer .top .close {
color: white;
/* font-size: 1.5rem; */
position: absolute;
top: 0px;
right: 4px;
}
.div-layer .info {
width: 400px;
/* height: 180px; */
}
.div-layer .info .pic {
width: 400px;
height: 120px;
margin-bottom: 2px;
margin-top: 2px;
box-sizing: border-box;
padding: 0 6px;
aspect-ratio: 1.618;
/* aspect-ratio: 16/9; */
}
.div-layer .info .kt {
width: 400px;
box-sizing: border-box;
padding-left: 4px;
color: white;
}
.div-layer .info .des {
color: white;
height: 125px;
font-family: "楷體";
/* margin-bottom: 4px; */
box-sizing: border-box;
padding: 0 2px;
text-indent: 2em;
}
.container {
width: 400px;
height: 20px;
display: flex;
justify-content: center;
/* align-items: center; */
}
.container .tri {
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 12px solid #333;
}
</style>
</head>
<body>
<div id="app">
<div id="baseMap"></div>
</div>
<script>
window.viewer = null;
window.popupLayer = null;
window.manager = null;
window.onload = () => {
new Vue({
el: "#app",
data() {
return {
spotsInfo: [
{
name: "成都大熊貓繁育研究基地",
pos: [
104.14398325543108, 30.735157583632084,
],
info: "基地內有很多萌萌的大熊貓,你可以近距離的去觀賞這些萌噠噠的國寶們。基地位于成都市北郊,距市區約10公里,建設完全模擬大熊貓野外生活環境,建有湖泊、溪流、竹林、草坪等。",
pic: "/offline_data/dxmfyjd.jpg",
},
{
name: "武侯祠",
pos: [
104.04510500872658, 30.64370579271404,
],
info: "成都武侯祠是紀念劉備、諸葛亮等蜀漢英雄人物廟宇所在。它肇始于蜀漢昭烈帝章武元年(221年)劉備惠陵修建時,在修建惠陵的同時也修建了漢昭烈廟。",
pic: "/offline_data/whc.jpg",
},
{
name: "杜甫草堂",
pos: [
104.02601891259792, 30.662641734706895,
],
info: "唐代著名詩人杜甫流寓成都時的故居。杜甫在此居住近四年,創作了上百首詩歌,這里因此被視為中國文學史上的“圣地”。現今的杜甫草堂是經宋、元、明、清多次修復而成。",
pic: "/offline_data/dfct.jpg",
},
{
name: "青城后山",
pos: [
103.61355135540855, 30.991447308643618,
],
info: "位于青城山(前山)后,山腳有泰安古鎮和泰安寺。后山的宮殿香火雖不如前山旺盛,但清幽潔凈更勝一籌,這里特別適合休閑徒步游,比起熱鬧的前山,更能悠然的體會“青城天下幽”。找個住所,小住兩天,相當的愜意。",
pic: "/offline_data/qchs.jpg",
},
{
name: "都江堰景區",
pos: [
103.61768065261475, 31.002550713300458,
],
info: "都江堰景區,位于都江堰市城西岷江干流上,由秦國蜀郡太守李冰及其子于西元前256年左右修建,是目前中國保存完整的古代水利工程。工程由魚嘴分水堤、飛沙堰溢洪道、寶瓶口引水口三大主體工程和百丈堤、人字堤等附屬工程構成,把洶涌的岷江分隔成外江和內江,外江排洪,內江引水灌溉,使川西平原成為了“天府之國”。",
pic: "/offline_data/djy.jpg",
},
],
};
},
mounted() {
// console.log(turf);
this.initMap();
},
methods: {
//初始化地圖
initMap() {
var _this = this;
bmgl.Config.HTTP_URL =
"http://ua.bigemap.com:30081/bmsdk/";
viewer = new bmgl.Viewer("baseMap", {
mapId: "bigemap.dc-tian-w-satellite",
infoBox: false,
selectionIndicator: false,
requestRenderMode: false,
});
//創建路網相關的地圖圖層
let roadNet = new bmgl.ImageryLayer(
new bmgl.BMImageryProvider({
mapId: "bigemap.dc-street",
})
);
// 將圖層疊加到地球上
viewer.imageryLayers.add(roadNet);
// 是否支持圖像渲染像素化處理
if (
bmgl.FeatureDetection.supportsImageRenderingPixelated()
) {
viewer.resolutionScale =
window.devicePixelRatio;
}
//開啟抗鋸齒,讓圖像更加順滑
viewer.scene.postProcessStages.fxaa.enabled = true;
//初始化事件處理對象
let handler = new bmgl.ScreenSpaceEventHandler(
viewer.scene.canvas
);
handler.setInputAction((e) => {
let pos = e.position;
_this.triggerFn(pos);
}, bmgl.ScreenSpaceEventType.LEFT_CLICK);
manager = new bmgl.div.DivLayerManager(viewer, {
click: function (detail, position) {
// console.log(detail, position);
},
});
this.loadPoints();
},
// 點擊事件處理彈窗
triggerFn(endPosition) {
let obj = viewer.scene.pick(endPosition);
console.log("obj", obj);
if (bmgl.defined(obj)) {
if (obj.id && obj.id.extraData) {
var myData = obj.id.extraData;
if (popupLayer != null) {
manager.removeLayer(popupLayer);
popupLayer = null;
}
let pp = myData.pos;
popupLayer = new bmgl.div.DivLayer(
`<div class='div-layer'>
<div class='top'>
<h5 class='title'>景點名稱: ${myData.name}</h5>
<span class="close">x</span>
</div>
<div class='info'>
<image class="pic" src='${myData.pic}'/>
<h5 class="kt">景點簡介:</h5>
<p class="des">${myData.info}<p>
</div>
</div>
<div class='container'>
<div class='tri'></div>
</div>
`,
pp,
{
offset: {
x: 0,
y: -20,
},
}
);
manager.addLayer(popupLayer);
}
} else {
if (popupLayer != null) {
manager.removeLayer(popupLayer);
popupLayer = null;
}
return;
}
},
loadPoints() {
this.spotsInfo.forEach((v, i) => {
let pos = bmgl.Cartesian3.fromDegrees(...v.pos);
let point = viewer.entities.add({
position: pos,
billboard: {
image: "/offline_data/newscene.png",
// width: 16,
// height: 16,
},
});
//給point對象綁定一些額外的數據
point.extraData = {
name: v.name,
pos: pos,
info: v.info,
pic: v.pic,
};
});
viewer.camera.setView({
destination:bmgl.Cartesian3.fromDegrees(104.14281724669924,30.243039581360712,38497.929384911135),
orientation:{
heading:6.197491954720128,
pitch:-0.6900354054675653,
roll:0.0017327513588600851,
}
})
},
},
beforeDestroy() {
viewer.destroy();
viewer = null;
},
});
};
</script>
</body>
</html>