Cesium实现大体量城市道路穿梭线效果,详细教程_cesium道路图

/**
 * @description: 加载城市路网OD线
 * @param {*} CesiumViewer
 * @return {*}
 */
 
import { Spriteline1MaterialProperty } from './Cesium_OD'
export function urbanRoadNetworkOD() {
  removeRoadOD()
  // 道路穿梭线
  const imageUrl = new URL(
    '../assets/images/specialEffects/lineYellow.png',
    import.meta.url
  ).href
  Cesium.GeoJsonDataSource.load(
    // './geojson/WaterDistributionMainLine5.geojson'
    './geojson/WaterDistributionMainLineLittlel.geojson'
  ).then(function (dataSource) {
    // console.log(dataSource, 'dataSource')
    RoadOdData = dataSource
    CesiumViewer.dataSources.add(RoadOdData)
    const entities = RoadOdData.entities.values
    entities.forEach((el: { polyline: { width: number; material: any } }) => {
      el.polyline.width = 2
      el.polyline.material = new Spriteline1MaterialProperty(1000, imageUrl)
    })
  })
}

/**
 *  精灵穿梭路光效果，
 *  entity的材质使用MaterialProperty,而primitive使用的是material。
 *  @Data：2022-01-11
 */
import * as Cesium from 'cesium'
 
function Spriteline1MaterialProperty(this: any, duration: any, image: any) {
  this._definitionChanged = new Cesium.Event()
  this.duration = duration
  this.image = image || '/images/ceshi/linBlue.png'
  this._time = performance.now()
}
Object.defineProperties(Spriteline1MaterialProperty.prototype, {
  isConstant: {
    get: function () {
      return false
    }
  },
  definitionChanged: {
    get: function () {
      return this._definitionChanged
    }
  },
  color: Cesium.createPropertyDescriptor('color'),
  duration: Cesium.createPropertyDescriptor('duration')
})
Spriteline1MaterialProperty.prototype.getType = function (time: any) {
  return 'Spriteline1'
}
Spriteline1MaterialProperty.prototype.getValue = function (
  time: any,
  result: { image?: any; time?: any }
) {
  if (!Cesium.defined(result)) {
    result = {}
  }
  result.image = this.image
  result.time =
    ((performance.now() - this._time) % this.duration) / this.duration
  return result
}
Spriteline1MaterialProperty.prototype.equals = function (e: { duration: any }) {
  return (
    this === e ||
    (e instanceof Spriteline1MaterialProperty && this.duration === e.duration)
  )
}
const CesiumExtensions = Object.assign({}, Cesium)
CesiumExtensions.Spriteline1MaterialProperty = Spriteline1MaterialProperty
window.Cesium = CesiumExtensions
Cesium.Material.Spriteline1Type = 'Spriteline1'
Cesium.Material.Spriteline1Source = `
czm_material czm_getMaterial(czm_materialInput materialInput)
{
    czm_material material = czm_getDefaultMaterial(materialInput);
    vec2 st = materialInput.st;
    vec4 colorImage = texture2D(image, vec2(fract(st.s - time), st.t));
    material.alpha = colorImage.a;
    material.diffuse = colorImage.rgb / 2.0;
    return material;
}
`
// st :二维纹理坐标
// czm_material：保存可用于照明的材质信息
Cesium.Material._materialCache.addMaterial(Cesium.Material.Spriteline1Type, {
  fabric: {
    type: Cesium.Material.Spriteline1Type,
    uniforms: {
      color: new Cesium.Color(1, 0, 0, 0.5),
      image: '',
      transparent: true,
      time: 20
    },
    source: Cesium.Material.Spriteline1Source
  },
  translucent: function (material: any) {
    return true
  }
})
export { Spriteline1MaterialProperty }

const viewer = new Viewer("cesiumContainer", {
  // 指定上下文
  contextOptions: {
    requestWebgl1: true,
  },
});

vec4 colorImage = texture2D(image, vec2(fract(st.s - time), st.t))

vec4 colorImage = texture(image, vec2(fract(st.s - time), st.t));

import Cesium from 'cesium';
 
// 创建一个新对象，包含所有原始的 Cesium 属性和方法
const CesiumExtensions = Object.assign({}, Cesium);
 
// 向该对象添加新的属性和方法
CesiumExtensions.myCustomMethod = function() {
  // ...
};
 
// 将原始的 Cesium 对象替换为新的对象
window.Cesium = CesiumExtensions;

function getGeojson() {
  // 使用primitive方式加载geojson
  let urlPath = './geojson/WaterDistributionMainLine.geojson'
  // 使用jQuery异步加载json数据
  $.get(urlPath, function (data) {
    let features = reactive([])
    if (data.features && data.features.length > 0) {
      features = reactive(data.features)
      CesiumMap.addDataToGlobe(toRaw(features))
    }
  })
}

export function addDataToGlobe(features) {
  const imageUrl = new URL(
    '../assets/images/specialEffects/lineYellow.png',
    import.meta.url
  ).href
  const instances = []
  for (let i = 0; i < features.length; i++) {
    for (let j = 0; j < features[i].geometry.coordinates.length; j++) {
      const positions = Cesium.Cartesian3.fromDegreesArray(
        features[i].geometry.coordinates[j].flat()
      )
      const polyline = new Cesium.PolylineGeometry({
        positions: positions,
        width: 2,
        vertexFormat: Cesium.PolylineMaterialAppearance.VERTEX_FORMAT
      })
      const polygon = new Cesium.GeometryInstance({
        geometry: polyline,
        id: i
      })
      instances.push(polygon)
    }
  }
 
  const material = new Cesium.Material({
    fabric: {
      type: 'Spriteline1',
      uniforms: {
        color: Cesium.Color.WHITE,
        image: imageUrl,
        transparent: true,
        time: 0
      },
      source: `
        czm_material czm_getMaterial(czm_materialInput materialInput)
        {
            czm_material material = czm_getDefaultMaterial(materialInput);
            vec2 st = materialInput.st;
            vec4 colorImage = texture2D(image, vec2(fract(st.s - time), st.t));
            material.alpha = colorImage.a;
            material.diffuse = colorImage.rgb / 2.0;
            return material;
        }
      `
    }
  })
 
  const polylinePrimitive = CesiumViewer.scene.primitives.add(
    new Cesium.Primitive({
      geometryInstances: instances,
      appearance: new Cesium.PolylineMaterialAppearance({
        flat: true,
        material: material
      })
    })
  )
 
  CesiumViewer.clock.onTick.addEventListener(function (clock) {
    const startTime = Cesium.JulianDate.toDate(
      CesiumViewer.clock.startTime
    ).getTime()
    const currentTime = Cesium.JulianDate.toDate(clock.currentTime).getTime()
    const elapsedTime = (currentTime - startTime) / 1000.0
    material.uniforms.time = elapsedTime
  })
}