<!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>
<style>
body {
margin: 0;
padding: 0;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.bmgl-widget-credits {
display: none;
}
</style>
<title>Google Map Streets</title>
</head>
<body>
<div id="container"></div>
<script>
bmgl.Config.HTTP_URL = "http://bigemap.com:9000";
window.viewer = new bmgl.Viewer("container", {
mapId: "bigemap.zhongkexingtu",
});
viewer.BMWidget.screenSpaceEventHandler.removeInputAction(
bmgl.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
);
viewer.BMWidget.screenSpaceEventHandler.removeInputAction(
bmgl.ScreenSpaceEventType.LEFT_CLICK
);
// 是否支持圖像渲染像素化處理
if (bmgl.FeatureDetection.supportsImageRenderingPixelated()) {
viewer.resolutionScale = window.devicePixelRatio;
}
viewer.scene.postProcessStages.fxaa.enabled = true;
// viewer.imageryLayers.removeAll()
var promise = bmgl.KmlDataSource.load("/bmgl/kml/lsk.kml");
promise
.then(function (dataSource) {
// viewer.dataSources.add(dataSource);
//Get the array of entities
window.arrays = [];
window.all = [];
var entities = dataSource.entities.values;
for (var i = 0; i < entities.length; i++) {
var entity = entities[i];
if (entity.polygon) {
var name = entity.name;
let aa =
entity.polygon.hierarchy.getValue().positions;
window.arrays = [];
aa.forEach((item) => {
var cartographic =
bmgl.Cartographic.fromCartesian(item);
window.arrays.push([
bmgl.Math.toDegrees(cartographic.longitude),
bmgl.Math.toDegrees(cartographic.latitude),
]);
});
// console.log(`window`, window.arrays);
getRec(window.arrays);
window.all.push(getRec(window.arrays));
}
}
// console.log(`all`, window.all.flat());
let aa = getRec(window.all.flat()).flat();
// console.log(`zzz`, aa);
const rec = {
rectangle: new bmgl.RectangleGraphics({
coordinates: new bmgl.Rectangle(
bmgl.Math.toRadians(aa[0]),
bmgl.Math.toRadians(aa[1]),
bmgl.Math.toRadians(aa[2]),
bmgl.Math.toRadians(aa[3])
),
material: new bmgl.ImageMaterialProperty({
image: "/bmgl/images/touming.png",
repeat: new bmgl.Cartesian2(1, 1),
transparent: true,
// color: bmgl.Color.WHITE.withAlpha(0.5)
}),
// show:false,
extrudedHeight: 2100,
fill: true,
// shadows:ShadowMode.ENABLED
// height: 2000
// zIndex: 666
// outline: true,
// outlineColor: bmgl.Color.RED,
// heightReference: bmgl.HeightReference.CLAMP_TO_GROUND
}),
};
drawLine();
drawWall();
viewer.entities.add(rec);
viewer.flyTo(viewer.entities);
})
.otherwise(function (error) {
window.alert(error);
});
//繪制外接矩形
function getRec(array) {
let xmin, ymin, xmax, ymax;
for (let i in array) {
const coordinates = array[i];
const x = coordinates[0];
const y = coordinates[1];
if (!xmin) {
xmin = x;
} else {
if (x * 1000000 < xmin * 1000000) {
xmin = x;
}
}
if (!ymin) {
ymin = y;
} else {
if (y * 1000000 < ymin * 1000000) {
ymin = y;
}
}
if (!xmax) {
xmax = x;
} else {
if (x * 1000000 > xmax * 1000000) {
xmax = x;
}
}
if (!ymax) {
ymax = y;
} else {
if (y * 1000000 > ymax * 1000000) {
ymax = y;
}
}
}
console.log(xmin, ymin, xmax, ymax);
return [
[xmin, ymin],
[xmax, ymax],
];
}
//繪制多邊形
function drawLine() {
var promise = bmgl.KmlDataSource.load("/bmgl/kml/lskxj.kml");
promise
.then(function (dataSource) {
var entities = dataSource.entities.values;
var colorHash = {};
for (var i = 0; i < entities.length; i++) {
var entity = entities[i];
if (entity.polygon) {
var name = entity.name;
//畫多邊形
viewer.entities.add({
name: name,
type: "polygon",
polygon: {
hierarchy:
entity.polygon.hierarchy.getValue(),
material: bmgl.Color.AQUA,
width: 10,
// material:bmgl.Color.BLACK.withAlpha(0.1),
extrudedHeight: 2000,
// height: 2100,
fill: true,
},
});
}
}
})
.otherwise(function (error) {
window.alert(error);
});
}
//繪制頂層的多邊形
function drawWall() {
var promise = bmgl.KmlDataSource.load("/bmgl/kml/lskxj.kml");
promise
.then(function (dataSource) {
var entities = dataSource.entities.values;
var colorHash = {};
for (var i = 0; i < entities.length; i++) {
var entity = entities[i];
if (entity.polygon) {
var name = entity.name;
console.log(name, "name");
//畫多邊形
viewer.entities.add({
name: name,
type: "polygon",
polygon: {
hierarchy:
entity.polygon.hierarchy.getValue(),
width: 10,
material:
bmgl.Color.BLACK.withAlpha(0.1),
extrudedHeight: 2160,
// height: 2100,
fill: true,
},
});
}
}
})
.otherwise(function (error) {
window.alert(error);
});
}
viewer.scene.screenSpaceCameraController.minimumZoomDistance = 100;
let lastentity = "";
let handler = new bmgl.ScreenSpaceEventHandler(viewer.scene.canvas);
//設置點擊事件
handler.setInputAction(function (e) {
var entity = viewer.scene.pick(e.position);
console.log(entity, "xxx");
// 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);
</script>
</body>
</html>
源碼