1、代码
<!DOCTYPE html>
<html lang="en">
<head>
<script>
</script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>流线</title>
<!-- 定义变量-->
<script type="text/javascript">
</script>
<script type="text/javascript" src="../js/lib/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../js/lib/echarts/echarts.js"></script>
<!-- 三维 -->
<link href="../js/lib/supermap/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<link href="../js/lib/supermap/css/pretty.css" rel="stylesheet">
<link href="../js/lib/supermap/css/info-window.css" rel="stylesheet">
<link href="../js/lib/layer/theme/default/layer.css" rel="stylesheet" />
<link href="../js/lib/layer/theme/retina/retina.css" rel="stylesheet" />
<link href="../js/lib/layer/theme/mars/layer.css" rel="stylesheet" />
<script src="../js/lib/layer/layer.js"></script>
<style>
html, body, #cesiumContainer {
100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#menu {
position: absolute;
top: 80px;
left: 10px;
z-index: 999;
}
/**隐藏超图logo*/
.cesium-credit-image,
.cesium-credit-expand-link {
display: none !important;
}
.cesium-widget-credits {
display: none !important;
}
</style>
</head>
<body>
<!-- 三维场景-->
<div id="cesiumContainer" style=" 100%; height: 100%;"></div>
<script type="text/javascript" src="../js/lib/supermap10/examples/js/supermap/SuperMap-7.1-11828.js"></script>
<script type="text/javascript" src="../js/lib/supermap10/examples/js/Convert.js"></script>
<script type="text/javascript" src="../js/lib/supermap10/examples/js/require.min.js" data-main="../js/lib/supermap10/examples/js/main.js"></script>
<script type="text/javascript" src="../js/lib/supermap10/examples/js/config.js"></script>
<script type="text/javascript" src="../js/lib/supermap10/examples/js/traffic.js"></script>
<script type="text/javascript" src="../js/lib/supermap10/examples/js/curve.js"></script>
<!-- <script type="text/javascript" src="../js/lib/supermap10/build/Cesium/Cesium.js"></script> -->
<script src="../js/lib/cesiumplugins/ImageryProvider-WebExtend.js"></script>
<script src="../js/gis/gps.js"></script>
<script>
function loadDynamicLine() {
$.getJSON('../data/XXX.json', function(rs) {
var animationObj = {
stepsRange: {
start: 0,
end: 50
},
trails: 20,
duration: 175
};
var _range = animationObj.stepsRange.end - animationObj.stepsRange.start;
var entityArray = [];
var curLineArray = [];
var linecolor = new Cesium.Color(53 / 255, 57 / 255, 255 / 255, 0.8); // 线颜色
var outline = new Cesium.Color(65 / 255, 105 / 255, 225 / 255, 0.8); // 线框颜色
var color = new Cesium.Color(255 / 255, 250 / 255, 250 / 255, 0.2); // 点颜色
var maxLength = 0;
var proj = new Cesium.WebMercatorProjection();
var fRatio = 180 / Math.PI;
var height = 0;
for (var i = 0; i < rs.features.length; i++) {
var item = rs.features[i].geometry.coordinates;
if (item.length > maxLength) {
maxLength = item.length;
}
var linePos = [];
for (j = 0; j < item.length; j++) {
var cartographic = Cesium.Cartographic.fromDegrees(item[j][0], item[j][1], 0);
var lat = cartographic.latitude * fRatio;
var lon = cartographic.longitude * fRatio;
var posReal = {};
linePos.push(posReal.lon);
linePos.push(posReal.lat);
linePos.push(height);
var entity = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(posReal.lon, posReal.lat, height),
nameID: j,
billboard: {
image: '../img/gis/car.png',
5,
height: 5,
color: color
}
});
entity.isAvailable = function(obj) {
return function(currentTime) {
if (!Cesium.defined(currentTime)) {
throw new Cesium.DeveloperError('time is required.');
}
var nMS = Cesium.JulianDate.toDate(currentTime).getTime() / animationObj.duration;
var time = (nMS % _range + animationObj.stepsRange.start);
var trails = trails || 10;
if (time && obj.nameID > time - trails && obj.nameID < time) {
obj.billboard.color._value.alpha = 0.8 * (obj.nameID - time + trails) / trails;
return true;
} else {
return false;
}
}
}(entity);
entityArray.push(entity);
}
curLineArray[i] = viewer.entities.add({
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights(linePos),
2,
material: new Cesium.PolylineOutlineMaterialProperty({
color: linecolor,
outlineWidth: 0.1,
outlineColor: outline
})
}
});
}
})
}
</script>
<script desc="页面加载">
var lat = XX;
var lon = YY;
var viewer = null;
var scene = null;
var widget = null;
var camera = null;
function onload() {
var GoogleMap = ImageryProviderWebExtendTool.createGoogleMapsByUrl(Cesium, {
url: "http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}"
});
viewer = new Cesium.Viewer('cesiumContainer', {
imageryProvider: GoogleMap,
selectionIndicator: true,
animation: false,
baseLayerPicker: false,
geocoder: false,
timeline: false,
sceneModePicker: true,
navigationHelpButton: false,
infoBox: true,
fullscreenButton: true
});
// 三维图形对象和状态的容器
scene = viewer.scene;
viewer.scene.fxaa = false;
widget = viewer.cesiumWidget;
// 相机类
camera = scene.camera;
//关闭深度检测
scene.globe.depthTestAgainstTerrain = false;
//取消双击事件
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
//设置homebutton的位置
Cesium.Camera.DEFAULT_VIEW_RECTANGLE =
Cesium.Rectangle.fromDegrees(lon - 1, lat - 1, lon + 1, lat + 1); //Rectangle(west, south, east, north)
//设置初始位置
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(lon, lat, 10000)
});
viewer.imageryLayers.get(0).brightness = 0.4;
loadDynamicLine();
}
</script>
</html>
2、效果
