Cesium模型封装-Line

已于 2024-08-29 16:17:54 修改
阅读量118 收藏 2
点赞数 2
分类专栏： Cesium Vue 文章标签： javascript 前端 vue.js
于 2024-08-29 11:47:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/StupidlyGrass/article/details/141674125
版权
Vue 同时被 2 个专栏收录
16 篇文章 0 订阅
订阅专栏
Cesium
11 篇文章 0 订阅
订阅专栏

一、初始化地图

<template>
  <div class="cesium_map">
    <div id="cesiumContainer"></div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import { Line } from "../../utils/Model";

// ---------------------------<<数据>>---------------------------
const me = reactive({
  point: null,
});

// 点位数组
const pointArr = reactive([
  {
    lon: 110.645025,
    lat: 22.03158,
    alt: 5000,
    time: null,
  },
  {
    lon: 110.645025,
    lat: 22.16643590658971,
    alt: 5000,
    time: null,
  },
  {
    lon: 110.7480626299661,
    lat: 22.261761037919744,
    alt: 5000,
    time: null,
  },
  {
    lon: 110.8937798546077,
    lat: 22.261761037919744,
    alt: 5000,
    time: null,
  },
  {
    lon: 110.99674745330135,
    lat: 22.16643590658971,
    alt: 5000,
    time: null,
  },
  {
    lon: 110.99674745330135,
    lat: 22.03158,
    alt: 5000,
    time: null,
  },
  {
    lon: 110.8937798546077,
    lat: 21.936190428417305,
    alt: 5000,
    time: null,
  },
  {
    lon: 110.7483984431316,
    lat: 21.936190428417305,
    alt: 5000,
    time: null,
  },
  {
    lon: 110.645025,
    lat: 22.03158,
    alt: 5000,
    time: null,
  },
]);

// ---------------------------<<函数>>---------------------------
// 初始化地图
const initMap = () => {
  // 在线地图token
  Cesium.Ion.defaultAccessToken = "map_token";

  // 在线地图
  let imageryProvider = new Cesium.ArcGisMapServerImageryProvider({
    url: "map_url",
  });

  window.viewer = new Cesium.Viewer("cesiumContainer", {
    geocoder: false, // 右上角 搜索
    homeButton: false, // 右上角 Home
    sceneModePicker: false, // 右上角 2D/3D切换
    baseLayerPicker: false, // 右上角 地形
    navigationHelpButton: false, // 右上角 Help
    animation: false, // 左下角 圆盘动画控件
    timeline: false, // 时间轴
    fullscreenButton: false, // 右下角 全屏控件
    vrButton: false, // 如果设置为true，将创建VRButton小部件。
    scene3DOnly: false, // 每个几何实例仅以3D渲染以节省GPU内存
    infoBox: false, // 隐藏点击要素后的提示信息
    imageryProvider: imageryProvider, // 地图地址
    shouldAnimate: true,
  });
  viewer._cesiumWidget._creditContainer.style.display = "none";

  viewer.scene.globe.enableLighting = false;
  viewer.shadows = false;

  viewer.scene.globe.enableLighting = false;
  Cesium.Camera.DEFAULT_VIEW_FACTOR = 0.2; // 摄像机到地图的距离放大倍数
  viewer.camera.flyHome(0);

  // // 调整画面精细度
  viewer.resolutionScale = 1; //默认值为1.0
  viewer.scene.backgroundColor = Cesium.Color.TRANSPARENT;
  viewer.scene.globe.baseColor = Cesium.Color.TRANSPARENT;
  // //是否开启抗锯齿
  viewer.scene.fxaa = false;
  viewer.scene.postProcessStages.fxaa.enabled = false;
  viewer.scene.globe.showGroundAtmosphere = true;

  // 设置相机位置
  viewer.scene.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(
      110.82474250408677,
      22.095133670052277,
      80000
    ),
    orientation: {
      heading: Cesium.Math.toRadians(0),
      pitch: Cesium.Math.toRadians(-90),
      roll: 0.0,
    },
  });

  //取消双击事件
  viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
    Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
  );
};

