<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel='stylesheet' />
<script src='http://bigemap.com:9000/bigemap-gl.js/v1.1.0/bigemap-gl.js'></script>
</head>
<style>
* {
margin: 0;
padding: 0;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
<body>
<div id="container"></div>
<div id="loadingOverlay">
<h1>Loading...</h1>
</div>
</body>
<script>
bmgl.Config.HTTP_URL = 'http://bigemap.com:9000';
var viewer = new bmgl.Viewer('container',{mapId: 'bigemap.zhongkexingtu'});
viewer.clock.shouldAnimate = true;
//起點經緯度
var startLatitude = 35;
var startLongitude = -120;
var endLongitude;
//立即執行
var startTime = bmgl.JulianDate.now();
// Add a polyline to the scene. Positions are dynamic.
var isConstant = false;
//添加線段
var redLine = viewer.entities.add({
polyline: {
// This callback updates positions each frame.
positions: new bmgl.CallbackProperty(function (time, result) {
endLongitude =
startLongitude +
0.001 * bmgl.JulianDate.secondsDifference(time, startTime);
return bmgl.Cartesian3.fromDegreesArray(
[startLongitude, startLatitude, endLongitude, startLatitude],
bmgl.Ellipsoid.WGS84,
result
);
}, isConstant),
width: 5,
material: bmgl.Color.RED,
},
});
var startCartographic = bmgl.Cartographic.fromDegrees(
startLongitude,
startLatitude
);
// use scratch object to avoid new allocations per frame.
var endCartographic = new bmgl.Cartographic();
var scratch = new bmgl.Cartographic();
var geodesic = new bmgl.EllipsoidGeodesic();
// Calculate the length of the line
function getLength(time, result) {
// Get the end position from the polyLine's callback.
var endPoint = redLine.polyline.positions.getValue(time, result)[1];
endCartographic = bmgl.Cartographic.fromCartesian(endPoint);
geodesic.setEndPoints(startCartographic, endCartographic);
var lengthInMeters = Math.round(geodesic.surfaceDistance);
return (lengthInMeters / 1000).toFixed(1) + " km";
}
function getMidpoint(time, result) {
// Get the end position from the polyLine's callback.
var endPoint = redLine.polyline.positions.getValue(time, result)[1];
endCartographic = bmgl.Cartographic.fromCartesian(endPoint);
geodesic.setEndPoints(startCartographic, endCartographic);
var midpointCartographic = geodesic.interpolateUsingFraction(
0.5,
scratch
);
return bmgl.Cartesian3.fromRadians(
midpointCartographic.longitude,
midpointCartographic.latitude
);
}
// Label the polyline with calculated length.
var label = viewer.entities.add({
position: new bmgl.CallbackProperty(getMidpoint, isConstant),
label: {
// This callback updates the length to print each frame.
text: new bmgl.CallbackProperty(getLength, isConstant),
font: "20px sans-serif",
pixelOffset: new bmgl.Cartesian2(0.0, 20),
},
});
// Keep the view centered.
viewer.trackedEntity = label;
</script>
</html>