<!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="http://www.bigemap.com/Public/js/3d/circleWave.js"></script>
<!-- 墙体特效 -->
<script src="/bmgl/border/wall.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
/* background: url("/bmgl/borderbg.png") no-repeat; */
/* background-size: cover; */
}
</style>
<title>遂宁市卫图</title>
</head>
<body>
<div id="container"></div>
<script>
let arr = [
[105.63423157, 30.51347018, 0],
[105.4083252, 30.83149788, 0],
[105.26550293, 30.5220473, 0],
];
bmgl.Config.HTTP_URL = "http://bigemap.com:9000";
window.viewer = new bmgl.Viewer("container", {
mapId: "bigemap.brcmean6",
// terrainId: "bigemap.3vom3sxx",
orderIndependentTranslucency: false,
contextOptions: {
webgl: {
alpha: true,
},
},
});
viewer.camera.setView({
destination: bmgl.Rectangle.fromDegrees(
105.05606079101562,
30.17629623413086,
105.99750518798828,
31.163055419921875
),
});
if (bmgl.FeatureDetection.supportsImageRenderingPixelated()) {
//判断是否支持图像渲染像素化处理
viewer.resolutionScale = window.devicePixelRatio;
}
viewer.imageryLayers.addImageryProvider(
new bmgl.SingleTileImageryProvider({
url: "/bmgl/border/calib.png",
rectangle: new bmgl.Rectangle.fromDegrees(
104.63653564,
30.05720849,
106.25427246,
31.29498105
),
})
);
viewer.imageryLayers.addImageryProvider(
new bmgl.SingleTileImageryProvider({
url: "/bmgl/border/calib-value.png",
rectangle: new bmgl.Rectangle.fromDegrees(
104.66125488,
30.08573123,
106.21994019,
31.26681325
),
})
);
viewer.imageryLayers.addImageryProvider(
new bmgl.SingleTileImageryProvider({
url: "/bmgl/border/calib-dir.png",
rectangle: new bmgl.Rectangle.fromDegrees(
104.66125488,
30.08573123,
106.21994019,
31.26681325
),
})
);
window.viewer = viewer;
viewer.scene.fxaa = true;
viewer.scene.postProcessStages.fxaa.enabled = true;
viewer.scene.skyBox.show = false; //隐藏天空盒子
// viewer.scene.backgroundColor = new bmgl.Color(0.0, 0.0, 0.0, 0.0); //隐藏黑色背景
viewer.scene.backgroundColor = new bmgl.Color.fromCssColorString(
"#363635"
); //隐藏黑色背景
viewer.scene.globe.baseColor = new bmgl.Color.fromCssColorString(
"#363635"
); //替换球体默认蓝色
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; //雾
// 加载边界墙体
function loadWall() {
var promise = bmgl.KmlDataSource.load("/bmgl/border/snwt.kml");
promise
.then(function (dataSource) {
// viewer.dataSources.add(dataSource);
var entities = dataSource.entities.values;
var colorHash = {};
let wallArr = [];
let maxlength = 0;
for (let i = 0; i < entities.length; i++) {
var entity = entities[i];
if (entity.polygon) {
// console.log(entity.polygon.hierarchy.getValue().positions);
let aa =
entity.polygon.hierarchy.getValue()
.positions;
if (i == 0 && wallArr.length == 0) {
wallArr.push(...aa);
maxlength = wallArr.length;
} else {
if (aa.length >= maxlength) {
wallArr = [];
wallArr.push(...aa);
maxlength = aa.length;
}
}
}
}
viewer.entities.add({
wall: {
positions: wallArr,
minimumHeights: new Array(wallArr.length).fill(
0
),
maximumHeights: new Array(wallArr.length).fill(
3000
),
// material: bmgl.Color.fromCssColorString("#2a492c").withAlpha(0.9),
material: new bmgl.WallDiffuseMaterialProperty({
color: bmgl.Color.fromCssColorString(
"#2a492c"
).withAlpha(0.9),
}),
},
});
viewer.flyTo(viewer.entities);
})
.otherwise(function (error) {
//Display any errrors encountered while loading.
window.alert(error);
});
}
loadWall();
//加载点位特效
function loadWaveandEffect(viewer, arr) {
arr.forEach((position, index) => {
let circleWave = new CircleWave(
viewer,
`cirCleWave${index}`
);
circleWave.add(position, "#1FA8E3", 5000, 3000); //经纬度,颜色，半径，时间
viewer.entities.add({
position: bmgl.Cartesian3.fromDegrees(
position[0],
position[1],
400
),
billboard: {
image: "/bmgl/border/park.png",
scale: 0.2,
pixelOffset: new bmgl.Cartesian2(2, -12),
},
});
});
}
loadWaveandEffect(viewer, arr);
</script>
</body>
</html>
源码