<!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
});
//不启用地形遮挡
viewer.scene.globe.depthTestAgainstTerrain = false;
function definePolylineMaterial(fnname, type, img) {
var fn = function (color, duration) {
this._definitionChanged = new bmgl.Event();
this._color = undefined;
this._colorSubscription = undefined;
this.color = color;
this.duration = duration;
this._time = new Date().getTime();
}
Object.defineProperties(
fn.prototype, {
isConstant: {
get: function () {
return false;
}
},
definitionChanged: {
get: function () {
return this._definitionChanged;
}
},
color: bmgl.createPropertyDescriptor("color")
}
);
fn.prototype.getType = function (time) {
return type;
};
fn.prototype.equals = function (other) {
return false;
};
fn.prototype.getValue = function (time, result) {
if (!bmgl.defined(result)) {
result = {};
}
result.color = bmgl.Property.getValueOrClonedDefault(this._color, time, bmgl.Color.WHITE, result
.color);
result.time = ((new Date().getTime() - this._time) % this.duration) / this.duration;
return result;
};
bmgl[fnname] = fn;
bmgl.Material._materialCache.addMaterial(
type, {
fabric: {
type: type,
uniforms: {
color: new bmgl.Color(0.0, 0.0, 1.0, 0.5),
image: img,
time: 0,
constantSpeed: 300,
depthFailMaterial: true
},
source: "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\
}"
},
translucent: function (material) {
return true;
}
}
);
}
var positions = bmgl.Cartesian3.fromDegreesArray([
104.06704903, 30.62035280,
104.06734943, 30.60842326,
104.07743454, 30.60849713,
104.07769203, 30.60112816,
104.07769203, 30.60114663
])
definePolylineMaterial('PolylineTrailLinkMaterialProperty', 'demo2', '/bmgl/images/流光纤3.png');
//定义一种线纹理 调用方法名，类型（不能重复）,图片地址
line = this.viewer.entities.add({
name: 'PolylineTrail',
polyline: {
positions: positions,
width: 5,
material: new bmgl.PolylineTrailLinkMaterialProperty(bmgl.Color.fromCssColorString("#e7e7f6"),
3000),
clampToGround: true
}
});
viewer.flyTo(viewer.entities)
definePolylineMaterial('PolylineTrailLinkMaterialProperty1', 'demo1', '/bmgl/images/线动图片.png');
positions = bmgl.Cartesian3.fromDegreesArray([
104.07704903, 30.62035280,
104.07734943, 30.60842326,
104.08743454, 30.60849713,
104.08769203, 30.60112816,
104.08769203, 30.60114663
])
var line2 = this.viewer.entities.add({
name: 'PolylineTrail2',
polyline: {
positions: positions,
width: 5,
material: new bmgl.PolylineTrailLinkMaterialProperty1(bmgl.Color.fromCssColorString("#e7e7f6"),
3000),
clampToGround: true
}
});
</script>
</body>
</html>
源码