// 初始化模型
const initModel = () => {
     // 请查看 “步骤三、步骤四” 使用示例
};
// 初始化模型类
const initModelClass = () => {
  me.point = new Line(viewer, Cesium);
};

// ---------------------------<<执行>>---------------------------
// 挂载后生命周期
onMounted(() => {
  initMap();
  initModelClass();
  initModel();
});
</script>

<style lang="less" scoped>
.cesium_map {
  width: 100%;
  height: 100%;

  #cesiumContainer {
    width: 100%;
    height: 100%;
  }
}
</style>

二、封装文件

        标记有***注释的参数为必传参数；

        其他为可选参数；

export class Line {
  // 构造函数
  constructor(viewer, Cesium) {
    this.viewer = viewer
    this.Cesium = Cesium
  }

  // 坐标转换
  // Cesium.Cartesian3.fromDegreesArrayHeights：[经,纬,高,经,纬,高,...]
  // Cesium.Cartesian3.fromDegreesArray:[经,纬,经,纬,...]
  // Cesium.Cartesian3.fromDegrees:[经,纬]

  // entitiesLine
  entitiesLine(option) {
    let {
      id, // 线id***
      positions, // 线坐标***
      material, // 线材质***
      name = 'entitiesLine',
      width = 2, // 线宽度
      clampToGround = true, // 是否贴地
      zIndex = 999, // 线渲染层级
      ddc = { // 显示区间
        start: 0,
        end: 150000000
      },
      show = true, // 是否显示
    } = option

    this.viewer.entities.add({
      id, // 线条id
      name, // 线条名称
      polyline: {
        positions, // 参数依次为[经度1, 纬度1, 高度1, 经度2, 纬度2, 高度2]
        width, // 宽度
        material, // 线的颜色
        clampToGround, // 是否贴地
        zIndex,  // 线的顺序,仅当`clampToGround`为true并且支持地形上的折线时才有效。
        vertexFormat: Cesium.PolylineMaterialAppearance.VERTEX_FORMAT,
        distanceDisplayCondition: new this.Cesium.DistanceDisplayCondition(
          ddc.start,
          ddc.end
        ), // 显示在距相机的距离处的属性，多少区间内是可以显示的
        show // 是否显示
      },
    });
  }

  // primitivesLine
  primitivesLine(option) {
    let {
      positions, // 线坐标***
      material, // 线材质***
      width = 5, // 线宽度
      releaseGeometry = true, // 是否自动清空geometryInstances配置
      geometryInstances = new Cesium.GeometryInstance({
        id: "fluorescence", // 线条id，此处id可以重复添加
        name: "fluorescence", // 线条name
      }), // 配置实例信息
      ddc = {
        start: 0,
        end: 150000000
      }, // 显示区间
      show = true // 是否显示
    } = option

    var polyLines = this.viewer.scene.primitives.add(
      new Cesium.PolylineCollection()
    );

    polyLines.add({
      positions,
      width,
      material,
      geometryInstances,
      releaseGeometryInstances: releaseGeometry, // 默认为true，自动清空geometryInstances配置
      distanceDisplayCondition: new this.Cesium.DistanceDisplayCondition(
        ddc.start,
        ddc.end
      ), // 显示在距相机的距离处的属性，多少区间内是可以显示的
      show
    });
  }
}

三、entitiesLine示例

