<!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>part_test</title>
</head>
<body>
<div id='container'></div>
<script>
bmgl.Config.HTTP_URL = 'http://bigemap.com:9000';
var viewer = new bmgl.Viewer('container', {mapId: 'bigemap.zhongkexingtu',requestRenderMode:false,});
var lat = 30.598026044;
var lon = 114.302312702;
viewer.scene.globe.depthTestAgainstTerrain = true;
//取消双击事件
viewer.BMWidget.screenSpaceEventHandler.removeInputAction(bmgl.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
//设置homebutton的位置
bmgl.Camera.DEFAULT_VIEW_RECTANGLE =
bmgl.Rectangle.fromDegrees(lon - 1, lat - 1, lon + 1, lat + 1);
//设置初始位置
viewer.camera.setView({
destination: bmgl.Cartesian3.fromDegrees(lon, lat, 300000)
});
/*
流纹纹理线
color 颜色
duration 持续时间 毫秒
*/
function PolylineTrailLinkMaterialProperty(color, duration) {
this._definitionChanged = new bmgl.Event();
this._color = undefined;
this._colorSubscription = undefined;
this.color = color;
this.duration = duration;
this._time = (new Date()).getTime();
}
bmgl.defineProperties(PolylineTrailLinkMaterialProperty.prototype, {
isConstant: {
get: function () {
return false;
}
},
definitionChanged: {
get: function () {
return this._definitionChanged;
}
},
color: bmgl.createPropertyDescriptor('color')
});
PolylineTrailLinkMaterialProperty.prototype.getType = function (time) {
return 'PolylineTrailLink';
}
PolylineTrailLinkMaterialProperty.prototype.getValue = function (time, result) {
if (!bmgl.defined(result)) {
result = {};
}
result.color = bmgl.Property.getValueOrClonedDefault(this._color, time, bmgl.Color.WHITE, result.color);
result.image = bmgl.Material.PolylineTrailLinkImage;
result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration;
return result;
}
PolylineTrailLinkMaterialProperty.prototype.equals = function (other) {
return this === other ||
(other instanceof PolylineTrailLinkMaterialProperty &&
bmgl.Property.equals(this._color, other._color))
}
bmgl.PolylineTrailLinkMaterialProperty = PolylineTrailLinkMaterialProperty;
bmgl.Material.PolylineTrailLinkType = 'PolylineTrailLink';
bmgl.Material.PolylineTrailLinkImage = "/bmgl/images/colors.png";
bmgl.Material.PolylineTrailLinkSource = "czm_material czm_getMaterial(czm_materialInput materialInput)\n\
{\n\
czm_material material = czm_getDefaultMaterial(materialInput);\n\
vec2 st = materialInput.st;\n\
vec4 colorImage = texture2D(image, vec2(fract(st.s - time), st.t));\n\
material.alpha = colorImage.a * color.a;\n\
material.diffuse = (colorImage.rgb+color.rgb)/2.0;\n\
return material;\n\
}";
bmgl.Material._materialCache.addMaterial(bmgl.Material.PolylineTrailLinkType, {
fabric: {
type: bmgl.Material.PolylineTrailLinkType,
uniforms: {
color: new bmgl.Color(1.0, 0.0, 0.0, 0.5),
image: bmgl.Material.PolylineTrailLinkImage,
time: 0
},
source: bmgl.Material.PolylineTrailLinkSource
},
translucent: function (material) {
return true;
}
});
function parabolaEquation(options, resultOut) {
//方程 y=-(4h/L^2)*x^2+h h:顶点高度 L：横纵间距较大者
var h = options.height && options.height > 5000 ? options.height : 5000;
var L = Math.abs(options.pt1.lon - options.pt2.lon) > Math.abs(options.pt1.lat - options.pt2.lat) ? Math.abs(options.pt1.lon - options.pt2.lon) : Math.abs(options.pt1.lat - options.pt2.lat);
var num = options.num && options.num > 50 ? options.num : 50;
var result = [];
var dlt = L / num;
if (Math.abs(options.pt1.lon - options.pt2.lon) > Math.abs(options.pt1.lat - options.pt2.lat)) {//以lon为基准
var delLat = (options.pt2.lat - options.pt1.lat) / num;
if (options.pt1.lon - options.pt2.lon > 0) {
dlt = -dlt;
}
for (var i = 0; i < num; i++) {
var tempH = h - Math.pow((-0.5 * L + Math.abs(dlt) * i), 2) * 4 * h / Math.pow(L, 2);
var lon = options.pt1.lon + dlt * i;
var lat = options.pt1.lat + delLat * i;
result.push([lon, lat, tempH]);
}
} else {//以lat为基准
var delLon = (options.pt2.lon - options.pt1.lon) / num;
if (options.pt1.lat - options.pt2.lat > 0) {
dlt = -dlt;
}
for (var i = 0; i < num; i++) {
var tempH = h - Math.pow((-0.5 * L + Math.abs(dlt) * i), 2) * 4 * h / Math.pow(L, 2);
var lon = options.pt1.lon + delLon * i;
var lat = options.pt1.lat + dlt * i;
result.push([lon, lat, tempH]);
}
}
if (resultOut != undefined) {
resultOut = result;
}
return result;
}
var center = {lon: 114.302312702, lat: 30.598026044}
var cities = [{"lon": 115.028495718, "lat": 30.200814617},
{"lon": 110.795000473, "lat": 32.638540762},
{"lon": 111.267729446, "lat": 30.698151246},
{"lon": 112.126643144, "lat": 32.058588576},
{"lon": 114.885884938, "lat": 30.395401912},
{"lon": 112.190419415, "lat": 31.043949588},
{"lon": 113.903569642, "lat": 30.932054050},
{"lon": 112.226648859, "lat": 30.367904255},
{"lon": 114.861716770, "lat": 30.468634833},
{"lon": 114.317846048, "lat": 29.848946148},
{"lon": 113.371985426, "lat": 31.704988330},
{"lon": 109.468884533, "lat": 30.289012191},
{"lon": 113.414585069, "lat": 30.368350431},
{"lon": 112.892742589, "lat": 30.409306203},
{"lon": 113.160853710, "lat": 30.667483468},
{"lon": 110.670643354, "lat": 31.748540780}]
var material = new bmgl.PolylineTrailLinkMaterialProperty(bmgl.Color.ORANGE, 3000);
for (var j = 0; j < cities.length; j++) {
var points = parabolaEquation({pt1: center, pt2: cities[j], height: 50000, num: 100});
var pointArr = [];
for (var i = 0; i < points.length; i++) {
pointArr.push(points[i][0], points[i][1], points[i][2]);
}
viewer.entities.add({
name: 'PolylineTrailLink' + j,
polyline: {
positions: bmgl.Cartesian3.fromDegreesArrayHeights(pointArr),
width: 2,
material: material
}
});
}
viewer.entities.add({
position: bmgl.Cartesian3.fromDegrees(center.lon, center.lat, 1),
point: {
pixelSize: 6,
color: bmgl.Color.BLUE
}
});
for (var i = 0; i < cities.length; i++) {
viewer.entities.add({
position: bmgl.Cartesian3.fromDegrees(cities[i].lon, cities[i].lat, 1),
point: {
pixelSize: 6,
color: bmgl.Color.RED
}
});
}
viewer.camera.flyTo({
destination:new bmgl.Cartesian3(-2431832.05398568,5312676.685486797,2943588.1345312647),
orientation:{
"heading":6.0061437086517575,"roll":0.0000660000291583529,"pitch":-0.3938144380432427
}
});
</script>
</body>
</html>
源码