超图+CESIUM】【基础API使用示例】33、超图｜CESIUM"/>
【超图+CESIUM】【基础API使用示例】33、超图｜CESIUM
前言
缺少前置学习使用资料，请自行查阅：[]()以下示例使用到的公共静态资料，不建议下载，建议官网自行下载超图Build资源，示例所涉及图片会在示例使用到时提供出来。如有需要可下载：[]()。绘制特效线段（发光｜指定颜色｜带边框｜指定颜色箭头｜虚线｜动态线）。
使用
-
效果
-
完整代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>绘制特效线 - 流动等</title><link href="./public/Build/Cesium/Widgets/widgets.css" rel="stylesheet" /><scripttype="text/javascript"src="./public/Build/Cesium/Cesium.js"></script><style>* {margin: 0;padding: 0;}html,body,#cesium-container {width: 100%;height: 100%;}.panel {position: fixed;left: 10px;top: 10px;z-index: 1;background-color: #fff;}.panel .btn {cursor: pointer;}</style></head><body><div id="cesium-container" /><div class="panel"><p class="btn">1、绘制发光的线</p><p class="btn">2、绘制指定颜色的线</p><p class="btn">3、绘制指定颜色指定边框颜色的线</p><p class="btn">4、绘制指定颜色的箭头静态指示线</p><p class="btn">5、绘制虚线</p><p class="btn">6、绘制动态的线</p><p class="btn">清除</p></div><script>let viewerwindow.onload = function () {viewer = new Cesium.Viewer('cesium-container', {sceneModePicker: true,navigation: false,})initBindDrawEventHandler()}// 初始化绑定按钮的绘制事件function initBindDrawEventHandler() {const btns = document.querySelectorAll('.panel .btn')btns[0].addEventListener('click', () => {drawGlowingLineHandler()activeCurrentClickBtnHandler(0)})btns[1].addEventListener('click', () => {drawSpecifyColorLineHandler()activeCurrentClickBtnHandler(1)})btns[2].addEventListener('click', () => {drawSpecifyColorAndOutlineColorLineHandler()activeCurrentClickBtnHandler(2)})btns[3].addEventListener('click', () => {drawSpecifyColorArrowStaticStateLineHandler()activeCurrentClickBtnHandler(3)})btns[4].addEventListener('click', () => {drawDashedLineHandler()activeCurrentClickBtnHandler(4)})btns[5].addEventListener('click', () => {drawDynamicLineHandler()activeCurrentClickBtnHandler(5)})btns[6].addEventListener('click', () => {clearAllEntitiesHandler()activeCurrentClickBtnHandler(6)})}// 1、绘制发光的线function drawGlowingLineHandler() {viewer.entities.add({name: 'Glowing blue line on the surface',polyline: {positions: Cesium.Cartesian3.fromDegreesArray([50, // 第一个点经度lon30, // 第一个点纬度lat130, // 第二个点经度lon30, // 第二个点纬度lat]),width: 5,followSurface: true,material: new Cesium.PolylineGlowMaterialProperty({glowPower: 0.2,color: Cesium.Color.BLUE,}),},})}// 2、绘制指定颜色的线function drawSpecifyColorLineHandler() {viewer.entities.add({name: 'Red line on the surface',polyline: {positions: Cesium.Cartesian3.fromDegreesArray([50, 20, 140, 20]),width: 5,material: Cesium.Color.RED,},})}// 3、绘制指定颜色指定边框颜色的线function drawSpecifyColorAndOutlineColorLineHandler() {viewer.entities.add({name: 'Orange line with black outline at height and following the surface',polyline: {positions: Cesium.Cartesian3.fromDegreesArrayHeights([50, 10, 500000, 140, 10, 250000,]),width: 10, // 线宽material: new Cesium.PolylineOutlineMaterialProperty({color: Cesium.Color.ORANGE, // 指定颜色outlineWidth: 2, // 边框的宽度outlineColor: Cesium.Color.RED, // 指定边框颜色}),},})}// 4、绘制指定颜色的箭头静态指示线function drawSpecifyColorArrowStaticStateLineHandler() {viewer.entities.add({name: 'Purple straight arrow at height',polyline: {positions: Cesium.Cartesian3.fromDegreesArrayHeights([50, 0, 500000, 140, 0, 500000,]),width: 10,followSurface: false,material: new Cesium.PolylineArrowMaterialProperty(Cesium.Color.YELLOW),},})}// 5、绘制虚线function drawDashedLineHandler(params) {viewer.entities.add({name: 'CYAN dashed line',polyline: {positions: Cesium.Cartesian3.fromDegreesArrayHeights([50, -10, 500000, 140, -10, 500000,]),width: 4,material: new Cesium.PolylineDashMaterialProperty({color: Cesium.Color.CYAN,}),},})}// 6、绘制动态的线function drawDynamicLineHandler(params) {viewer.entities.add({name: 'RED dynamic line',polyline: {positions: Cesium.Cartesian3.fromDegreesArray([0, 45, 125, 45]),width: 10,hMax: 500000,material: new Cesium.PolylineDynamicMaterialProperty({color: Cesium.Color.RED,outlineWidth: 0,outlineColor: Cesium.Color.BLACK,}),},})}// 清除所有实体function clearAllEntitiesHandler() {viewer.entities.removeAll()}// 高亮当前点击的线段function activeCurrentClickBtnHandler(idx) {const btns = document.querySelectorAll('.panel .btn')Array.from(btns).forEach((btn, index) => {btn.style.color = index === idx ? 'red' : '#000'})}</script></body>
</html>更多推荐
【超图+CESIUM】【基础API使用示例】33、超图｜CESIUM
发布评论