1、实线（3D）
（1）全参数代码
const initModel = () => {
  let temp = ref([]);

  for (let i = 0; i < pointArr.length; i++) {
    temp.value.push(pointArr[i].lon, pointArr[i].lat, pointArr[i].alt);
  }

  me.line.entitiesLine({
    id: "solidLine", // 线条id***
    name: "solidLine", // 线条name
    // 参数依次为[经度1, 纬度1, 高度1, 经度2, 纬度2, 高度2]
    positions: Cesium.Cartesian3.fromDegreesArrayHeights(temp.value), // 线条坐标***
    width: 2,
    material: Cesium.Color.fromCssColorString("tomato"), // 线条材质：通过材质控制线条类型***
    clampToGround: false, // 是否贴地
    zIndex: 1, // clampToGround = true才生效
    ddc: {
      start: 0,
      end: 150000000,
    }, //显示在距相机的距离处的属性，多少区间内是可以显示的
    show: true, // 是否显示线条
  });
}
（2）仅必传参数代码
const initModel = () => {
  let temp = ref([]);

  for (let i = 0; i < pointArr.length; i++) {
    temp.value.push(pointArr[i].lon, pointArr[i].lat, pointArr[i].alt);
  }

  me.line.entitiesLine({
    id: "solidLine", // 线条id***
    // 参数依次为[经度1, 纬度1, 高度1, 经度2, 纬度2, 高度2]
    positions: Cesium.Cartesian3.fromDegreesArrayHeights(temp.value), // 线条坐标***
    material: Cesium.Color.fromCssColorString("tomato"), // 线条材质：通过材质控制线条类型***
  });
}
（3）效果

2、虚线（3D）
（1）全参数代码
const initModel = () => {
  me.line.entitiesLine({
    id: "dashedLine", // 线条id***
    name: "dashedLine", // 线条name
    positions: Cesium.Cartesian3.fromDegreesArrayHeights([
      110.82474250408677, 22.095133670052277, 0, 110.645025, 22.03158, 5000,
    ]), // 线条坐标***
    material: new Cesium.PolylineDashMaterialProperty({
      color: Cesium.Color.YELLOW, // 短划线颜色
      dashLength: 20, // 短划线长度
    }), // 线条材质：通过材质控制线条类型***
    width: 2, // 线条宽度，default:2
    clampToGround: false, // 是否贴地，default:false
    zIndex: 1, // 线条层级，clampToGround = true才生效，default:999
    ddc: {
      start: 0,
      end: 150000000,
    }, //显示在距相机的距离处的属性，多少区间内是可以显示的，default:{   start: 0,end: 150000000,}
    show: true, // 是否显示线条，default:true
  });
}
（2）仅必传参数代码
const initModel = () => {
  me.line.entitiesLine({
    id: "dashedLine", // 线条id***
    positions: Cesium.Cartesian3.fromDegreesArrayHeights([
      110.82474250408677, 22.095133670052277, 0, 110.645025, 22.03158, 5000,
    ]), // 线条坐标***
    material: new Cesium.PolylineDashMaterialProperty({
      color: Cesium.Color.YELLOW, // 短划线颜色
      dashLength: 20, // 短划线长度
    }), // 线条材质：通过材质控制线条类型***
  });
}
（3）效果

3、直线（2D）
（1）全参数代码
const initModel = () => {
  me.line.entitiesLine({
    id: "straightLine", // 线条id***
    name: "straightLine", // 线条name
    positions: Cesium.Cartesian3.fromDegreesArray([
      110.82474250408677, 22.095133670052277, 110.645025, 22.16643590658971,
    ]),
    // 线条坐标***
    material: Cesium.Color.fromCssColorString("yellow"), // 线条材质：通过材质控制线条类型***，必传
    width: 2, // 线条宽度，default:2
    ddc: {
      start: 0,
      end: 150000000,
    }, //显示在距相机的距离处的属性，多少区间内是可以显示的，default:{   start: 0,end: 150000000,}
    show: true, // 是否显示线条，default:true
  });
}
（2）仅必传参数代码
const initModel = () => {
  me.line.entitiesLine({
    id: "straightLine", // 线条id***
    positions: Cesium.Cartesian3.fromDegreesArray([
      110.82474250408677, 22.095133670052277, 110.645025, 22.16643590658971,
    ]),
    // 线条坐标***
    material: Cesium.Color.fromCssColorString("yellow"), // 线条材质：通过材质控制线条类型***
  });
}
（3）效果

