先看下效果图:
首先,应该先去官网下载SuperMap iClient3D for WebGL(推荐选择:9D(2019) 正式版)
然后在hbuilder中新建web项目,在项目中新建HTML文件,命名为“PolylineLiJiang”,在PolylineLiJiang.html中复制进去以下代码,然后导出PolylineLiJiang.html到刚刚下载并解压后的文件夹“examples”中,再右键“PolylineLiJiang.html”用IE浏览器打开(注意:qq浏览器,火狐浏览器,谷歌浏览器貌似都打不开)
附:api文档http://support.supermap.com.cn:8090/webgl/Build/Documentation/index.html
官网示例:http://support.supermap.com.cn:8090/webgl/examples/editor.html#Polyline
代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<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>李疆WebglDemo</title>
<link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<link href="./css/bootstrap.min.css" rel="stylesheet">
<link href="./css/pretty.css" rel="stylesheet">
<script src="./js/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/bootstrap-select.min.js"></script>
<script src="./js/config.js"></script>
<script type="text/javascript" src="./js/require.min.js" data-main="js/main"></script>
</head>
<body>
<div id="cesiumContainer"></div>
<div id='loadingbar' class="spinner">
<div class="spinner-container container1">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container2">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container3">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
</div>
<div id="toolbar" style="position: absolute;left: 5px;top: 5px;display: none;">
<select id="selOptions" class="selectpicker show-tick form-control">
<option disabled selected value>--选择类型--</option>
<option value="1">矢量面(默认)</option>
<option value="2">矢量面(贴地)</option>
<option value="3">KML矢量面(贴地)</option>
<option value="4">KML矢量面(贴对象)</option>
</select>
</div>
<script>
function onload(Cesium) {
var viewer = new Cesium.Viewer('cesiumContainer',{
sceneModePicker:true,
navigation:false
});
var length = 300;
var startLon =-20;
var endLon = 700;
var lat = 0;
var glowingLine = viewer.entities.add({
name : 'Glowing blue line on the surface',
polyline : {
positions : Cesium.Cartesian3.fromDegreesArray([startLon, lat,
endLon, lat]),
width : 10,
//followSurface : true,
material : new Cesium.PolylineGlowMaterialProperty({
glowPower : 0.2,
color : Cesium.Color.YELLOW
})
}
});
/
Cesium.Entity.prototype.myListener = function(nStage) {
var billboard = this.billboard;
billboard.color = new Cesium.Color(1,1, 0, nStage);
}
var pointLineArray = [];
var entityArray = [];
for (var i = 0; i < length; ++i) {
var evt = new Cesium.Event();
var animationObj = {
type: 'time',
stepsRange: {
start: 0,
end: 300
},
trails: 30,
duration: 50,
event:evt
};
var lon = Cesium.Math.lerp(endLon, startLon, i / (length - 1));
entityArray[i] = viewer.entities.add({
position : Cesium.Cartesian3.fromDegrees(lon, lat),
nameID:i,
availability : new Cesium.TimeIntervalCollection(null,animationObj),
billboard :{
image : './images/point.png',
width:32,
height:32,
color :new Cesium.Color(1, 1, 0, 1)
}
});
evt.addEventListener(Cesium.Entity.prototype.myListener, entityArray[i]);
}
var redLine = viewer.entities.add({
name : 'Red line on the surface',
polyline : {
positions : Cesium.Cartesian3.fromDegreesArray([-55, 35,
-165, 35]),
width : 10,
material : Cesium.Color.RED
}
});
var glowingLine = viewer.entities.add({
name : 'Glowing blue line on the surface',
polyline : {
positions : Cesium.Cartesian3.fromDegreesArray([-35, 37,
-175, 37]),
width : 10,
material : new Cesium.PolylineGlowMaterialProperty({
glowPower : 0.2,
color : Cesium.Color.BLUE
})
}
});
var orangeOutlined = viewer.entities.add({
name : 'Orange line with black outline at height and following the surface',
polyline : {
positions : Cesium.Cartesian3.fromDegreesArrayHeights([-65, 39, 350000,
-105, 39, 350000]),
width : 10,
material : new Cesium.PolylineOutlineMaterialProperty({
color : Cesium.Color.ORANGE,
outlineWidth : 2,
outlineColor : Cesium.Color.BLACK
})
}
});
var purpleArrow = viewer.entities.add({
name : 'Purple straight arrow at height',
polyline : {
positions : Cesium.Cartesian3.fromDegreesArrayHeights([-75, 63, 500000,
-125, 43, 500000]),
width : 10,
followSurface : false,
material : new Cesium.PolylineArrowMaterialProperty(Cesium.Color.PURPLE)
}
});
var dashedLine = viewer.entities.add({
name : 'Blue dashed line',
polyline : {
positions : Cesium.Cartesian3.fromDegreesArrayHeights([-75, 85, 500000,
-125, 65, 500000]),
width : 7,
material : new Cesium.PolylineDashMaterialProperty({
color: Cesium.Color.CYAN
})
}
});
var postion = [-80, 70,-130, 45];
var dynamicLine = viewer.entities.add({
name : 'RED dynamic line',
polyline : {
positions : Cesium.Cartesian3.fromDegreesArray(postion),
width : 10,
hMax:200000,
material : new Cesium.PolylineDynamicMaterialProperty({
color : Cesium.Color.RED,
outlineWidth : 0,
outlineColor : Cesium.Color.BLACK
})
}
});
var dynamicLine2 = viewer.entities.add({
name : 'ORANGE dynamic line',
polyline : {
positions : Cesium.Cartesian3.fromDegreesArray(postion),
width : 5,
hMax:40000,
material : new Cesium.PolylineDashMaterialProperty({
color : Cesium.Color.ORANGE,
outlineWidth : 0,
outlineColor : Cesium.Color.BLACK
})
}
});
var dynamicLine3 = viewer.entities.add({
name : 'Yellow dynamic line',
polyline : {
positions : Cesium.Cartesian3.fromDegreesArray(postion),
width : 5,
hMax:600000,
material : new Cesium.PolylineDashMaterialProperty({
color : Cesium.Color.YELLOW,
outlineWidth : 0,
outlineColor : Cesium.Color.BLACK
})
}
});
var dynamicLine4 = viewer.entities.add({
name : 'GREEN dynamic line',
polyline : {
positions : Cesium.Cartesian3.fromDegreesArray(postion),
width : 5,
hMax:80000,
material : new Cesium.PolylineDashMaterialProperty({
color : Cesium.Color.GREEN,
outlineWidth : 0,
outlineColor : Cesium.Color.BLACK
})
}
});
var dynamicLine5 = viewer.entities.add({
name : 'BLUE dynamic line',
polyline : {
positions : Cesium.Cartesian3.fromDegreesArray(postion),
width : 5,
hMax:1000000,
material : new Cesium.PolylineDashMaterialProperty({
color : Cesium.Color.BLUE,
outlineWidth : 0,
outlineColor : Cesium.Color.BLACK
})
}
});
var dynamicLine6 = viewer.entities.add({
name : 'CYAN dynamic line',
polyline : {
positions : Cesium.Cartesian3.fromDegreesArray(postion),
width : 5,
hMax:1200000,
material :new Cesium.PolylineDashMaterialProperty({
color : Cesium.Color.CYAN,
outlineWidth : 0,
outlineColor : Cesium.Color.BLACK
})
}
});
var dynamicLine7 = viewer.entities.add({
name : 'purple dynamic line',
polyline : {
positions : Cesium.Cartesian3.fromDegreesArray(postion),
width : 5,
hMax:1400000,
material : new Cesium.PolylineDashMaterialProperty({
color : Cesium.Color.PURPLE,
outlineWidth : 0,
outlineColor : Cesium.Color.BLACK
})
}
});
viewer.zoomTo(viewer.entities);
$('#loadingbar').remove();
}
</script>
</body>
</html>