<!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"
/>
<!-- 引入echarts -->
<script src="/offline_data/echarts.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: 65%;
}
#echartsMap {
width: 100%;
height: 35%;
background-color: rgba(39, 44, 54, 0.9);
overflow: hidden;
}
.tools {
position: absolute;
z-index: 9;
top: 40px;
right: 60px;
width: 200px;
height: 40px;
display: flex;
align-items: center;
}
</style>
</head>
<body>
<div id="app">
<div id="baseMap"></div>
<div id="echartsMap"></div>
</div>
<script>
window.viewer = null;
let linesArr = [
[102.1261597, 30.76446533],
[102.2689819, 30.78643799],
[102.3019409, 30.84686279],
[102.3912048, 30.96221924],
[102.5354004, 30.98144531],
[102.6425171, 31.13800049],
[102.6287842, 31.26434326],
[102.9542542, 31.28082275],
[103.0133057, 31.04736328],
[102.7867127, 30.8454895],
[102.9212952, 30.6312561],
[103.2220459, 30.66558838],
[103.2110596, 30.94985962],
[103.3909607, 30.98007202],
];
let newArr = new Array(14).fill(0);
let lb = newArr.map((v, i) => {
return `${i + 1}號點位`;
});
window.posArr = [];
window.onload = () => {
new Vue({
el: "#app",
data() {
return {
showText: "暫無高程數據信息",
echartsData: [],
labelData: [],
tableShow: false,
};
},
mounted() {
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-satellite",
infoBox: false,
selectionIndicator: false,
requestRenderMode: false,
// terrainId指定離線服務器上發布的高程服務的id
terrainId: "bigemap.dc-terrain",
});
if (
bmgl.FeatureDetection.supportsImageRenderingPixelated()
) {
viewer.resolutionScale =
window.devicePixelRatio;
}
//開啟抗鋸齒,讓圖像更加順滑
viewer.scene.postProcessStages.fxaa.enabled = true;
viewer.terrainProvider.readyPromise
.then(function (terrainProvider) {
console.log("地形加載完成");
// 在這里執行地形加載完成后的操作
_this.loadLines();
})
.otherwise(function (error) {
console.error("地形加載失敗", error);
});
// this.loadLines();
},
loadLines() {
let bl = viewer.entities.add({
polyline: {
positions: bmgl.Cartesian3.fromDegreesArray(
linesArr.flat()
),
width: 4.0,
material:
bmgl.Color.fromCssColorString(
"#009efc"
),
clampToGround: true,
},
});
viewer.camera.flyTo({
destination: bmgl.Cartesian3.fromDegrees(
102.84814348201657,
31.097350000050334,
11074.133580966802
),
orientation: {
heading: 0.22449683617942018,
pitch: -0.3883918330117684,
roll: 6.2678425339793336,
},
complete: () => {
setTimeout(()=>{
this.computedHeight();
},1000)
},
});
},
computedHeight() {
linesArr.forEach((v, i) => {
let cartesian = bmgl.Cartographic.fromDegrees(
v[0],
v[1]
);
window.posArr.push(cartesian);
});
// console.log(posArr, "linesArr");
this.getNowheight(window.posArr, 0);
},
//根據提供的位置計算高度
getNowheight(posArr, count) {
let item = posArr.shift();
// console.log("count", count);
var _this = this;
if (item) {
let height = viewer.scene.globe.getHeight(item);
// console.log(`height`, height);
if (height < 0 || !height) {
} else {
_this.echartsData.push({
name: `${lb[count]}`,
value: parseFloat(height.toFixed(2)),
});
}
count += 1;
_this.getNowheight(window.posArr, count);
} else {
_this.createEaherts(
_this.labelData,
_this.echartsData
);
}
},
createEaherts(labelData, optionData) {
if(optionData.length == 0) return
let chartDom =
document.getElementById("echartsMap");
let myChart = echarts.init(chartDom);
let option;
option = {
title: {
text: "點位對應高程值",
textStyle: {
color: "#fff",
fontFamily: "楷體",
fontStyle: "normal",
fontWeight: "bold",
},
left: "center",
top: "2px",
},
grid: {
left: 15,
right: 15,
top: 44,
bottom: 10,
containLabel: true,
},
tooltip: {
trigger: "item",
formatter: (res) => {
let index = res.dataIndex;
let pos = linesArr[index];
let val = res.data.value;
// console.log("結果",index,pos,val);
let string = `${index + 1}點位信息如下:<br>` +
`經度:${pos[0]}<br>` +
`緯度:${pos[1]}<br>` +
`高度:${val}米`
// console.log("結果",index,pos,val,string);
return string;
;
},
},
xAxis: {
type: "category",
data: lb,
axisLabel: {
interval: 0,
rotate: 40,
color: "#ffffff",
fontSize: 12,
},
},
yAxis: {
type: "value",
name: "高程值",
axisLabel: {
color: "#ffffff",
fontSize: 12,
},
nameTextStyle: {
color: "#fff",
fontFamily: "楷體",
fontStyle: "normal",
fontWeight: "bold",
},
},
series: [
{
data: optionData,
type: "bar",
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
label: {
color: "white",
fontSize: 12,
},
itemStyle: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "#83bff6",
},
{
offset: 0.5,
color: "#188df0",
},
{
offset: 1,
color: "#188df0",
},
]
),
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "#2378f7",
},
{
offset: 0.7,
color: "#2378f7",
},
{
offset: 1,
color: "#83bff6",
},
]
),
},
},
},
{
data: optionData,
type: "line",
itemStyle: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "#83bff6",
},
{
offset: 0.5,
color: "#188df0",
},
{
offset: 1,
color: "#188df0",
},
]
),
},
},
],
legend: {},
};
option && myChart.setOption(option);
},
},
beforeDestroy() {
viewer.destroy();
viewer = null;
},
});
};
</script>
</body>
</html>