4、虚线（2D）
（1）全参数代码
const initModel = () => {
  me.line.entitiesLine({
    id: "groundDashedLine", // 线条id***
    name: "groundDashedLine", // 线条name
    positions: Cesium.Cartesian3.fromDegreesArray([
      110.82474250408677, 22.095133670052277, 110.7480626299661,
      22.261761037919744,
    ]), // 线条坐标***
    material: new Cesium.PolylineDashMaterialProperty({
      color: Cesium.Color.ORANGE, // 短划线颜色
      dashLength: 20, // 短划线长度
    }), // 线条材质：通过材质控制线条类型***
    ddc: {
      start: 0,
      end: 150000000,
    }, //显示在距相机的距离处的属性，多少区间内是可以显示的，default:{   start: 0,end: 150000000,}
    show: true, // 是否显示线条，default:true
  });
}
（2）仅必传参数代码
const initModel = () => {
  me.line.entitiesLine({
    id: "groundDashedLine", // 线条id***
    positions: Cesium.Cartesian3.fromDegreesArray([
      110.82474250408677, 22.095133670052277, 110.7480626299661,
      22.261761037919744,
    ]), // 线条坐标***
    material: new Cesium.PolylineDashMaterialProperty({
      color: Cesium.Color.ORANGE, // 短划线颜色
      dashLength: 20, // 短划线长度
    }), // 线条材质：通过材质控制线条类型***
  });
}
（3）效果

5、箭头线（2D）
（1）全参数代码
const initModel = () => {
  me.line.entitiesLine({
    id: "arrowLine", // 线条id***
    name: "arrowLine", // 线条name
    positions: Cesium.Cartesian3.fromDegreesArray([
      110.82474250408677, 22.095133670052277, 110.7980626299661,
      22.261761037919744,
    ]), // 线条坐标***
    width:10,
    material: new Cesium.PolylineArrowMaterialProperty(Cesium.Color.CYAN), // 线条材质：通过材质控制线条类型***
    ddc: {
      start: 0,
      end: 150000000,
    }, //显示在距相机的距离处的属性，多少区间内是可以显示的，default:{   start: 0,end: 150000000,}
    show: true, // 是否显示线条，default:true
  });
}
（2）仅必传参数代码
const initModel = () => {
  me.line.entitiesLine({
    id: "arrowLine", // 线条id***
    positions: Cesium.Cartesian3.fromDegreesArray([
      110.82474250408677, 22.095133670052277, 110.7980626299661,
      22.261761037919744,
    ]), // 线条坐标***
    material: new Cesium.PolylineArrowMaterialProperty(Cesium.Color.CYAN), // 线条材质：通过材质控制线条类型***
  });
}
（3）效果

6、测向线（3D）
（1）全参数代码
const aggregate = ref([
    110.82474250408677,
    22.095133670052277,
    0,
    110.645025,
    22.03158,
    5000
  ])

const initModel = () => {
  me.line.entitiesLine({
    id: "sideLine", // 线条id***
    name: "sideLine", // 线条name
    positions: new Cesium.CallbackProperty(() => {
      return aggregate.value;
    }, false), //  线条坐标***
    material: new Cesium.StripeMaterialProperty({
      evenColor: Cesium.Color.WHITE,
      oddColor: Cesium.Color.TOMATO,
      repeat: 3,
    }), // 线条材质***
    width: 5, // 线条宽度
    clampToGround: false, // 是否贴地
    zIndex: 999, // 线条层级，clampToGround = true才生效
    ddc: {
      start: 0,
      end: 150000000,
    },
    show: true,
  });
}

// 更新测向线
updateSideLine(lon,lat,height){
  aggregate.value = Cesium.Cartesian3.fromDegreesArrayHeights([
    110.82474250408677,
    22.095133670052277,
    0,
    lon, // 结束点经度 
    lat, // 结束点纬度
    height, // 结束点高度
  ]);
}
（2）仅必传参数代码
const aggregate = ref([
    110.82474250408677,
    22.095133670052277,
    0,
    110.645025,
    22.03158,
    5000
  ])

const initModel = () => {
  me.line.entitiesLine({
    id: "sideLine", // 线条id***
    positions: new Cesium.CallbackProperty(() => {
      return aggregate.value;
    }, false), // 线条坐标***
    material: new Cesium.StripeMaterialProperty({
      evenColor: Cesium.Color.WHITE,
      oddColor: Cesium.Color.TOMATO,
      repeat: 3,
    }), // 线条材质***
  });
}

