<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<link
href="http://bigemap.com:9000/bigemap-gl.js/v1.1.0/Widgets/widgets.css"
rel="stylesheet"
/>
<script src="http://bigemap.com:9000/bigemap-gl.js/v1.1.0/bigemap-gl.js"></script>
<script src="/offline_data/newjunbiao/bmgl-plot.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.item {
position: absolute;
width: 120px;
height: 20px;
top: 20px;
left: 20px;
z-index: 9;
background-color: #59acff;
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
color: aliceblue;
cursor: pointer;
}
.itemnew {
position: absolute;
width: 120px;
height: 20px;
top: 20px;
left: 160px;
z-index: 9;
background-color: #59acff;
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
color: aliceblue;
cursor: pointer;
}
</style>
<title>電塔展示</title>
</head>
<body>
<div id="container">
<h5 class="item">隱藏電塔</h5>
<h5 class="itemnew">移除電塔</h5>
</div>
<script>
// bmgl.Config.HTTP_URL = "http://dl.bigemap.com:3000/";
bmgl.Config.HTTP_URL = "http://bigemap.com:9000";
var viewer = new bmgl.Viewer("container", {
terrainId: "bigemap.9af15d8e",
mapId: "bigemap.zhongkexingtu",
infoBox: false,
requestRenderMode: false,
});
viewer.scene.globe.depthTestAgainstTerrain = true;
if (bmgl.FeatureDetection.supportsImageRenderingPixelated()) {
viewer.resolutionScale = window.devicePixelRatio;
}
//開啟抗鋸齒,讓圖像更加順滑
viewer.scene.postProcessStages.fxaa.enabled = true;
viewer.camera.setView({
destination: new bmgl.Cartesian3.fromDegrees(
102.93000803809652,
31.263668004562916,
6680.595113634975
),
orientation: {
heading: 0.2542886321579614,
pitch: -0.5401534852811904,
roll: 6.281982467001406,
},
});
//點位數(shù)組
var points = [
{
lat: 31.298208236694,
lng: 102.937088012695,
height: 3109.68,
},
{
lat: 31.304662704468,
lng: 102.94189453125,
height: 3056.54,
},
{
lat: 31.312875747681,
lng: 102.94807434082,
height: 3014.36,
},
{
lat: 31.326953887939,
lng: 102.954597473145,
height: 2978.68,
},
{
lat: 31.34132194519,
lng: 102.961463928223,
height: 2964.41,
},
{
lat: 31.343667984009,
lng: 102.959060668945,
height: 3067,
},
{
lat: 31.353050231934,
lng: 102.966957092285,
height: 2779.69,
},
{
lat: 31.365070343018,
lng: 102.975883483887,
height: 2640.77,
},
{
lat: 31.380313873291,
lng: 102.980346679688,
height: 2685.66,
},
{
lat: 31.393795013428,
lng: 102.981376647949,
height: 2601.19,
},
{
lat: 31.404638290405,
lng: 102.982749938965,
height: 2470.08,
},
{
lat: 31.411962509155,
lng: 102.981719970703,
height: 2331.4,
},
];
// 模型的縮放大小
let scale = 10;
// 塔桿線配置
let lineConfig = {
url: "/offline_data/newjunbiao/towerTowloop.glb",
// 頂部線顏色
top: {
style: {
material:
bmgl.Color.fromCssColorString("yellow").withAlpha(
0.95
),
width: 1.0,
},
position: [{ z: 25.4 }], //頂點偏移量
},
// 側(cè)面線顏色
normal: {
low: 10, //表示下垂多少米
style: {
width: 2.0,
material:
bmgl.Color.fromCssColorString("red").withAlpha(
0.95
),
},
smoothSum: 15, //使用多少個點來平滑線
position: [
{ x: 4.55, y: 0, z: 13.75 },
{ x: 4.55, y: 0, z: 17.45 },
{ x: 4.55, y: 0, z: 17.45 + 3.7 },
{
x: -4.55,
y: 0,
z: 13.75,
},
{ x: -4.55, y: 0, z: 17.45 },
{ x: -4.55, y: 0, z: 17.45 + 3.7 },
],
},
};
lineConfig.top.position.map((v) => {
["z", "x", "y"].map((d) => {
if (v[d]) v[d] *= scale;
});
});
lineConfig.normal.position.map((v) => {
["z", "x", "y"].map((d) => {
if (v[d]) v[d] *= scale;
});
});
// 實例化TowerLine塔趕對象
let line = new bmgl.effect.TowerLine(viewer, lineConfig);
console.log("lines", line);
let towers = [];
//實例化電塔和label標簽
points.map((v, index) => {
let xh = index +1
let tw = new bmgl.effect.Tower(v, {
label: {
text: `${xh}號`,
eyeOffset: new bmgl.Cartesian3(0,0,-80),
verticalOrigin:bmgl.VerticalOrigin.MIDDLE,
font:"楷體 20px",
},
model: {
scale: scale,
heightReference: bmgl.HeightReference.CLAMP_TO_GROUND,
},
});
//掛載自己的一些額外的數(shù)據(jù)
tw.extraData = {
pos: v,
};
towers.push(tw);
});
//將數(shù)據(jù)賦值給電塔的towers
line.towers = towers;
console.log("myLine", line.towers);
let txt = document.querySelector(".item");
txt.addEventListener("click", () => {
if (line.show) {
line.show = false;
txt.innerText = "展示電塔";
} else {
txt.innerText = "隱藏電塔";
line.show = true;
}
});
//事件
var handler = new bmgl.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction((e) => {
// console.log();
let obj = viewer.scene.pick(e.position);
if (bmgl.defined(obj)) {
console.log("myObj", obj);
if (obj.instanceId) {
// instanceId 是點擊的電塔在points數(shù)組所在的下表index
let index = obj.instanceId;
let nowPos = line.towers[index];
console.log("now", nowPos.extraData);
}
}
}, bmgl.ScreenSpaceEventType.LEFT_CLICK);
document
.querySelector(".itemnew")
.addEventListener("click", function () {
// 移除所有primitive對象
viewer.scene.primitives.removeAll();
});
</script>
</body>
</html>