<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8' />
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link href='http://www.bjxdny.cn:9000/bigemap-gl.js/v1.1.0/Widgets/widgets.css' rel='stylesheet' />
<script src='http://www.bjxdny.cn:9000/bigemap-gl.js/v1.1.0/bigemap-gl.js'></script>
<script src="https://cdn.bootcdn.net/ajax/libs/dat-gui/0.7.9/dat.gui.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.bmgl-widget-credits {
display: none
}
#my-gui-container {
position: absolute;
left: 20px;
top: 0;
}
</style>
<title>part_test</title>
</head>
<body>
<div id='container'></div>
<div id="my-gui-container"></div>
<script>
bmgl.Config.HTTP_URL = 'http://www.bjxdny.cn:9000';
var viewer = new bmgl.Viewer('container', {
mapId: 'bigemap.arcgis-satellite',
shouldAnimate: true,
requestRenderMode: true, //及時更新
});
// viewer.imageryLayers.add(new bmgl.ImageryLayer(new bmgl.BMImageryProvider({
// mapId: 'bigemap.tian2-terrainstreets-c',
// })));
var FizzyText = function () {
this.useTerrian = true
this.togleTerrian = function () {
this.useTerrian = !this.useTerrian;
viewer.scene.globe.depthTestAgainstTerrain = this.useTerrian;
console.log(56, this.useTerrian, viewer.scene.globe.depthTestAgainstTerrain);
};
this.height = 113;
this.color = [0, 128, 255, 0.3];
this.backCamera = function () { viewer.flyTo(tilesets) };
};
var text = new FizzyText();
var gui = new dat.GUI({ autoPlace: false });
var customContainer = document.getElementById('my-gui-container');
customContainer.appendChild(gui.domElement);
gui.add(text, 'togleTerrian').name('切換地形遮擋狀態');
var heightControl = gui.add(text, 'height', -300, 300, 10).name('高度');
gui.add(text, 'backCamera').name('飛向模型');
var array = [117.704, 39.82
, 117.64, 39.805
, 117.596, 39.794
, 117.555, 39.8
, 117.5, 39.79
, 117.445, 39.782
, 117.424, 39.775
, 117.374, 39.785
, 117.337, 39.799
, 117.299, 39.812
, 117.263, 39.845
, 117.233, 39.862
, 117.202, 39.88
, 117.183, 39.885
, 117.117, 39.912
, 117.058, 39.931
, 116.999, 39.939
, 116.954, 39.945
, 116.914, 39.955];
// var scene = viewer.scene;
// var handler = new bmgl.ScreenSpaceEventHandler(scene.canvas);
// var ellipsoid = scene.globe.ellipsoid;
// handler.setInputAction(function (movement) {
// var cartesian = viewer.camera.pickEllipsoid(movement.position, ellipsoid);//movement.endPosition
// if (cartesian) {
// //將笛卡爾坐標轉換為地理坐標
// var cartographic = bmgl.Cartographic.fromCartesian(cartesian);
// var longitudeString = bmgl.Math.toDegrees(cartographic.longitude).toFixed(3);
// var latitudeString = bmgl.Math.toDegrees(cartographic.latitude).toFixed(3);
// //獲取相機高度
// var height = Math.ceil(viewer.camera.positionCartographic.height);
// text.center = `${longitudeString}, ${latitudeString}, ${height}`
// console.log(longitudeString, latitudeString, height);
// // array.push([longitudeString, latitudeString])
// }
// }, bmgl.ScreenSpaceEventType.LEFT_CLICK);
//啟用地形遮擋
var tilesets = new bmgl.BM3DTileset({
url: '/bmgl/data/road2/tileset.json'
});
tilesets.readyPromise.then(function (tileset) {
// tileset.luminanceAtZenith=0.4;//設置天空光照
viewer.scene.primitives.add(tileset);
default_HeadingPitchRange = new bmgl.HeadingPitchRange(0.0, -0.5, tileset.boundingSphere.radius * 2.0);
viewer.zoomTo(tileset, default_HeadingPitchRange);
var cartographic = bmgl.Cartographic.fromCartesian(tileset.boundingSphere.center);
console.log(cartographic.longitude, cartographic.latitude, 92, delta_lng, delta_lat);
var delta_lng = 0,
delta_lat = 0;
var surface = bmgl.Cartesian3.fromRadians(cartographic.longitude + delta_lng, cartographic.latitude +
delta_lat, 0.0);
var offset = bmgl.Cartesian3.fromRadians(cartographic.longitude + delta_lng, cartographic.latitude +
delta_lat, 30);
var translation = bmgl.Cartesian3.subtract(offset, surface, new bmgl.Cartesian3());
tileset.modelMatrix = bmgl.Matrix4.fromTranslation(translation);
heightControl.onFinishChange(function (value) {
var surface = bmgl.Cartesian3.fromRadians(cartographic.longitude + delta_lng, cartographic.latitude +
delta_lat, 0.0);
var offset = bmgl.Cartesian3.fromRadians(cartographic.longitude + delta_lng, cartographic.latitude +
delta_lat, value);
var translation = bmgl.Cartesian3.subtract(offset, surface, new bmgl.Cartesian3());
tileset.modelMatrix = bmgl.Matrix4.fromTranslation(translation);
});
}).otherwise(function (error) {
console.log(error);
});
var glowingLine = viewer.entities.add({
name: 'line',
polyline: {
positions: bmgl.Cartesian3.fromDegreesArray(array),
width: 10,
material: bmgl.Color.RED.withAlpha(0.6),
clampToGround: true,
classificationType: bmgl.ClassificationType.TERRAIN
}
});
var pointArray = [];
for (let i = 0; i < array.length; i += 2) {
const element = [array[i], array[i + 1]];
var point = viewer.entities.add({
position: bmgl.Cartesian3.fromDegrees(...element),
point: {
pixelSize: 20,
color: new bmgl.CallbackProperty(function color(time, result) {
var txf = Math.floor(time.secondsOfDay);
var result = ""
if (txf % 2 == 0) {//間隔兩秒變換
result = bmgl.Color.GREEN;
} else {
result = bmgl.Color.BLUE;
}
return result;
}, false),
disableDepthTestDistance: 3000,
distanceDisplayCondition: new bmgl.DistanceDisplayCondition(0, 6000),
},
label: {
scale: 1,
heightReference: bmgl.HeightReference.CLAMP_TO_GROUND,
fillColor: bmgl.Color.BLUE,
text: `xx線路${(i + 2) / 2}號監測點`,
verticalOrigin: bmgl.VerticalOrigin.BOTTOM,
pixelOffset: new bmgl.Cartesian2(0, -15),
distanceDisplayCondition: new bmgl.DistanceDisplayCondition(0, 3000),
},
});
pointArray.push(point)
}
</script>
</body>
</html>