// 更新测向线
updateSideLine(lon,lat,height){
  aggregate.value = Cesium.Cartesian3.fromDegreesArrayHeights([
    110.82474250408677,
    22.095133670052277,
    0,
    lon, // 结束点经度 
    lat, // 结束点纬度
    height, // 结束点高度
  ]);
}
（3）效果

四、primitivesLine示例

1、直线（2D）
（1）全参数代码
const initModel = () => {
  me.line.primitivesLine({
    // 参数依次为[经度1, 纬度1, 高度1, 经度2, 纬度2, 高度2]
    positions: Cesium.PolylinePipeline.generateCartesianArc({
      positions: Cesium.Cartesian3.fromDegreesArray([
        110.82474250408677, 22.095133670052277, 110.8937798546077,
        22.261761037919744,
      ]),
    }), // 线条坐标***
    material: Cesium.Material.fromType("Color", {
      color: new Cesium.Color(5.0, 0, 0, 1.0),
    }), // 线条材质：通过材质控制线条类型***
    width: 2,
    releaseGeometry: false,
    geometryInstances: new Cesium.GeometryInstance({
      id: "fluorescence", // 线条id***
      name: "fluorescence", // 线条name
    }),
    ddc: {
      start: 0,
      end: 150000000,
    }, //显示在距相机的距离处的属性，多少区间内是可以显示的
    show: true, // 是否显示线条
  });
}
（2）仅必传参数代码
const initModel = () => {
  me.line.primitivesLine({
    // 参数依次为[经度1, 纬度1, 高度1, 经度2, 纬度2, 高度2]
    positions: Cesium.PolylinePipeline.generateCartesianArc({
      positions: Cesium.Cartesian3.fromDegreesArray([
        110.82474250408677, 22.095133670052277, 110.8937798546077,
        22.261761037919744,
      ]),
    }), // 线条坐标***
    material: Cesium.Material.fromType("Color", {
      color: new Cesium.Color(5.0, 0, 0, 1.0),
    }), // 线条材质：通过材质控制线条类型***
  });
}
（3）效果

2、Z字形线（2D）
（1）全参数代码
const initModel = () => {
  me.line.primitivesLine({
    // 参数依次为[经度1, 纬度1, 高度1, 经度2, 纬度2, 高度2]
    positions: Cesium.PolylinePipeline.generateCartesianArc({
      positions: Cesium.Cartesian3.fromDegreesArray([
        110.82474250408677, 22.095133670052277, 110.99674745330135,
        22.16643590658971, 110.82474250408677, 22.055133670052277,
        110.99674745330135, 22.095133670052277,
      ]),
    }), // 线条位置***
    material: Cesium.Material.fromType(Cesium.Material.PolylineOutlineType, {
      color: Cesium.Color.YELLOW,
      outlineWidth: 3.0,
      outlineColor: Cesium.Color.RED,
    }), // 线条材质：通过材质控制线条类型***
    width: 5,
    releaseGeometry: false,
    geometryInstances: new Cesium.GeometryInstance({
      id: "fluorescence", // 线条id***
      name: "fluorescence", // 线条name
    }),
    ddc: {
      start: 0,
      end: 150000000,
    }, //显示在距相机的距离处的属性，多少区间内是可以显示的
    show: true, // 是否显示线条
  });
}
（2）仅必传参数代码
const initModel = () => {
  me.line.primitivesLine({
    // 参数依次为[经度1, 纬度1, 高度1, 经度2, 纬度2, 高度2]
    positions: Cesium.PolylinePipeline.generateCartesianArc({
      positions: Cesium.Cartesian3.fromDegreesArray([
        110.82474250408677, 22.095133670052277, 110.99674745330135,
        22.16643590658971, 110.82474250408677, 22.055133670052277,
        110.99674745330135, 22.095133670052277,
      ]),
    }), // 线条位置***
    material: Cesium.Material.fromType(Cesium.Material.PolylineOutlineType, {
      color: Cesium.Color.YELLOW,
      outlineWidth: 3.0,
      outlineColor: Cesium.Color.RED,
    }), // 线条材质：通过材质控制线条类型***
  });
}
（3）效果

