Cesium 的各種定位方法匯總-未完待續

/*
 * @Author: 蘋果園dog
 * @Date: 2020-10-31 21:50:33
 * @LastEditTime: 2020-11-05 23:06:14
 * @LastEditors: Please set LastEditors
 * @Description: Cesium 的各種定位方法匯總，只列出項目中經常使用的，如果不夠靈活，可直接調用Cesium官方API，也很方便。
 * Cesium的定位從效果上包含兩種：直接定位、飛行定位。在方法封裝上，本狗姑且將直接定位分類為zoomTo系列，飛行定位分類flyTo。
 * 定位的對象上包括：坐標點、矩形范圍、entities、3dtiles、gltf、kml、geojson、影像、地形、geometry 
 * Cesium的定位主要是使用Camera對象和Viewer對象，Viewer的定位zoomTo,flyTo等方法是較高級別的函數，可以定位到Entity、3dtiles、DataSource等添加到三維球上顯示的實體，
 * Viewer的定位方法內部都是調用Camera的相關定位方法，針對不同的定位對象，通過一些列計算得出傳入實體的合適定位范圍和攝像機視角，然后定位，使用起來很方便。
 * Camera的flyTo、flyToBoundingSphere、lookat、setView等方法是較低級別函數，通過定位坐標和角度參數的傳入，精細化控制定位視角，靈活。
 * @FilePath: \web\cesiumS\cesium\cesium\mytest\朝花夕拾\定位\cesiumLocateUtil.js
 */
var cesiumLocateUtil={
    zoomTo: {

    },
    flyTo: {
        /**
         * @description: 飛行定位到一個笛卡爾空間直角坐標點位置
         * @param {Cartesian3} destination 目標點 Cartesian3
         * @param {Number} heading  默認=0.0   偏航角 正北,由正北向東偏向為正
         * @param {*} pitch=-90     俯仰角 垂直向下， ENU局部坐標系中XY平面的旋轉角度，平面下為負，上為正，
         * @param {*} range=0.0   距目標點距離
         * @param {*} duration=3   持續時間
         * @param {*} callBack=null   回調函數，定位完成后執行
         */
        flyToPoint: function (destination, heading=0.0, pitch=-90, range=0.0, duration=3, callBack=null) {
            if (!viewer) {
                console.log('三維球未初始化！');
                return;
            }
            if (!destination) {
                console.log('定位目標點不對！');
                return;
            }
            var boundingSphere=new Cesium.BoundingSphere(destination, 0.0);
            viewer.camera.flyToBoundingSphere(boundingSphere, {
                duration: duration,
                maximumHeight: undefined,
                complete: function () {
                    if (callBack) {
                        callBack();
                    }else{
                        console.log('定位失敗！');
                    }
                },
                cancel: function () {
                    console.log('定位取消！');
                },
                offset: {
                    heading: Cesium.Math.toRadians(heading),
                    pitch: Cesium.Math.toRadians(pitch),
                    range: range
                },
            });

        },

        /**
         * @description: 飛行定位到一個矩形
         * @param {Array.<Cartesian3>} cartesians 笛卡爾坐標數組 Array.<Cartesian3>
         * @param {Number} heading=0.0   偏航角 正北,由正北向東偏向為正
         * @param {*} pitch=-90     俯仰角=-90 ENU局部坐標系，XY平面的旋轉角度，平面下為負，上為正，
         * @param {*} scale=1.0   范圍縮放倍率
         * @param {*} duration=3   持續時間
         * @param {*} callBack=null   回調函數，定位完成后執行
         * @return {*}
         */
        flyToRectangle: function (cartesians, heading=0.0, pitch=-90, scale=1.0, duration=3, callBack=null) { 
            if (!viewer) {
                console.log('三維球未初始化！');
                return;
            }
            if (!Array.isArray(cartesians)) {
                console.log('定位范圍不對！');
                return;
            }         
            if(scale<0.1){
                scale=1.0;
            }  
            var rec=Cesium.Rectangle.fromCartesianArray(cartesians);
            var boundingSphere=Cesium.BoundingSphere.fromRectangle3D(rec);
            boundingSphere.radius=boundingSphere.radius*scale;
            viewer.camera.flyToBoundingSphere(boundingSphere, {
                duration: duration,
                maximumHeight: undefined,
                complete: function () {
                    if (callBack) {
                        callBack();
                    }else{
                        console.log('定位失敗！');
                    }
                },
                cancel: function () {
                    console.log('定位取消！');
                },
                offset: {
                    heading: Cesium.Math.toRadians(heading),
                    pitch: Cesium.Math.toRadians(pitch),
                    range: 0.0
                }
            });
        },

        flyToEntity(entity,){

        }
    }

}

試

ite+Vue3+Cesium項目模版

Cesium是AGI公司計算機圖形開發小組與2011年研發的三維地球和地圖可視化開源JavaScript庫，Cesium一詞來源于化學元素銫，銫是制造原子鐘的關鍵元素，研發小組通過命名強調Cesium產品精益求精，專注時間數據可視化。Cesium為三維GIS提供了一個高效的數據可視化平臺

使用viet創建vue3項目

創建vue3項目這里使用的是vue的模版。如果選擇其他框架，則不用加--template vue
pnpm create vite vite+vue3+cesium --template vue

進入項目 cd vite-app

安裝依賴 pnpm install

運行項目 pnpm run dev

看到這個頁面就說明vite+vue3的項目初始化成功了，下面就是安裝和初始化cesium框架和cesium的vite插件了在vite項目中要正常使用cesium我目前知道的有兩種方法。

