<!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 PolylineTrailLinkMaterialProperty(color, duration, d) {
this._definitionChanged = new bmgl.Event();
this._color = undefined;
this._colorSubscription = undefined;
this.color = color;
this.duration = duration || 3000;
this._time = (new Date()).getTime();
this._d = d;
this.isTranslucent = function () {
return true;
}
}
//创建材质类。
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 * this._d;
return result;
}
PolylineTrailLinkMaterialProperty.prototype.equals = function (other) {
return this === other ||
(other instanceof PolylineTrailLinkMaterialProperty &&
Property.equals(this._color, other._color))
}
//设置纹理图片（PolylineTrailLinkImage ），纹理类型（PolylineTrailLinkType ），纹理资源（PolylineTrailLinkSource ）,其中texture2D(image, vec2(fract(st.s - time), st.t));修改对应的st.s或者st.t可以更改纹理流动方向。
bmgl.PolylineTrailLinkMaterialProperty = PolylineTrailLinkMaterialProperty;
bmgl.Material.PolylineTrailLinkType = 'PolylineTrailLink';
bmgl.Material.PolylineTrailLinkImage = "/bmgl/images/线动图片.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中添加刚刚新建好的纹理
bmgl.Material._materialCache.addMaterial(bmgl.Material.PolylineTrailLinkType, {
fabric: {
type: bmgl.Material.PolylineTrailLinkType,
uniforms: {
color: new bmgl.Color(0.0, 0.0, 1.0, 0.5),
image: bmgl.Material.PolylineTrailLinkImage,
time: -20
},
source: bmgl.Material.PolylineTrailLinkSource
},
translucent: function (material) {
return true;
}
});
var glowingLine = viewer.entities.add({
name: 'Glowing blue line on the surface',
polyline: {
positions: bmgl.Cartesian3.fromDegreesArray([-75, 37,
-125, 37]),
width: 10,
material: new bmgl.PolylineTrailLinkMaterialProperty(bmgl.Color.WHITE, 3000, 1)
}
});
viewer.flyTo(viewer.entities);
</script>
</body>
</html>
源码