3、荧光线（2D）
（1）全参数代码
const initModel = () => {
  me.line.primitivesLine({
    // 参数依次为[经度1, 纬度1, 高度1, 经度2, 纬度2, 高度2]
    positions: Cesium.PolylinePipeline.generateCartesianArc({
      positions: Cesium.Cartesian3.fromDegreesArray([
        110.82474250408677, 22.095133670052277, 110.99674745330135, 22.03158,
      ]),
    }), // 线条位置***
    material: Cesium.Material.fromType(Cesium.Material.PolylineGlowType, {
      glowPower: 0.2,
      taperPower: 0.2,
      color: new Cesium.Color(1.0, 0.5, 0.8, 1.0),
    }), // 线条材质：通过材质控制线条类型***
    width: 5,
    releaseGeometry: false,
    geometryInstances: new Cesium.GeometryInstance({
      id: "fluorescence", // 线条id***
      name: "fluorescence", // 线条name
    }),
    ddc: {
      start: 0,
      end: 150000000,
    }, //显示在距相机的距离处的属性，多少区间内是可以显示的
    show: true, // 是否显示线条
  });
}
（2）仅必传参数代码
const initModel = () => {
  me.line.primitivesLine({
    // 参数依次为[经度1, 纬度1, 高度1, 经度2, 纬度2, 高度2]
    positions: Cesium.PolylinePipeline.generateCartesianArc({
      positions: Cesium.Cartesian3.fromDegreesArray([
        110.82474250408677, 22.095133670052277, 110.99674745330135, 22.03158,
      ]),
    }), // 线条位置***
    material: Cesium.Material.fromType(Cesium.Material.PolylineGlowType, {
      glowPower: 0.2,
      taperPower: 0.2,
      color: new Cesium.Color(1.0, 0.5, 0.8, 1.0),
    }), // 线条材质：通过材质控制线条类型***
  });
}
（3）效果

4、箭头线（2D）
（1）全参数代码
const initModel = () => {
  me.line.primitivesLine({
    // 参数依次为[经度1, 纬度1, 高度1, 经度2, 纬度2, 高度2]
    positions: Cesium.PolylinePipeline.generateCartesianArc({
      positions: Cesium.Cartesian3.fromDegreesArray([
        110.82474250408677, 22.095133670052277, 110.8937798546077,
        21.936190428417305,
      ]),
    }), // 线条位置***
    material: Cesium.Material.fromType(Cesium.Material.PolylineArrowType, {
      color: Cesium.Color.CYAN,
    }), // 线条材质：通过材质控制线条类型***
    width: 5,
    releaseGeometry: false,
    geometryInstances: new Cesium.GeometryInstance({
      id: "fluorescence", // 线条id***
      name: "fluorescence", // 线条name
    }),
    ddc: {
      start: 0,
      end: 150000000,
    }, //显示在距相机的距离处的属性，多少区间内是可以显示的
    show: true, // 是否显示线条
  });
}
（2）仅必传参数代码
const initModel = () => {
  me.line.primitivesLine({
    // 参数依次为[经度1, 纬度1, 高度1, 经度2, 纬度2, 高度2]
    positions: Cesium.PolylinePipeline.generateCartesianArc({
      positions: Cesium.Cartesian3.fromDegreesArray([
        110.82474250408677, 22.095133670052277, 110.8937798546077,
        21.936190428417305,
      ]),
    }), // 线条位置***
    material: Cesium.Material.fromType(Cesium.Material.PolylineArrowType, {
      color: Cesium.Color.CYAN,
    }), // 线条材质：通过材质控制线条类型***
  });
}
（3）效果