下面先講第一種，也就是使用vite-plugin-cesium這個插件首先找到這個插件的git倉庫 https://github.com/nshen/vite-plugin-cesium

第一種方法

install

npm i cesium vite-plugin-cesium vite -D

yarn add cesium vite-plugin-cesium vite -D

Usage

在vite.config.js文件中添加cesium的插件

import { defineConfig } from 'vite';
import cesium from 'vite-plugin-cesium';
export default defineConfig({
  plugins: [cesium()]
});

下面去頁面中初始化cesium

<script setup>
import {onMounted, ref} from 'vue'
import * as Cesium from 'cesium'

//cesium初始化必須寫在mounted生命周期里面，否則會報錯"Element with id "cesiumContainer" does not exist in the document."
onMounted(()=> {
  const viewer=new Cesium.Viewer('cesiumContainer', {
    //這里是配置項
  })
})
</script>

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


<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
</style>

發現樣式有些問題。我一看，哦，原來是style.css中有模版的默認樣式的影響。把style.css中的默認樣式刪除就好了

這才是正確的姿勢嘛！

第2種方法

第二種方法就是本地引入，把下載好的cesium依賴包（node_modules里面）復制放到public里面，然后在index.html里面引入cesium和css文件

<script type="text/javascript" src="./public/Cesium/Cesium.js"></script>

<link rel="stylesheet" href="./public/Cesium/Widgets/widgets.css">

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue+Cesium</title>
      <link rel="stylesheet" href="./public/Cesium/Widgets/widgets.css">

![img_3.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/06e65d12be0540ddb17c9a7b2476a7e2~tplv-k3u1fbpfcp-watermark.image?)
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
    <script type="text/javascript" src="./public/Cesium/Cesium.js"></script>

![img_1.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cd519580e2904edbb34dc4d0dba5a00b~tplv-k3u1fbpfcp-watermark.image?)
  </body>
</html>

然后同樣的去頁面種初始化cesium就可以了。

不過還有一個小問題，在控制臺中我發現有個報錯:

VM19:1 Blocked script execution in 'about:blank' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.

目前還沒找到解決的辦法

下篇文章將介紹vite+react+cesium應該如何搭建react項目框架,以及cesium的一些概念和基本知識。

們知道有一種快速建模的方式叫傾斜攝影，適用大場景的建模，快速逼真高效，本文分享傾斜攝影如何與cesium結合的話題，那么什么是傾斜攝影呢？傾斜攝影適用什么場景的建模？傾斜攝影相對于純手工建模方式有什么優劣勢？傾斜攝影數據如何導入到cesium中，代碼示例是什么？希望本文能夠讓大家對二者有個大體認識。

傾斜攝影概述

傾斜攝影（Oblique Photography）是一種航空攝影技術，它使用多個相機從不同的角度同時拍攝地面，從而獲取建筑物和其他地物的立體信息。這些圖像可以用來生成高精度的三維模型，包括地形模型、紋理網格和三維建筑模型。這種方法特別適合于城市環境和大范圍區域的快速三維重建。

適用場景

傾斜攝影適用于：

城市三維建模
地形和地貌的三維重建
道路、橋梁等基礎設施建模
自然災害評估和應急響應
歷史遺跡和考古遺址的記錄
規劃和設計項目

相對于純手工建模的優勢和劣勢

優勢：

快速建模：傾斜攝影可以迅速覆蓋大面積區域，而手工建模則耗時且成本高。
高精度和細節：自動化的數據處理可以達到高精度，且能夠捕捉到建筑物和地形的細節。
真實感：由真實照片生成的紋理，使得模型具有更高的真實感。
自動化：大部分過程可以自動化，減少了人工干預的需求。

劣勢：

數據處理需求：需要專業的軟件和計算資源來處理和分析大量圖像數據。
光照和陰影問題：不同光照條件下的圖像可能影響模型質量。
隱私和安全問題：可能涉及個人隱私和敏感地點的安全問題。

導入傾斜攝影數據到Cesium中

Cesium支持加載3D Tiles格式的數據，這意味著你需要將傾斜攝影產生的OSGB或其他格式的數據轉換成3D Tiles格式。這個轉換過程通常通過專門的工具完成，例如：

Cesium ion
3D Tiles Converter (cesium.com/downloads/)
其他第三方工具

一旦轉換完成，你就可以使用Cesium JavaScript API來加載數據。下面是一個簡單的代碼示例：

Javascript
1// 創建Cesium Viewer實例
2var viewer=new Cesium.Viewer('cesiumContainer');
3
4// 定義3D Tiles數據集
5var tileset=new Cesium.Cesium3DTileset({
6    url : 'path/to/your/tileset.json'
7});
8
9// 將數據集添加到Viewer中
10viewer.scene.primitives.add(tileset);
11
12// 調整視圖以聚焦數據集
13viewer.zoomTo(tileset);

在這個例子中，tileset.json是3D Tiles數據集的根文件，它包含了加載和渲染所有3D Tiles所需的信息。

傾斜攝影結合Cesium為快速構建大場景的三維模型提供了強大工具。通過使用現代的WebGIS技術，如Cesium，可以輕松地將這些模型集成到交互式的地理空間應用中，為用戶提供沉浸式體驗。

大象數據工場→10年經驗的可視化/數字孿生領域的老司機，專注大數據設計和前端交互部分。關注我，帶您了解最新的觀點、技術、干貨，如有需求可私信。

在線咨詢

上一篇：HTML基礎知識自學必知教程 6~CSS的選擇器
下一篇：給你「最酷」網頁設計指南

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商