Cesium 的各種定位方法匯總-未完待續(xù)

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

    },
    flyTo: {
        /**
         * @description: 飛行定位到一個(gè)笛卡爾空間直角坐標(biāo)點(diǎn)位置
         * @param {Cartesian3} destination 目標(biāo)點(diǎn) Cartesian3
         * @param {Number} heading  默認(rèn)=0.0   偏航角 正北,由正北向東偏向?yàn)檎?
         * @param {*} pitch=-90     俯仰角 垂直向下， ENU局部坐標(biāo)系中XY平面的旋轉(zhuǎn)角度，平面下為負(fù)，上為正，
         * @param {*} range=0.0   距目標(biāo)點(diǎn)距離
         * @param {*} duration=3   持續(xù)時(shí)間
         * @param {*} callBack=null   回調(diào)函數(shù)，定位完成后執(zhí)行
         */
        flyToPoint: function (destination, heading=0.0, pitch=-90, range=0.0, duration=3, callBack=null) {
            if (!viewer) {
                console.log('三維球未初始化！');
                return;
            }
            if (!destination) {
                console.log('定位目標(biāo)點(diǎn)不對(duì)！');
                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: 飛行定位到一個(gè)矩形
         * @param {Array.<Cartesian3>} cartesians 笛卡爾坐標(biāo)數(shù)組 Array.<Cartesian3>
         * @param {Number} heading=0.0   偏航角 正北,由正北向東偏向?yàn)檎?
         * @param {*} pitch=-90     俯仰角=-90 ENU局部坐標(biāo)系，XY平面的旋轉(zhuǎn)角度，平面下為負(fù)，上為正，
         * @param {*} scale=1.0   范圍縮放倍率
         * @param {*} duration=3   持續(xù)時(shí)間
         * @param {*} callBack=null   回調(diào)函數(shù)，定位完成后執(zhí)行
         * @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('定位范圍不對(duì)！');
                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項(xiàng)目模版

Cesium是AGI公司計(jì)算機(jī)圖形開(kāi)發(fā)小組與2011年研發(fā)的三維地球和地圖可視化開(kāi)源JavaScript庫(kù)，Cesium一詞來(lái)源于化學(xué)元素銫，銫是制造原子鐘的關(guān)鍵元素，研發(fā)小組通過(guò)命名強(qiáng)調(diào)Cesium產(chǎn)品精益求精，專注時(shí)間數(shù)據(jù)可視化。Cesium為三維GIS提供了一個(gè)高效的數(shù)據(jù)可視化平臺(tái)

使用viet創(chuàng)建vue3項(xiàng)目

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

進(jìn)入項(xiàng)目 cd vite-app

安裝依賴 pnpm install

運(yùn)行項(xiàng)目 pnpm run dev

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

下面先講第一種，也就是使用vite-plugin-cesium這個(gè)插件首先找到這個(gè)插件的git倉(cāng)庫(kù) 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()]
});

下面去頁(yè)面中初始化cesium

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

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

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


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

發(fā)現(xiàn)樣式有些問(wèn)題。我一看，哦，原來(lái)是style.css中有模版的默認(rèn)樣式的影響。把style.css中的默認(rèn)樣式刪除就好了

這才是正確的姿勢(shì)嘛！

第2種方法

第二種方法就是本地引入，把下載好的cesium依賴包（node_modules里面）復(fù)制放到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>

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

不過(guò)還有一個(gè)小問(wèn)題，在控制臺(tái)中我發(fā)現(xiàn)有個(gè)報(bào)錯(cuò):

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

目前還沒(méi)找到解決的辦法

下篇文章將介紹vite+react+cesium應(yīng)該如何搭建react項(xiàng)目框架,以及cesium的一些概念和基本知識(shí)。

們知道有一種快速建模的方式叫傾斜攝影，適用大場(chǎng)景的建模，快速逼真高效，本文分享傾斜攝影如何與cesium結(jié)合的話題，那么什么是傾斜攝影呢？?jī)A斜攝影適用什么場(chǎng)景的建模？?jī)A斜攝影相對(duì)于純手工建模方式有什么優(yōu)劣勢(shì)？?jī)A斜攝影數(shù)據(jù)如何導(dǎo)入到cesium中，代碼示例是什么？希望本文能夠讓大家對(duì)二者有個(gè)大體認(rèn)識(shí)。

傾斜攝影概述

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

適用場(chǎng)景

傾斜攝影適用于：

城市三維建模
地形和地貌的三維重建
道路、橋梁等基礎(chǔ)設(shè)施建模
自然災(zāi)害評(píng)估和應(yīng)急響應(yīng)
歷史遺跡和考古遺址的記錄
規(guī)劃和設(shè)計(jì)項(xiàng)目

相對(duì)于純手工建模的優(yōu)勢(shì)和劣勢(shì)

優(yōu)勢(shì)：

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

劣勢(shì)：

數(shù)據(jù)處理需求：需要專業(yè)的軟件和計(jì)算資源來(lái)處理和分析大量圖像數(shù)據(jù)。
光照和陰影問(wèn)題：不同光照條件下的圖像可能影響模型質(zhì)量。
隱私和安全問(wèn)題：可能涉及個(gè)人隱私和敏感地點(diǎn)的安全問(wèn)題。

導(dǎo)入傾斜攝影數(shù)據(jù)到Cesium中

Cesium支持加載3D Tiles格式的數(shù)據(jù)，這意味著你需要將傾斜攝影產(chǎn)生的OSGB或其他格式的數(shù)據(jù)轉(zhuǎn)換成3D Tiles格式。這個(gè)轉(zhuǎn)換過(guò)程通常通過(guò)專門(mén)的工具完成，例如：

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

一旦轉(zhuǎn)換完成，你就可以使用Cesium JavaScript API來(lái)加載數(shù)據(jù)。下面是一個(gè)簡(jiǎn)單的代碼示例：

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

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

傾斜攝影結(jié)合Cesium為快速構(gòu)建大場(chǎng)景的三維模型提供了強(qiáng)大工具。通過(guò)使用現(xiàn)代的WebGIS技術(shù)，如Cesium，可以輕松地將這些模型集成到交互式的地理空間應(yīng)用中，為用戶提供沉浸式體驗(yàn)。

大象數(shù)據(jù)工場(chǎng)→10年經(jīng)驗(yàn)的可視化/數(shù)字孿生領(lǐng)域的老司機(jī)，專注大數(shù)據(jù)設(shè)計(jì)和前端交互部分。關(guān)注我，帶您了解最新的觀點(diǎn)、技術(shù)、干貨，如有需求可私信。

在線咨詢

上一篇：HTML基礎(chǔ)知識(shí)自學(xué)必知教程 6~CSS的選擇器
下一篇：給你「最酷」網(wǎng)頁(yè)設(shè)計(jì)指南

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商