<!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"
/>
<title>Primitive貼地多邊形</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;
}
</style>
</head>
<body>
<div id="app">
<div id="baseMap"></div>
</div>
<script>
window.viewer = null;
window.onload = () => {
new Vue({
el: "#app",
data() {
return {};
},
mounted() {
this.initMap();
},
methods: {
//初始化地圖
initMap() {
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:"bigemap.dc-terrain",
});
//創建路網相關的地圖圖層
let roadNet = new bmgl.ImageryLayer(
new bmgl.BMImageryProvider({
mapId: "bigemap.dc-street",
})
);
// 將圖層疊加到地球上
viewer.imageryLayers.add(roadNet);
this.loadPolygons();
},
//從kml數據中獲取到經緯度
loadPolygons() {
//kml數據加載
let promise = bmgl.KmlDataSource.load("/offline_data/fh.kml");
promise.then((dataSource) => {
let eneArr = dataSource.entities.values;
let allPolygon = [];
eneArr.forEach((v, i) => {
// console.log(`aaaa`,v,i);
if (v.polygon) {
// console.log("good",v,i);
let pos =
v.polygon.hierarchy.getValue()
.positions;
// console.log(pos,i);
let arr = [];
pos.forEach((v, i) => {
let pos =
bmgl.Cartographic.fromCartesian(
v
);
let lng = bmgl.Math.toDegrees(
pos.longitude
);
let lat = bmgl.Math.toDegrees(
pos.latitude
);
arr.push([lng, lat]);
});
allPolygon.push(arr);
}
});
this.creatRiver(allPolygon);
});
},
//創建貼地的多邊形
creatRiver(arr) {
let instances = [];
arr.forEach((v, i) => {
let polygon1 = new bmgl.PolygonGeometry({
polygonHierarchy: new bmgl.PolygonHierarchy(
bmgl.Cartesian3.fromDegreesArray(
v.flat()
)
),
extrudedHeight: 0,
height: 0,
vertexFormat:
bmgl.EllipsoidSurfaceAppearance
.VERTEX_FORMAT,
});
let River1 = new bmgl.GroundPrimitive({
geometryInstances:
new bmgl.GeometryInstance({
geometry: polygon1,
}),
appearance:
new bmgl.EllipsoidSurfaceAppearance({
aboveGround: true,
}),
show: true,
});
//設置多邊形材質
let River1_Material = new bmgl.Material({
fabric: {
type: "Water",
uniforms: {
normalMap: "/offline_data/water.jpg",
frequency: 100.0,
animationSpeed: 0.01,
amplitude: 10.0,
},
},
});
let scene = viewer.scene;
River1.appearance.material = River1_Material;
scene.primitives.add(River1); //添加到場景
});
viewer.camera.setView({
destination: bmgl.Cartesian3.fromDegrees(
112.39700317,
37.6209621,
10000
),
});
},
},
beforeDestroy() {
viewer.destroy();
viewer = null;
},
});
};
</script>
</body>
</html>