<!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>