5、拖尾线
（1）全参数代码
const initModel = () => {
  me.line.primitivesLine({
    // 参数依次为[经度1, 纬度1, 高度1, 经度2, 纬度2, 高度2]
    positions: Cesium.PolylinePipeline.generateCartesianArc({
      positions: Cesium.Cartesian3.fromDegreesArray([
        110.7483984431316, 21.936190428417305, 110.82474250408677,
        22.095133670052277,
      ]),
    }), // 线条位置***
    material: Cesium.Material.fromType(Cesium.Material.FadeType, {
      repeat: false,
      fadeInColor: Cesium.Color.CYAN,
      fadeOutColor: Cesium.Color.CYAN.withAlpha(0),
      time: new Cesium.Cartesian2(0.0, 0.0),
      fadeDirection: {
        x: true,
        y: false,
      },
    }), // 线条材质：通过材质控制线条类型***
    width: 5,
    releaseGeometry: false,
    geometryInstances: new Cesium.GeometryInstance({
      id: "fluorescence", // 线条id***
      name: "fluorescence", // 线条name
    }),
    ddc: {
      start: 0,
      end: 150000000,
    }, //显示在距相机的距离处的属性，多少区间内是可以显示的
    show: true, // 是否显示线条
  });
}
（2）仅必传参数代码
const initModel = () => {
  me.line.primitivesLine({
    // 参数依次为[经度1, 纬度1, 高度1, 经度2, 纬度2, 高度2]
    positions: Cesium.PolylinePipeline.generateCartesianArc({
      positions: Cesium.Cartesian3.fromDegreesArray([
        110.7483984431316, 21.936190428417305, 110.82474250408677,
        22.095133670052277,
      ]),
    }), // 线条位置***
    material: Cesium.Material.fromType(Cesium.Material.FadeType, {
      repeat: false,
      fadeInColor: Cesium.Color.CYAN,
      fadeOutColor: Cesium.Color.CYAN.withAlpha(0),
      time: new Cesium.Cartesian2(0.0, 0.0),
      fadeDirection: {
        x: true,
        y: false,
      },
    }), // 线条材质：通过材质控制线条类型***
  });
}
（3）效果

