• vue+cesium项目demo

    使用turf时在index.html中引用

    2. <script src="https://unpkg.com/@turf/turf/turf.min.js">script>

    2. <script setup>
    3. import { ErrorCodes, onMounted } from "vue";
    4.  
    5. import * as Cesium from "cesium";
    6. let viewer, pointDel, dataturf;
    7. function toDelpoint() {
    8.   console.log(viewer.entities);
    9.   // 直接删除
    10.   // viewer.entities.remove(pointDel)
    11.   // 删除所有
    12.   //  viewer.entities.removeAll()
    13.   // 删除指定
    14.   // viewer.entities.removeById('rectangleimg')
    15.   // 先拿到实体再删除
    16.   // const entityPoint = viewer.entities.getById("rectangleimg");
    17.   // viewer.entities.remove(entityPoint);
    18.  
    19.   viewer.dataSources.remove(dataturf);
    20. }
    21.  
    22. onMounted(() => {
    23.   // 设置cesium token
    24.   Cesium.Ion.defaultAccessToken =
    25.     "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhYzY2NGQ0My1hMjQxLTQxZDgtYjQwYy1mZjQ1YjVmYzljZDUiLCJpZCI6MjEzNDUyLCJpYXQiOjE3MTUwNzI2MTR9.ID13prfqYbHG4-WqCl9RF9cymnB3wXi4ckGO1BZvF4Y";
    26.  
    27.   // // 创建自定义图层
    28.   //  const esri=new Cesium.ArcGisMapServerImageryProvider({
    29.   //   url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
    30.   //   enablePickFeatures: false,
    31.   //  })
    32.  
    33.   //   // 初始化cesium
    34.   // // viewer是所有api的开始
    35.   // const viewer = new Cesium.Viewer("cesiumContatiner",{
    36.   //   imageryProvider:esri, //自定义图层，默认是谷歌的影响图层
    37.   //   // 地形图层
    38.   //   terrainProvider:Cesium.createWorldTerrain({
    39.   //     // requestWaterMask:true //水面特效
    40.   //   })
    41.   // });
    42.  
    43.   // 【控件】
    44.   viewer = new Cesium.Viewer("cesiumContatiner", {
    45.     timeline: false, // 时间轴
    46.     animation: false, // 动画小组件
    47.     geocoder: false, // 地理编码（搜索）组件
    48.     homeButton: false, // 首页，点击之后将视图跳转到默认视角
    49.     sceneModePicker: false, // 投影方式，切换2D、3D 和 Columbus View (CV) 模式。
    50.     baseLayerPicker: false, // 底图组件，选择三维数字地球的底图（imagery and terrain）。
    51.     navigationHelpButton: false, // 帮助按钮
    52.     fullscreenButton: false, // 全屏按钮
    53.  
    54.     // vrButton: false, // VR模式
    55.     selectionIndicator: false, //是否显示选取指示器组件
    56.     // shouldAnimate: true, // 自动播放动画控件
    57.     // shadows: true, // 是否显示光照投射的阴影
    58.     // terrainShadows: Cesium.ShadowMode.RECEIVE_ONLY, // 地质接收阴影`
    59.     infoBox: true, // 信息框
    60.   });
    61.   // 隐藏logo
    62.   viewer._cesiumWidget._creditContainer.style.display = "none";
    63.  
    64.   // promitive entity
    65.  
    66.   // entity 基于promitive封装的
    67.   // 完美封装，调用方便
    68.  
    69.   // promitive
    70.   // 更接近webgl底层
    71.   // 可以绘制更高级的图形
    72.  
    73.   const tileset = viewer.scene.primitives.add(
    74.     new Cesium.Cesium3DTileset({
    75.       url: Cesium.IonResource.fromAssetId(69380),
    76.     })
    77.   );
    78.   viewer.flyTo(tileset);
    79.  
    80.   // 线
    81.   var linestring1 = turf.lineString([
    82.     [-24, 63],
    83.     [-23, 60],
    84.     [-25, 65],
    85.     [-20, 69],
    86.   ]);
    87.   // Cesium.GeoJsonDataSource.load(linestring1).then(function (dataSource) {
    88.   //   viewer.dataSources.add(dataSource);
    89.   //   var entities = dataSource.entities.values;
    90.   //   for (var i = 0; i < entities.length; i++) {
    91.   //     var entity = entities[i];
    92.   //     entity.polyline.width = 2;
    93.   //     entity.polyline.material = Cesium.Color.RED;
    94.   //   }
    95.   //   viewer.zoomTo(dataSource);
    96.   // });
    97.   Cesium.GeoJsonDataSource.load(linestring1).then((res) => {
    98.     console.log(res);
    99.     const entity = res.entities.values[0];
    100.     entity.polyline.material = Cesium.Color.RED;
    101.     entity.polyline.width = 2;
    102.  
    103.     viewer.entities.add(entity);
    104.     // viewer.zoomTo(entity)
    105.   });
    106.  
    107.   // 多条线
    108.   var multiLine = turf.multiLineString([
    109.     [
    110.       [0, 0],
    111.       [5, 5],
    112.     ],
    113.     [
    114.       [6, 6],
    115.       [10, 10],
    116.     ],
    117.   ]);
    118.   Cesium.GeoJsonDataSource.load(multiLine).then((res) => {
    119.     viewer.dataSources.add(res);
    120.     dataturf = res;
    121.     //  viewer.zoomTo(res)
    122.   });
    123.  
    124.   // 注意：polygon首尾坐标要一致
    125.   var polygonturf = turf.polygon([
    126.     [
    127.       [-5, 52],
    128.       [-4, 56],
    129.       [-2, 51],
    130.       [-5, 52],
    131.     ],
    132.   ]);
    133.   const polygonline = Cesium.GeoJsonDataSource.load(polygonturf);
    134.   viewer.dataSources.add(polygonline);
    135.   // viewer.zoomTo(polygonline);
    136.  
    137.   // 多个多边形
    138.   var multiPoly = turf.multiPolygon([
    139.     [
    140.       [
    141.         [0, 0],
    142.         [0, 10],
    143.         [10, 10],
    144.         [10, 0],
    145.         [0, 0],
    146.       ],
    147.     ],
    148.     [
    149.       [
    150.         [12, 12],
    151.         [12, 23],
    152.         [23, 23],
    153.         [23, 12],
    154.         [12, 12],
    155.       ],
    156.     ],
    157.   ]);
    158.  
    159.   let multiPolyTurf = Cesium.GeoJsonDataSource.load(multiPoly);
    160.   viewer.dataSources.add(multiPolyTurf);
    161.   // viewer.zoomTo(multiPolyTurf);
    162.  
    163.   // let poram = Cesium.GeoJsonDataSource.load(
    164.   //   "../public/ne_10m_us_states.topojson"
    165.   // );
    166.   // viewer.dataSources.add(poram);
    167.   // viewer.zoomTo(poram)
    168.  
    169.   // 【kmz】
    170.   // let promise = Cesium.KmlDataSource.load("../public/gdpPerCapita2008.kmz");
    171.   // viewer.dataSources.add(promise);
    172.   // viewer.zoomTo(promise)
    173.  
    174.   // 【坐标转换】
    175.   //经纬度转笛卡尔坐标
    176.   // 返回的是一个笛卡尔坐标（z!=高度）
    177.   // const cartesian = Cesium.Cartesian3.fromDegrees(110, 20, 20); //经度、纬度、高度
    178.   // const cartesian2 = Cesium.Cartesian3.fromDegrees(110, 20, 30); //经度、纬度、高度
    179.   // // console.log(cartesian,cartesian2)
    180.   // // 1、笛卡尔坐标转经纬度坐标
    181.   // let cartographic = Cesium.Cartographic.fromCartesian(cartesian)
    182.   // //2、弧度坐标转角度坐标1
    183.   // // let lon=180 / Math.PI*cartographic.longitude
    184.   // // let lat=180 / Math.PI*cartographic.latitude
    185.   // //2、弧度坐标转角度坐标2(cesium自带的方法)
    186.   // let lon =Cesium.Math.toDegrees(cartographic.longitude)
    187.   // let lat =Cesium.Math.toDegrees(cartographic.latitude)
    188.  
    189.   // let height=cartographic.height
    190.   // console.log(lon,lat,height)
    191.  
    192.   //  【相机】
    193.   // const postition=Cesium.Cartesian3.fromDegrees(116.397128,39.916527,20000)
    194.   // // setView通过定义相机目的地（方向），直接跳转到目的地
    195.   // viewer.camera.setView({
    196.   //   destination:postition,
    197.   //   // 默认（0,-90,0）
    198.   //   orientation: {
    199.   //     heading: Cesium.Math.toRadians(0), // 方向 y 左右摇头
    200.   //     pitch: Cesium.Math.toRadians(-90), // 倾斜角度 x  上下点头  -90看地面  0看前方  90看天上
    201.   //     roll: 0, //z 歪头看
    202.   //   },
    203.   // })
    204.  
    205.   // 【相机】【飞行】flyTo 将相机从当前位置移动到新的位置
    206.   // flyTo快速切换视角,带飞行动画，可以设置飞行的时长
    207.   // const postition=Cesium.Cartesian3.fromDegrees(110,20,20000)
    208.   // viewer.camera.flyTo({
    209.   //   destination: postition,
    210.   //   duration:3, //单位秒
    211.   //   orientation: {
    212.   //     heading: Cesium.Math.toRadians(0), // 方向 y 左右摇头
    213.   //     pitch: Cesium.Math.toRadians(-90), // 倾斜角度 x  上下点头  -90看地面  0看前方  90看天上
    214.   //     roll: 0, //z 歪头看
    215.   //   },
    216.   // });
    217.  
    218.   // 【相机】
    219.   // lookAt将视角固定在设置的点位上，可以选择视角，但不能改变位置
    220.   // const position2=Cesium.Cartesian3.fromDegrees(110,20)
    221.   // viewer.camera.lookAt(position2,new Cesium.HeadingPitchRange(
    222.   //   Cesium.Math.toRadians(0),
    223.   //   Cesium.Math.toRadians(-90),
    224.   //   20000
    225.   //  )
    226.   // )
    227.  
    228.   // 实体 entity
    229.   // 写法一
    230.   // const point=new Cesium.Entity({
    231.   //   position:Cesium.Cartesian3.fromDegrees(120,30),
    232.   //   point:{
    233.  
    234.   //     pixelSize:20, //像素大小
    235.   //     color:Cesium.Color.RED,
    236.   //     // outlineColor:Cesium.Color.WHITE,
    237.   //     // outlineWidth:2,
    238.   //     // heightReference:Cesium.HeightReference.CLAMP_TO_GROUND
    239.   //   }
    240.   // })
    241.   // viewer.entities.add(point)
    242.   // // console.log(viewer.entities)
    243.   // viewer.zoomTo(point)
    244.  
    245.   // 方法二(推荐)
    246.   const point2 = viewer.entities.add({
    247.     id: "point",
    248.     position: Cesium.Cartesian3.fromDegrees(120, 30),
    249.     point: {
    250.       pixelSize: 20, //像素大小
    251.       color: Cesium.Color.RED,
    252.       outlineColor: Cesium.Color.WHITE,
    253.       outlineWidth: 20,
    254.       heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
    255.     },
    256.   });
    257.  
    258.   // viewer.zoomTo(point2)
    259.   // 与该实体相关联的广告牌。
    260.   const billboard = viewer.entities.add({
    261.     id: "billboard",
    262.     position: Cesium.Cartesian3.fromDegrees(116, 40, 10),
    263.     billboard: {
    264.       image: "../public/dw.png",
    265.       scale: 0.3,
    266.       color: Cesium.Color.RED,
    267.       // width:20,
    268.       // height:20
    269.     },
    270.   });
    271.  
    272.   // 【label】
    273.   const label = viewer.entities.add({
    274.     id: "label",
    275.     position: Cesium.Cartesian3.fromDegrees(112, 30, 4000),
    276.     label: {
    277.       text: "cesium",
    278.       font: "20px sans-serif",
    279.       fillColor: Cesium.Color.WHITE,
    280.       showBackground: true,
    281.       backgroundColor: Cesium.Color.BLACK.withAlpha(0.5),
    282.       backgroundPadding: new Cesium.Cartesian2(10, 10),
    283.       outlineColor: Cesium.Color.RED,
    284.       outlineWidth: 2,
    285.       style: Cesium.LabelStyle.FILL_AND_OUTLINE,
    286.       horizontalOrigin: Cesium.HorizontalOrigin.RIGHT,
    287.       verticalOrigin: Cesium.VerticalOrigin.TOP,
    288.       //  scaleByDistance: new Cesium.NearFarScalar(1.0e2, 1, 1.0e3, 0.2),//随着距离改变标注尺寸
    289.       //  pixelOffsetScaleByDistance: new Cesium.NearFarScalar(1.0e2, 1.0, 1.0e3, 0.2), //随着距离改变偏移量
    290.       //  translucencyByDistance:new Cesium.NearFarScalar(1.5e2,1,8.0e6,0.0),
    291.       //  pixelOffset:new Cesium.Cartesian2(0,1)
    292.     },
    293.   });
    294.  
    295.   // viewer.zoomTo(label);
    296.   // //线
    297.   const polyline = viewer.entities.add({
    298.     polyline: {
    299.       positions: Cesium.Cartesian3.fromDegreesArray([
    300.         118, 29, 119, 29, 118, 31,
    301.       ]), //返回笛卡尔坐标数组
    302.       width: 10,
    303.       material: Cesium.Color.RED,
    304.     },
    305.   });
    306.   // viewer.zoomTo(polyline)
    307.  
    308.   // 多边形
    309.   const polygon = viewer.entities.add({
    310.     id: "polygon",
    311.     polygon: {
    312.       // 左下角、右下角、右上、左上
    313.       hierarchy: Cesium.Cartesian3.fromDegreesArray([
    314.         121, 30, 123, 30, 122, 31, 120, 31,
    315.       ]),
    316.       material: Cesium.Color.RED.withAlpha(0.5),
    317.       height: 200000,
    318.       extrudedHeight: 10000,
    319.       heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
    320.       outline: true, //是否展示外线
    321.       outlineColor: Cesium.Color.WHITE,
    322.       outlineWidth: 2,
    323.       fill: true, //是否填充
    324.     },
    325.     // polygon: {
    326.     //   hierarchy: {
    327.     //     positions: Cesium.Cartesian3.fromDegreesArray([
    328.     //       121, 30, 123, 30, 122, 31, 120, 31,
    329.     //     ]),
    330.     //   },
    331.     //   material: Cesium.Color.RED.withAlpha(0.5),
    332.     // },
    333.   });
    334.   // viewer.zoomTo(polygon);
    335.  
    336.   // box
    337.   const box = viewer.entities.add({
    338.     position: Cesium.Cartesian3.fromDegrees(120, 30, 10000),
    339.     box: {
    340.       dimensions: new Cesium.Cartesian3(40000, 40000, 40000),
    341.       material: Cesium.Color.CYAN.withAlpha(0.5),
    342.       outline: true,
    343.       outlineColor: Cesium.Color.WHITE,
    344.       outlineWidth: 2,
    345.     },
    346.   });
    347.  
    348.   // viewer.zoomTo(box)
    349.  
    350.   // 椭圆
    351.   const ellipse = viewer.entities.add({
    352.     position: Cesium.Cartesian3.fromDegrees(110, 30),
    353.     ellipse: {
    354.       semiMinorAxis: 3000, //半短轴
    355.       semiMajorAxis: 5000, //半长轴
    356.       // material:Cesium.Color.DARKBLUE.withAlpha(0.5),
    357.       material: "../public/img.jpeg",
    358.       outline: true,
    359.       outlineColor: Cesium.Color.RED,
    360.       outlineWidth: 20,
    361.       rotation: Math.PI / 2, //选择角度
    362.       extrudedHeight: 4000,
    363.       fill: true,
    364.     },
    365.   });
    366.  
    367.   // viewer.zoomTo(ellipse)
    368.  
    369.   // 矩形
    370.   const rectangle = viewer.entities.add({
    371.     id: "rectangleimg",
    372.     rectangle: {
    373.       coordinates: Cesium.Rectangle.fromDegrees(116, 30, 117, 31),
    374.       material: "../public/girl.jpg",
    375.       outline: true,
    376.       outlineColor: Cesium.Color.WHITE,
    377.       outlineWidth: 2,
    378.       height: 100000,
    379.       extrudedHeight: 100000, //获取或设置数字属性，该属性指定矩形拉伸的高度。设置此属性将创建从高处开始并在此高度处结束的体积。
    380.       heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //获取或设置指定拉伸的 HeightReference 的属性。
    381.  
    382.       fill: true,
    383.     },
    384.   });
    385.  
    386.   // viewer.zoomTo(rectangle)
    387.  
    388.   // 组合
    389.   // const billboardZH = viewer.entities.add({
    390.   //   position: Cesium.Cartesian3.fromDegrees(116.17860748743055, 39.908307123610385, 100),
    391.   //   billboard: {
    392.   //     image: "../public/dw.png",
    393.   //     scale: 0.3,
    394.   //     color: Cesium.Color.YELLOW,
    395.   //   },
    396.   // });
    397.   // const lineZH = viewer.entities.add({
    398.   //   polyline: {
    399.   //     positions: Cesium.Cartesian3.fromDegreesArrayHeights([ 116.17860748743055, 39.908307123610385,0,116.17860748743055,39.908307123610385,100]),
    400.   //     // width: 5,
    401.   //     material: Cesium.Color.RED,
    402.   //   },
    403.   // });
    404.  
    405.   // const labelZH=viewer.entities.add({
    406.   //   position: Cesium.Cartesian3.fromDegrees(116.17860748743055, 39.908307123610385, 100),
    407.   //   label: {
    408.   //     text: "中海商务",
    409.   //     font: "24px sans-serif",
    410.   //     fillColor: Cesium.Color.RED,
    411.   //     outlineColor: Cesium.Color.WHITE,
    412.   //     outlineWidth: 2,
    413.   //     style: Cesium.LabelStyle.FILL_AND_OUTLINE,
    414.   //     pixelOffset:
    415.   //       new Cesium.Cartesian2(0, -50), //偏移量
    416.   //     // eyeOffset: new Cesium.Cartesian3(0, 0, 1000), //眼睛的偏移量
    417.   //    },
    418.   //  })
    419.  
    420.   // viewer.zoomTo(billboardZH);
    421.  
    422.   // 组合实体
    423.   const entity = viewer.entities.add({
    424.     position: Cesium.Cartesian3.fromDegrees(
    425.       116.17860748743055,
    426.       39.908307123610385,
    427.       100
    428.     ),
    429.     billboard: {
    430.       image: "../public/dw.png",
    431.       scale: 0.3,
    432.       color: Cesium.Color.YELLOW,
    433.     },
    434.     polyline: {
    435.       positions: Cesium.Cartesian3.fromDegreesArrayHeights([
    436.         116.17860748743055, 39.908307123610385, 0, 116.17860748743055,
    437.         39.908307123610385, 100,
    438.       ]),
    439.       // width: 5,
    440.       material: Cesium.Color.RED,
    441.     },
    442.     label: {
    443.       text: "中海商务",
    444.       font: "24px sans-serif",
    445.       fillColor: Cesium.Color.RED,
    446.       outlineColor: Cesium.Color.WHITE,
    447.       outlineWidth: 2,
    448.       style: Cesium.LabelStyle.FILL_AND_OUTLINE,
    449.       pixelOffset: new Cesium.Cartesian2(0, -50), //偏移量
    450.       // eyeOffset: new Cesium.Cartesian3(0, 0, 1000), //眼睛的偏移量
    451.     },
    452.   });
    453.  
    454.   // viewer.zoomTo(entity);
    455.  
    456.   pointDel = viewer.entities.add({
    457.     id: "pointDel",
    458.     position: Cesium.Cartesian3.fromDegrees(116.17860748743055, 39.908),
    459.     point: {
    460.       pixelSize: 50,
    461.       color: Cesium.Color.MEDIUMPURPLE,
    462.       outlineColor: Cesium.Color.LIME,
    463.       outlineWidth: 20,
    464.       heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
    465.     },
    466.   });
    467.  
    468.   // viewer.zoomTo(pointDel);
    469.   let lon,
    470.     lat,
    471.     num = 0;
    472.   const lineYD = viewer.entities.add({
    473.     polyline: {
    474.       positions: new Cesium.CallbackProperty(() => {
    475.         console.log(1);
    476.         num += 0.005;
    477.         lon = 116 + num;
    478.         lat = 35 + num;
    479.         if (lon < 117) {
    480.           return Cesium.Cartesian3.fromDegreesArray([116, 35, lon, lat]);
    481.         } else {
    482.           // 给positions赋值一个新的对象，不再需要CallbackProprty 提供
    483.           lineYD.polyline.positions = Cesium.Cartesian3.fromDegreesArray([
    484.             116,
    485.             35,
    486.             lon,
    487.             lat,
    488.           ]);
    489.         }
    490.       }, false), //传false，不传动不起来
    491.       width: 5,
    492.       material: Cesium.Color.RED,
    493.       // clampToGround:true
    494.     },
    495.   });
    496.  
    497.   // viewer.zoomTo(lineYD);
    498. });
    499. script>
    500.  
    501.  
    502.  
    503. <style scoped lang='scss'>
    504. #cesiumContatiner {
    505.   width: 100vw;
    506.   height: 100vh;
    507.   overflow: hidden;
    508.   // :deep .cesium-viewer-bottom {
    509.   //   display: none;
    510.   // }
    511. }
    512. .cesium_box {
    513.   position: relative;
    514. }
    515. .bthdel_point {
    516.   position: absolute;
    517.   top: 0;
    518.   left: 0;
    519.   width: 100px;
    520.  
    521.   text-align: center;
    522.   padding: 10px;
    523.   background: rgba(0, 0, 0, 0.5);
    524.   color: #fff;
    525.   border-radius: 5px;
    526.   cursor: pointer;
    527. }
    528. style>

  • 相关阅读:
    VSCODE解决git合并过程中的冲突问题；error: failed to push some refs to
    【IAP Kit】应用内支付订单参数相关问题解析
    测试环境搭建整套大数据系统（十四：报错-bash: /root: Is a directory
    HTML开篇之安装VSvode(用记事本编辑HTML)
    python中的range的详解
    6.26CF模拟赛E：价格最大化题解
    软考随记（二）
    C基础day8
    二次开发真的很难吗？低代码平台有话说
    我的设计模式之旅 ⑦ 观察者模式
  • 原文地址：https://blog.csdn.net/weixin_42120669/article/details/138725639