<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<link
href="http://m.bjxdny.cn:9000/bigemap-gl.js/v1.1.0/Widgets/widgets.css"
rel="stylesheet"
/>
<script src="http://m.bjxdny.cn:9000/bigemap-gl.js/v1.1.0/bigemap-gl.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
background-image: url("/bmgl/3dksh/bj.jpg");
background-repeat: no-repeat;
background-size: 100%;
}
.bmgl-widget-credits {
display: none;
}
</style>
<title>part_test</title>
</head>
<body>
<div id="container"></div>
<script>
bmgl.Config.HTTP_URL = 'http://ua.bigemap.com:30081/bmsdk/';
var viewer = new bmgl.Viewer("container", {
mapId: "bigemap.dc-satellite",
requestRenderMode: false,
orderIndependentTranslucency: false,
contextOptions: {
webgl: {
alpha: true,
},
},
});
viewer.BMWidget.screenSpaceEventHandler.removeInputAction(
bmgl.ScreenSpaceEventType.LEFT_CLICK
);
var scene = viewer.scene;
var handler = new bmgl.ScreenSpaceEventHandler(scene.canvas);
var ellipsoid = scene.globe.ellipsoid; //得到當前三維場景的橢球體
//關閉地圖元素
viewer.scene.globe.show = false;
viewer.scene.skyBox.show = false; //隱藏天空盒子
viewer.scene.backgroundColor = new bmgl.Color(0.0, 0.0, 0.0, 0.0); //隱藏黑色背景
viewer.scene.globe.baseColor = new bmgl.Color(0, 0, 0, 0); //替換球體默認藍色
viewer.scene.globe.enableLighting = false; //隱藏太陽
viewer.shadows = false;
viewer.scene.sun.show = false; //或者viewer.scene.sun.destroy();
viewer.scene.moon.show = false; //隱藏月亮
viewer.scene.skyAtmosphere.show = false; //大氣圈
viewer.scene.fog.enable = false; //霧
viewer.imageryLayers.remove(viewer.imageryLayers.get(0), false);
//加載省市
var promise = bmgl.KmlDataSource.load("/bmgl/3dksh/sichuan.kml");
promise
.then(function (dataSource) {
viewer.dataSources.add(dataSource);
//Get the array of entities
var entities = dataSource.entities.values;
var colorHash = {};
for (var i = 0; i < entities.length; i++) {
//For each entity, create a random color based on the state name.
//Some states have multiple entities, so we store the color in a
//hash so that we use the same color for the entire state.
var entity = entities[i];
if (entity.polygon) {
var name = entity.name;
viewer.entities.add({
polygon: {
hierarchy: entity.polygon.hierarchy.getValue(),
outline: true,
material: new bmgl.ImageMaterialProperty({
image: "/bmgl/3dksh/sc.png",
repeat: new bmgl.Cartesian2(1, 1),
}),
extrudedHeight: 20000,
},
});
}
}
viewer.flyTo(viewer.entities);
})
.otherwise(function (error) {
//Display any errrors encountered while loading.
window.alert(error);
});
var promise = bmgl.KmlDataSource.load("/bmgl/3dksh/soncity.kml");
promise
.then(function (dataSource) {
viewer.dataSources.add(dataSource);
//Get the array of entities
var entities = dataSource.entities.values;
var colorHash = {};
for (var i = 0; i < entities.length; i++) {
//For each entity, create a random color based on the state name.
//Some states have multiple entities, so we store the color in a
//hash so that we use the same color for the entire state.
var entity = entities[i];
if (entity.polygon) {
var name = entity.name;
//畫多邊形
viewer.entities.add({
name: name,
type: "polygon",
polygon: {
hierarchy: entity.polygon.hierarchy.getValue(),
outline: true,
material: new bmgl.Color(0, 0, 0, 0.1),
extrudedHeight: 21000,
},
});
//畫邊界線
let xyzs = entity.polygon.hierarchy.getValue();
//添加標注
drawLabel(xyzs.positions, name);
//畫線
let latlngs = [];
xyzs.positions.forEach((v) => {
let tmplatlng = xyz2latlng(v);
tmplatlng.forEach((l) => {
latlngs.push(l);
});
});
drawLine(latlngs);
}
}
viewer.flyTo(viewer.entities);
})
.otherwise(function (error) {
//Display any errrors encountered while loading.
window.alert(error);
});
//記錄上一個點擊的entity
let lastentity = "";
handler.setInputAction(function (e) {
var entity = viewer.scene.pick(e.position);
console.log(entity);
console.log(lastentity);
if (entity != undefined) {
if (entity.id.type == "polygon") {
if (lastentity != "") {
lastentity.material = new bmgl.Color(0, 0, 0, 0.1);
}
lastentity = entity.id.polygon;
lastentity.material = new bmgl.Color(0.4, 0, 0, 0.8);
console.log(entity.id.name);
}
} else {
if (lastentity != "") {
lastentity.material = new bmgl.Color(0, 0, 0, 0.1);
}
lastentity = "";
}
}, bmgl.ScreenSpaceEventType.LEFT_CLICK);
function xyz2latlng(xyz, height = 20100) {
let wgs84 = ellipsoid.cartesianToCartographic(xyz);
let lng = bmgl.Math.toDegrees(wgs84.longitude);
let lat = bmgl.Math.toDegrees(wgs84.latitude);
return [lng, lat, height];
}
function drawLine(latlngs) {
var orangeOutlined = viewer.entities.add({
type: "line",
polyline: {
positions: bmgl.Cartesian3.fromDegreesArrayHeights(latlngs),
width: 5,
material: new bmgl.PolylineOutlineMaterialProperty({
color: bmgl.Color.ORANGE,
outlineWidth: 2,
outlineColor: bmgl.Color.BLACK,
}),
},
});
}
function drawLabel(polyPositions, name) {
let polyCenter = bmgl.BoundingSphere.fromPoints(polyPositions).center;
polyCenter = bmgl.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);
let xyz = new bmgl.Cartesian3(polyCenter.x, polyCenter.y, polyCenter.z);
let wgs84 = ellipsoid.cartesianToCartographic(xyz);
let lng = bmgl.Math.toDegrees(wgs84.longitude);
let lat = bmgl.Math.toDegrees(wgs84.latitude);
viewer.entities.add({
type: "label",
position: bmgl.Cartesian3.fromDegrees(lng, lat, 40000),
label: {
scale: 0.6,
showBackground: true,
backgroundColor: new bmgl.Color(0.165, 0.165, 0.165, 0.5),
fillColor: bmgl.Color.WHITE,
text: name,
disableDepthTestDistance: 900000,
},
});
}
</script>
</body>
</html>