呆呆的小草
关注
专栏目录
Cesium 展示——风流场制作，制作风场可视化
虎康的博客
09-09 1675
准备数据：将风速和方向的数据保存在对应的数组中，通常使用网格格式来表示。在Cesium中加载风场需要先准备好相关的数据，包括风速和方向的数据。的颜色、大小、旋转和透明度等属性，以及箭头或风车的方向、角度等属性，使其在地球表面上正确地显示风场。注意，上面的示例代码中仅为了演示如何加载风场，实际上需要根据具体的数据格式和需求来适当地修改代码。属性上指定要显示的图像或模型，例如箭头或风车的图片或模型。创建实体：在Cesium中，可以使用。设置属性： 在实体的属性中，可以设置。属性上指定风场的位置，然后在实体的。
Cesium 实体、3d瓦片、鼠标事件、三维模型、粒子效果、点聚合、数据加载
zhushanlin的博客
05-26 143
1.3 由Geometry(几何形状)、(Appearance)外观组成…1.1 更接近底层,性能消耗较小，要素很多时使用primitive。7、加载 load3dtiles。1、实体 primitive。1.2 可以绘制高级图形。
三维地图Cesium，加载一个模型，模型沿着给定的一组经纬度路线移动
最新发布
qq_920189602的博客
06-09 2024
三维地图Cesium，加载一个模型，模型沿着给定的一组经纬度路线移动 1、加载指定可自定义火车模型 2、移动的路线可以自定义修改，也可以在地图上自己选择移动路线(取路线代码已有) 3、给定指定的移动速度 4、视角切换(第一视角、自由视角、跟随视角) 5、根据指定的经纬度点为起点开始移动 6、停止移动、开始移动、到站提示、从起点重新移动、默认相机的视角 7、根据实际业务，接口获取获取的速度、移动路线、车的状态(前进、静止、后退)来控制模型的状态
Cesium模型调整
12-22
大家下载了之后，把资源替换成你本地的，然后看下控制台，有的方法得自己改下，别再问为啥跑不了了。
Cesium 模型移动、调转方向和视角跟随
weixin_44384273的博客
01-04 2481
Cesium.js 模型运动、方向调整、视角跟随
cesium模型轨迹移动
weixin_45501117的博客
08-05 2732
模型根据轨迹移动
cesium实现模型动态移动效果
热门推荐
专注GIS开发
04-02 1万+
cesium实现模型动态移动效果
cesium拖拽模型到地图中
m0_63701303的博客
12-27 716
cesium拖拽模型到地图中
基于 React hooks + Typescript + Cesium 实现加载模型数据，拾取三维模型对象
jiegiser博客
12-07 590
功能介绍 本例子基于 react hooks + ts + Cesium 实现加载模型数据，拾取三维模型对象；并将模型对象属性进行展示。封装对应的属性展示面板（跟随场景移动）以及暴露回调函数，获取拾取对象的属性； 后续将分享一些下面的功能： 图层管理（√） dom 点扩散（√） 轨迹回放（√） 测量（√） 坐标拾取（√） 加载模型数据，拾取三维模型（√） 地下模式 单体化 粒子特效 视频融合 有其他需要实现的功能，大家可以评论哈 实现思路 拾取三维模型对象，也是很简单的，主要通过 viewer.s
基于 React hooks + Typescript + Cesium 通过 dom 实现扩散点绘制并封装组件
jiegiser博客
11-27 1678
本例子基于 react hooks + ts + Cesium 通过 dom 实现扩散点的绘制，并封装对应的组件。实现可以自定义文字、文字样式、点的样式以及位置等。 先上截图： 实现思路： 本例子是基于根据获取在更新或呈现场景之前将引发的事件：viewer.scene.preUpdate 方法来更新 dom 位置，这个函数相当于每帧刷新之前都会调用此函数。然后根据点的位置通过 Cesium.SceneTransforms.wgs84ToWindowCoordinates 方法来将 WGS84 坐标中的位置
cesium实景模型自动旋转
01-22
实景模型自动旋转，左键选中模型，开始旋转，右键结束旋转
cesium 局部加载_cesium自定义气泡窗口infoWindow后续优化篇 - GIS之家
weixin_30486717的博客
02-01 621
摘要：http://www.cnblogs.com/giserhome/p/6248858.html该篇文章实现的自定义气泡窗口是基于修改cesium源代码基础上，这种做法只是援兵之计，凑合应付的，投机取巧罢了，实际上是不太适合的，cesiumapi更新版本替换，又得手动的去设置一下源代码；本篇则是从另一个角度真正的实现了自定义气泡窗口，气泡窗口的样式定义则是leaflet风格的，效果截图如下：具...
84.（cesium篇）cesium模型在地形上运动
地图之家
06-22 417
地图之家总目录（订阅之前建议先查看该博客） 文章末尾处提供保证可运行完整代码包，运行如有问题，可“私信”博主。 效果如下所示： 下面献上完整代码，代码重要位置会做相应解释
Cesium 模型拖动
大洪的专栏
11-18 2128
同上一篇 模型旋转、缩放 一样，模型拖动也是很常见的操作。 我在网上找了几篇关于模型拖放的博客，修改并进行了封装，使用起来会更加方便一些。
Cesium 实现拖动点或模型
做GIS梦的人
08-15 3672
在Cesium的三维空间里，点和模型都是Entity，添加方式很类似，只是 对应的数据源不一样而已。在Cesium里如何实现点或模型随鼠标拖动的效果。这里来简单介绍一下相关代码。
vue+cesium实现模型按轨迹运动
weixin_47275670的博客
02-06 7514
借助cesiumJs实现glb模型的加载及按轨迹运动，首先需要准备的是glb模型、3dtiles文件。
Cesium实现模型按照指定路线移动（七）
曹进的博客
06-10 3846
Cesium实现模型按照指定路线移动
CesiumForUnity详解二（加载自定义建筑模型，移动到指定位置）
weixin_39543044的博客
04-12 2933
CesiumForUnity
cesium-3d-tiles-tools
10-05
Cesium-3d-tiles-tools是一个工具集，用于处理和操作3D Tiles格式的数据。3D Tiles是一种用于管理和传输大规模的三维地理数据的开放标准。Cesium-3d-tiles-tools具有多种功能，可以使用户更加方便和高效地处理3D ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值