zh/sdk4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

线样式（无同步间距调节）

Browse Source
This commit is contained in:
夏大胆
2025-07-07 16:21:01 +08:00
parent 484fe70e16
commit fa3325580c
8 changed files with 373 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
src/Tools/index.js
View File

@ -10,6 +10,7 @@ import { Proj } from './proj'
import { open as projConvertOpen, close as projConvertClose } from './projConvert'
import { open as projectionConvertOpen, close as projectionConvertClose } from './projectionConvert'
import { setActiveViewer, closeRotateAround, closeViewFollow } from '../Global/global'
import FlowPictureMaterialProperty from '../Obj/Materail/FlowPictureMaterialProperty'
class Tools {
/**
@ -513,8 +514,11 @@ class Tools {
return res
}
getMaterial(color = '#2ab0c2', type = 0) {
getMaterial(color = '#2ab0c2', type = 0, entity = null, newParam = {}) {
let material = ''
switch (Number(type)) {
case 1: //虚线
@ -531,60 +535,51 @@ class Tools {
break
case 3: //尾迹光线
material = new Cesium.PolylineFlowMaterialProperty({
color: color
color: color,
speed: newParam.rotate ? newParam.speed : 0 - newParam.speed,
rotate: newParam.rotate
})
break
case 4: //多尾迹光线
material = new Cesium.PolylineFlowMultMaterialProperty({
color: color
color: color,
speed: newParam.rotate ? newParam.speed : 0 - newParam.speed,
rotate: newParam.rotate
})
break
case 5: //普通流动虚线
material = new Cesium.FlowDashedLineFlowMaterialProperty({
color: color,
uType: 0
uType: 0,
speed: newParam.rotate ? newParam.speed : 0 - newParam.speed,
// dashSize: newParam.dashSize,
space: newParam.space
})
break
case 6: //流动虚线2
material = new Cesium.FlowDashedLineFlowMaterialProperty({
color: color,
uType: 1
uType: 1,
speed: newParam.rotate ? newParam.speed : 0 - newParam.speed,
// dashSize: newParam.dashSize,
space: newParam.space
})
break
case 7: //流动箭头1
material = new Cesium.LineTextureMaterialProperty({
case 8: //流动箭头2
case 9: //流动箭头3
case 10: //流动箭头4
case 11: //流动箭头5
case 12: //流动箭头6
let param = {
color: color,
image: this.getSourceRootPath() + '/img/arrow/2.png',
// imageW: 172
})
// let that = this
// var curCanvas = 'a';
// let i = 0;
// function drawCanvasImage(time, result) {
// let canvas = document.createElement('canvas');
// canvas.id = "canvas-" + curCanvas;
// // document.getElementById('app').appendChild(canvas)
// // var canvas = document.getElementById("canvas-" + curCanvas);
// let cwidth = 494;
// let cheight = 172;
// var ctx = canvas.getContext("2d");
// var img = new Image();
// img.src = that.getSourceRootPath() + '/img/arrow/1.png';
// ctx.clearRect(0, 0, cwidth, cheight);
// img.onload = function () {
// if (i <= cwidth) {
// ctx.drawImage(img, i, 0);
// } else
// i = 0;
// i += 3;
// }
// curCanvas = curCanvas === 'a' ? 'b' : 'a';
// return canvas;
// }
// material = new Cesium.ImageMaterialProperty({
// image: new Cesium.CallbackProperty(drawCanvasImage, false),
// transparent: true
// })
image: this.getSourceRootPath() + `/img/arrow/${type - 6}.png`,
space: newParam.space,
speed: newParam.speed
}
param.speed = newParam.rotate ? param.speed : 0 - param.speed
this.getFlowTexture(this, param, entity)
break
default:
material = Cesium.Color.fromCssColorString(color)
@ -592,6 +587,79 @@ class Tools {
}
return material
}
getFlowTexture(that, options, entity) {
const canvasEle = document.createElement('canvas');
const ctx = canvasEle.getContext('2d')
const myImg = new Image()
// myImg.src = that.getSourceRootPath() + '/img/arrow/1.png'
myImg.src = options.image
myImg.onload = function () {
if (options.speed > 0 || options.speed == 0) {
canvasEle.width = myImg.width * (options.space + 1)
canvasEle.height = myImg.height
ctx.drawImage(myImg, myImg.width * (options.space / 2), 0)
} else {
ctx.clearRect(0, 0, canvasEle.width, canvasEle.height);
ctx.save(); // 保存当前状态
canvasEle.width = myImg.width * (options.space + 1)
canvasEle.height = myImg.height
ctx.translate(canvasEle.width / 2, canvasEle.height / 2); // 移动原点至中心
ctx.rotate(Math.PI); // （弧度制）
ctx.drawImage(myImg, -myImg.width * (options.space / 2), -myImg.height / 2)
ctx.restore(); // 恢复状态
}
// let repeat = getRepeat()
// }, false)
entity.polyline.material = new Cesium.LineTextureMaterialProperty(
{
color: options.color,
// image: options.image,
image: canvasEle,
speed: options.speed,
// repeat: repeat
repeat: new Cesium.CallbackProperty(function () {
// function getRepeat() {
var positionProperty = entity.polyline.positions;
var positions = positionProperty.getValue(that.sdk.viewer.clock.currentTime);
if (!Cesium.defined(positions)) {
// return new Cesium.Cartesian2(1.0, 1.0);
return 1.0;
}
var distance = 0;
for (var i = 0; i < positions.length - 1; ++i) {
distance += Cesium.Cartesian3.distance(positions[i], positions[i + 1]);
}
var repeatX = distance / entity.polyline.width.getValue();
// 根据地图缩放程度调整repeatX
var cameraHeight = that.sdk.viewer.camera.positionCartographic.height;
var boundingSphere = new Cesium.BoundingSphere(
new Cesium.Cartesian3(-1000000, 0, 0), // 中心点坐标
500000 // 半径（距离）
);
// 获取绘图缓冲区的宽度和高度（通常是屏幕的分辨率）
var drawingBufferWidth = that.sdk.viewer.canvas.clientWidth;
var drawingBufferHeight = that.sdk.viewer.canvas.clientHeight;
// 使用 getPixelSize 方法获取包围球在屏幕上的像素大小
var groundResolution = that.sdk.viewer.scene.camera.getPixelSize(boundingSphere, drawingBufferWidth, drawingBufferHeight)
// repeatX *= groundResolution / cameraHeight / ((myImg.width / myImg.height * 5) + 1);
repeatX *= groundResolution / cameraHeight / (options.space * (canvasEle.width / canvasEle.height * 5) + 1);
// if (repeatX < 3) {
// repeatX = 3
// }
// return new Cesium.Cartesian2(repeatX, 1.0);
return repeatX;
})
}
)
}
}
/*创建直箭头图片*/
create_arrow1_picture(color) {