当前位置：首页 > news >正文

vue+cesium线流动纹理

news 来源：原创 2025/4/30 11:03:48

index.vue页面

<!--线流动纹理实现-->
<template><div id="mapContainerFirst"></div>
</template>
<script lang="ts" setup>
import { init as initPolylineTrailLinkMaterialProperty } from './PolylineTrailLinkMaterialProperty';
import { onMounted } from "vue";
import { intCesiumMap, flyTo } from "./../../utils/cesiumMapTool";
var viewer: any = null;
var Cesium = window.Cesium;
onMounted(() => {viewer = intCesiumMap(Cesium);//初始化地图flyTo(117.69344, 39.00051, 13000, 0, -35, 0, 2, viewer);Cesium.PolylineTrailLinkMaterialProperty = initPolylineTrailLinkMaterialProperty(Cesium);const line = viewer.entities.add({polyline: {positions: Cesium.Cartesian3.fromDegreesArray(getTestData()),width: 10,material: new Cesium.PolylineTrailLinkMaterialProperty(Cesium.Color.fromCssColorString('red'), 5),clampToGround: true //贴地}});viewer.entities.add(line);})
//测试数据
function getTestData() {var data =[117.55508, 38.99384, 117.56538, 38.99998, 117.56744, 39.00051, 117.57053, 38.99971, 117.57328, 38.99864, 117.57809, 38.9917, 117.57637, 38.98236, 117.58289, 38.9805, 117.59113, 38.98236, 117.59663, 38.98477, 117.59663, 38.9901, 117.59285, 38.99864, 117.58976, 39.00424, 117.59251, 39.00745, 117.59937, 39.00958, 117.60761, 39.01251, 117.61585, 39.01865, 117.61997, 39.02478, 117.62341, 39.02478, 117.62959, 39.02212, 117.63474, 39.01705, 117.63783, 39.01038, 117.64297, 39.00771, 117.6519, 39.01065, 117.66048, 39.01198, 117.66426, 39.01145, 117.66701, 39.00905, 117.6701, 39.00505, 117.6701, 38.99811, 117.66975, 38.99064, 117.66838, 38.9877, 117.67044, 38.9845, 117.67593, 38.98263, 117.68349, 38.98263, 117.68795, 38.9845, 117.68829, 38.9885, 117.68658, 38.99437, 117.68692, 38.99837, 117.69138, 39.00051, 117.69344, 39.00051, 117.69688, 38.99998, 117.70203, 38.99757, 117.70683, 38.99277, 117.70683, 38.98984, 117.71095, 38.9873, 117.71421, 38.98397, 117.71456, 38.9801, 117.71421, 38.97516, 117.71679, 38.97169, 117.71816, 38.97009, 117.72211, 38.96702, 117.77018, 38.9494, 117.80245, 38.94245, 117.91214, 38.9084]return data;
}</script>

PolylineTrailLinkMaterialProperty.ts

// @ts-nocheck
import waterimg from '../../assets/images/spriteline1.png';
function init(Cesium) {class PolylineTrailLinkMaterialProperty {constructor(options) {options = Cesium.defaultValue(options, Cesium.defaultValue.EMPTY_OBJECT);console.log(options)this._definitionChanged = new Cesium.Event();this._color = undefined;this._colorSubscription = undefined;this.color = options.color;this.duration = Cesium.defaultValue(options.duration, 10000);this._time = new Date().getTime();}}Object.defineProperties(PolylineTrailLinkMaterialProperty.prototype, {isConstant: {get: function () {return false;},},definitionChanged: {get: function () {return this._definitionChanged;},},color: Cesium.createPropertyDescriptor('color'),});
// eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-varsPolylineTrailLinkMaterialProperty.prototype.getType = function (time) {return 'PolylineTrailLink';};PolylineTrailLinkMaterialProperty.prototype.getValue = function (time, result) {if (!Cesium.defined(result)) {result = {};}result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color);result.image = Cesium.Material.PolylineTrailLinkImage;result.time = ((new Date().getTime() - this._time) % this.duration) / this.duration;return result;};PolylineTrailLinkMaterialProperty.prototype.equals = function (other) {return this === other || (other instanceof PolylineTrailLinkMaterialProperty && Cesium.Property.equals(this._color, other._color));};Cesium.Material.PolylineTrailLinkType = 'PolylineTrailLink';Cesium.Material.PolylineTrailLinkImage = waterimg;Cesium.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 = texture(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\}';Cesium.Material._materialCache.addMaterial(Cesium.Material.PolylineTrailLinkType, {fabric: {type: Cesium.Material.PolylineTrailLinkType,uniforms: {color: new Cesium.Color(1.0, 0.0, 0.0, 0.9),image: Cesium.Material.PolylineTrailLinkImage,time: 0,},source: Cesium.Material.PolylineTrailLinkSource,},// eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-varstranslucent: function (material) {return true;},});return PolylineTrailLinkMaterialProperty;
}
export { init };

cesiumMapTool.ts（地图里有些配置项可以不写）

export function intCesiumMap(Cesium) {class TdtImageryProvider extends Cesium.UrlTemplateImageryProvider {constructor(type, key, options = {}) {var templateUrl = "//t{s}.tianditu.gov.cn/DataServer?T={t}&x={x}&y={y}&l={z}&tk={k}"// var templateUrl = "//t{s}.tianditu.gov.cn/{t}/wmts?service=WMTS&request=GetTile&version=1.0.0&layer={l}&style=default&tilematrixset=w&format=tiles&tilematrix={z}&tilecol={x}&tilerow={y}&tk={k}"var myUrl = templateUrl.replace(/\{t\}/g, type).replace(/\{l\}/g, type.substr(0, 3)).replace(/\{k\}/g, key)super(Object.assign({}, { url: myUrl, subdomains: "01234567", minimumLevel: type === "ibo_w" ? 3 : 1, maximumLevel: type === "ibo_w" ? 10 : 18 }, options))}}Cesium.TdtImageryProvider = TdtImageryProvidervar viewer = new Cesium.Viewer("mapContainerFirst", {animation: false, // 是否显示动画控件baseLayerPicker: true, // 是否显示图层选择控件vrButton: false, // 是否显示VR控件fullscreenButton: false, // 是否显示全屏按钮geocoder: false, // 是否显示地名查找控件homeButton: false, // 是否显示返回主视角控件sceneModePicker: false, // 是否显示投影方式控件selectionIndicator: false, // 是否显示选中指示框timeline: false, // 是否显示时间线控件navigationHelpButton: false, // 是否显示帮助信息控件infoBox: false, // 是否显示点击要素之后显示的信息})viewer.imageryLayers.removeAll(viewer.imageryLayers.get(0)) // 移除 Cesium 默认图层viewer.scene.globe.baseColor = new Cesium.Color(0, 0, 0, 0)  // 设置地球背景色黑色//add3DAreA(viewer);var img_Layer = new Cesium.TdtImageryProvider("img_w", "d083e4cf30bfc438ef93436c10c2c20a"),cia_Layer = new Cesium.TdtImageryProvider("cia_w", "d083e4cf30bfc438ef93436c10c2c20a"),eia_Layer = new Cesium.TdtImageryProvider("eia_w", "d083e4cf30bfc438ef93436c10c2c20a"),vec_Layer = new Cesium.TdtImageryProvider("vec_w", "d083e4cf30bfc438ef93436c10c2c20a"),cva_Layer = new Cesium.TdtImageryProvider("cva_w", "d083e4cf30bfc438ef93436c10c2c20a"),eva_Layer = new Cesium.TdtImageryProvider("eva_w", "d083e4cf30bfc438ef93436c10c2c20a"),ter_Layer = new Cesium.TdtImageryProvider("ter_w", "d083e4cf30bfc438ef93436c10c2c20a"),cta_Layer = new Cesium.TdtImageryProvider("cta_w", "d083e4cf30bfc438ef93436c10c2c20a"),ibo_Layer = new Cesium.TdtImageryProvider("ibo_w", "d083e4cf30bfc438ef93436c10c2c20a")viewer.baseLayerPicker._dropPanel.children[0].innerHTML = "底图"viewer.baseLayerPicker.viewModel.imageryProviderViewModels = [new Cesium.ProviderViewModel({ creationFunction: function () { return img_Layer }, name: "影像底图" }),new Cesium.ProviderViewModel({ creationFunction: function () { return cia_Layer }, name: "影像注记" }),new Cesium.ProviderViewModel({ creationFunction: function () { return eia_Layer }, name: "影像英文注记" }),new Cesium.ProviderViewModel({ creationFunction: function () { return vec_Layer }, name: "电子底图" }),new Cesium.ProviderViewModel({ creationFunction: function () { return cva_Layer }, name: "电子注记" }),new Cesium.ProviderViewModel({ creationFunction: function () { return eva_Layer }, name: "电子英文注记" }),new Cesium.ProviderViewModel({ creationFunction: function () { return ter_Layer }, name: "地形底图" }),new Cesium.ProviderViewModel({ creationFunction: function () { return cta_Layer }, name: "地形注记" }),new Cesium.ProviderViewModel({ creationFunction: function () { return ibo_Layer }, name: "全球境界" })]viewer.baseLayerPicker.viewModel.selectedImagery = viewer.baseLayerPicker.viewModel.imageryProviderViewModels[0]viewer.baseLayerPicker._dropPanel.children[2].innerHTML = "地形"viewer.baseLayerPicker.viewModel.terrainProviderViewModels = [];viewer.scene.backgroundColor = new Cesium.Color(0, 0, 0, 0.0)viewer.scene.globe.baseColor = new Cesium.Color(0, 0, 0, 0.0)viewer.scene.fxaa = false;//改善实体图片清晰度，去除图片锯齿viewer.scene.postProcessStages.fxaa.enabled = true; //去锯齿 使文字清晰if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {// 判断是否支持图像渲染像素化处理viewer.resolutionScale = window.devicePixelRatio;}viewer.trackedEntity = undefined;viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);//去除版权信息viewer._cesiumWidget._creditContainer.style.display = "none";//缩放viewer.scene.screenSpaceCameraController.zoomEventTypes = [Cesium.CameraEventType.WHEEL,Cesium.CameraEventType.PINCH,];//视图视角切换viewer.scene.screenSpaceCameraController.tiltEventTypes = [Cesium.CameraEventType.PINCH,Cesium.CameraEventType.RIGHT_DRAG,];// 定位// const extent = [110.954030,19.642660,110.958950,19.643200];//金塘范围const extent = [73, 3, 135, 53];const rect = Cesium.Rectangle.fromDegrees(...extent);viewer.camera.setView({destination: rect});// 最小缩放高度（米）viewer.scene.screenSpaceCameraController.minimumZoomDistance = 150;// 最大缩放高度（米）viewer.scene.screenSpaceCameraController.maximumZoomDistance = 200000000;viewer.scene.globe.depthTestAgainstTerrain = trueviewer.scene.screenSpaceCameraController.enableRotate = true;;//禁止旋转return viewer;
}export function flyTo(lon, lat, height, heading, pitch, range, duration,viewer) {const center = Cesium.Cartesian3.fromDegrees(lon, lat);const h = Cesium.Math.toRadians(heading);const p = Cesium.Math.toRadians(pitch);const r = range;//viewBoundingSphereviewer.camera.flyToBoundingSphere(new Cesium.BoundingSphere(center, height),{offset: new Cesium.HeadingPitchRange(h, p, r),duration: duration,});
}

纹理图片：