<!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="/offline_data/xzq/bmgl-plot.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="http://www.bigemap.com/Public/js/3d/circleWave.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
background: url("/offline_data/xzq/bg.jpg") no-repeat;
background-size: cover;
}
.bmgl-widget-credits {
display: none;
}
.mask {
position: absolute;
left: 0;
top: 0;
z-index: 999;
width: 100%;
height: 100%;
pointer-events: none;
background-image: radial-gradient(
rgba(139, 138, 138, 0.12) 20%,
rgba(65, 57, 57, 0.56) 50%,
rgb(17, 16, 16) 80%
);
}
</style>
<title>Google Map Streets</title>
</head>
<body>
<!-- <div class="mask"></div> -->
<div id="container"></div>
<script>
bmgl.Config.HTTP_URL = "http://bigemap.com:9000";
var viewer = new bmgl.Viewer("container", {
mapId: "bigemap.zhongkexingtu",
infoBox: false,
selectionIndicator: false,
orderIndependentTranslucency: false,
contextOptions: {
webgl: {
alpha: true,
},
},
requestRenderMode: false,
});
let cdarr = [
{
label: "简阳市",
pos: [104.547644, 30.410937],
},
{
label: "武侯区",
pos: [104.043246, 30.641849],
},
{
label: "邛崃市",
pos: [103.46204996, 30.41276186],
},
{
label: "都江堰",
pos: [103.647193, 30.988763],
},
];
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.scene.globe.show = false;
// 禁用星光
viewer.scene.skyAtmosphere.show = false;
if (bmgl.FeatureDetection.supportsImageRenderingPixelated()) {
viewer.resolutionScale = window.devicePixelRatio;
}
//开启抗锯齿,让图像更加顺滑
viewer.scene.postProcessStages.fxaa.enabled = true;
let max = null;
var promise = bmgl.KmlDataSource.load("/offline_data/xzq/cd.kml");
promise
.then(function (dataSource) {
var entities = dataSource.entities.values;
var colorHash = {};
for (var i = 0; i < entities.length; i++) {
var entity = entities[i];
// var name = entity.name;
// console.log(`enetity`,entity);
if (entity.polygon) {
let dd =
entity.polygon.hierarchy.getValue().positions;
if (max == null) {
max = dd;
} else {
if (max.length < dd.length) {
max = dd;
}
}
}
}
// console.log(max, "max");
let arr = [];
max.forEach((v, i) => {
let ellipsoid = bmgl.Ellipsoid.WGS84;
let cartographic = ellipsoid.cartesianToCartographic(v);
let lng = bmgl.Math.toDegrees(cartographic.longitude);
let lat = bmgl.Math.toDegrees(cartographic.latitude);
arr.push([lng, lat]);
});
let myWall = viewer.entities.add({
wall: {
positions: bmgl.Cartesian3.fromDegreesArray(
arr.flat()
),
minimumHeights: new Array(arr.length).fill(0),
maximumHeights: new Array(arr.length).fill(20000),
material: new bmgl.BMMaterial.WallFocusMaterial({
image: "/offline_data/xzq/wall_color.png",
color: bmgl.Color.fromCssColorString("#0d8dc9"),
repeat: 1,
}),
outline: false,
},
polygon: {
hierarchy: bmgl.Cartesian3.fromDegreesArray(
arr.flat()
),
extrudedHeight: 20000,
height: 19999.9,
material: new bmgl.ImageMaterialProperty({
image: "/offline_data/xzq/cd.png",
repeat: new bmgl.Cartesian2(1, 1),
}),
outline: true,
outlineColor:
bmgl.Color.fromCssColorString("#f7f7f7"),
outlineWidth: 100.0,
// material:bmgl.Color.RED,
},
});
viewer.zoomTo(myWall);
initBillboards();
})
.otherwise(function (error) {
window.alert(error);
});
function initBillboards() {
cdarr.forEach((v, i) => {
// let
let m1 = viewer.entities.add({
id: "bl" + i,
position: bmgl.Cartesian3.fromDegrees(...v.pos, 24300),
// position: new bmgl.CallbackProperty(getHeight(v), false),
billboard: {
image:
(i + 1) % 3 == 0
? "/offline_data/xzq/yellow.png"
: (i + 1) % 3 == 1
? "/offline_data/xzq/black.png"
: "/offline_data/xzq/red.png",
scale: 1,
pixelOffset: new bmgl.Cartesian2(2, -12),
},
label: {
text: v.label,
color: "#fcfcfc",
font: "20px 楷体",
pixelOffset: new bmgl.Cartesian2(2, -22),
},
});
let m2 = viewer.entities.add({
position: bmgl.Cartesian3.fromDegrees(...v.pos, 23300),
ellipse: {
semiMajorAxis: 5000,
semiMinorAxis: 5000,
height: 20000,
heightReference: bmgl.HeightReference.NONE,
material: new bmgl.BMMaterial.CircleWaveMaterial({
color: bmgl.Color.fromCssColorString(
"#197f8d"
).withAlpha(0.8),
speed: 10,
count: 5,
}),
},
});
getHeight(m1, v);
});
}
function getHeight(entity, v) {
let i = 0;
let height = 24300;
let lng = v.pos[0];
let lat = v.pos[1];
let isOK = false;
setInterval(() => {
// i += 500;
console.log("iii", i);
if (!isOK) {
// i = 0;
entity.position = bmgl.Cartesian3.fromDegrees(
lng,
lat,
height + 600
);
isOK = true;
viewer.scene.requestRender();
// return bmgl.Cartesian3.fromDegrees(lng, lat, 23300);
} else {
entity.position = bmgl.Cartesian3.fromDegrees(
lng,
lat,
height - 600
);
isOK = false;
viewer.scene.requestRender();
// return bmgl.Cartesian3.fromDegrees(
// lng,
// lat,
// height + i
// );
}
}, 500);
}
</script>
</body>
</html>
源码