在vue上使用cesium開發(fā)三維地圖的詳細(xì)過(guò)程
更新時(shí)間：2023年12月08日 08:52:04 作者：wy-naruto
這篇文章主要給大家介紹了關(guān)于在vue上使用cesium開發(fā)三維地圖的詳細(xì)過(guò)程,Cesium是一個(gè)強(qiáng)大的JavaScript庫(kù),支持三維地理信息展示,并提供了豐富的地理空間數(shù)據(jù)可視化功能,需要的朋友可以參考下
需要注意的是，Cesium 使用 WebGL 技術(shù)，所以您需要確保瀏覽器支持 WebGL。
一：安裝Cesium
可以通過(guò) NPM 安裝 Cesium。打開命令行界面，輸入以下命令：
npm install cesium
安裝完成后，您可以在 node_modules/cesium 目錄下找到 Cesium 的 JavaScript 文件和相關(guān)文件。
二：在 Vue 項(xiàng)目中使用 Cesium
接下來(lái)，在 Vue 項(xiàng)目中引入 Cesium，可以使用以下幾種方式。
方式一：在 index.html 文件中引入 Cesium
在您的 index.html 文件中添加以下代碼：
<script src="./node_modules/cesium/Build/Cesium/Cesium.js"></script> <link rel="stylesheet" href="./node_modules/cesium/Build/Cesium/Widgets/widgets.css" rel="external nofollow" />
這將在整個(gè) Vue 應(yīng)用程序中加載 Cesium。
方式二：使用模塊設(shè)置
在 main.js 文件中添加以下代碼：
import Cesium from 'cesium/Cesium' import 'cesium/Build/Cesium/Widgets/widgets.css' Vue.prototype.Cesium = Cesium // 將 Cesium 注冊(cè)為 Vue 實(shí)例的屬性
這樣，您就可以在整個(gè) Vue 應(yīng)用程序中通過(guò) this.Cesium 訪問(wèn) Cesium 相關(guān)的類和方法。
三：創(chuàng)建一個(gè) Cesium 場(chǎng)景
使用 Cesium 創(chuàng)建一個(gè)場(chǎng)景需要一個(gè) HTML 元素來(lái)展示它?？梢栽?Vue 中使用 mounted() 鉤子函數(shù)將 Cesium 場(chǎng)景添加到您的 Vue 組件中。
<template>
<div id="cesiumContainer"></div>
</template>
<script>
export default {
mounted() {
Cesium.Ion.defaultAccessToken =你的token
this.viewer = new this.Cesium.Viewer('cesiumContainer'); // 創(chuàng)建 Cesium 場(chǎng)景
}
}
</script>
<style>
#cesiumContainer {
height: 100%;
width: 100%;
}
</style>這只是一個(gè)簡(jiǎn)單的示例，您可以通過(guò)查看 Cesium 的文檔和示例來(lái)學(xué)習(xí)如何使用更高級(jí)的功能。
注意：Cesium報(bào)錯(cuò)VM2395:1 Blocked script execution in 'about:blank' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.
這個(gè)錯(cuò)誤信息通常出現(xiàn)在腳本嘗試在沙盒框架中運(yùn)行，但是'allow-scripts'權(quán)限沒(méi)有被設(shè)置。
沙盒是一種安全特性，將潛在風(fēng)險(xiǎn)的代碼（例如第三方腳本）與系統(tǒng)的其余部分隔離開來(lái)，防止腳本對(duì)瀏覽器的惡意操作。'allow-scripts'是一個(gè)權(quán)限選項(xiàng)，允許在沙箱環(huán)境中運(yùn)行腳本。如果未設(shè)置此權(quán)限，瀏覽器將阻止腳本在沙箱中運(yùn)行并顯示此錯(cuò)誤消息。
可能是因?yàn)閕nfoBox中使用復(fù)雜的HTML標(biāo)記和JavaScript腳本
禁用infobox就可以解決
const viewer = new Viewer('cesiumContainer', {
infoBox: false, // If set to false, the InfoBox widget will not be created.
});中文API文檔：http://cesium.xin/cesium/cn/Documentation1.72/index.html
官方API文檔：https://cesium.com/learn/cesiumjs/ref-doc/
this.viewer = new Cesium.Viewer(dom, {
baseLayerPicker: true, // 如果設(shè)置為false，將不會(huì)創(chuàng)建右上角圖層按鈕。
geocoder: true, // 如果設(shè)置為false，將不會(huì)創(chuàng)建右上角查詢(放大鏡)按鈕。
navigationHelpButton: true, // 如果設(shè)置為false，則不會(huì)創(chuàng)建右上角幫助(問(wèn)號(hào))按鈕。
homeButton: true, // 如果設(shè)置為false，將不會(huì)創(chuàng)建右上角主頁(yè)(房子)按鈕。
sceneModePicker: true, // 如果設(shè)置為false，將不會(huì)創(chuàng)建右上角投影方式控件(顯示二三維切換按鈕)。
animation: true, // 如果設(shè)置為false，將不會(huì)創(chuàng)建左下角動(dòng)畫小部件。
timeline: true, // 如果設(shè)置為false，則不會(huì)創(chuàng)建正下方時(shí)間軸小部件。
fullscreenButton: true, // 如果設(shè)置為false，將不會(huì)創(chuàng)建右下角全屏按鈕。
scene3DOnly: true, // 為 true 時(shí)，每個(gè)幾何實(shí)例將僅以3D渲染以節(jié)省GPU內(nèi)存。
shouldAnimate: true, // 默認(rèn)true ，否則為 false 。此選項(xiàng)優(yōu)先于設(shè)置 Viewer＃clockViewModel 。
// ps. Viewer＃clockViewModel 是用于控制當(dāng)前時(shí)間的時(shí)鐘視圖模型。我們這里用不到時(shí)鐘，就把shouldAnimate設(shè)為false
infoBox: false, // 是否顯示點(diǎn)擊要素之后顯示的信息，原生自帶右上角彈窗
sceneMode: 3, // 初始場(chǎng)景模式 1 2D模式 2 2D循環(huán)模式 3 3D模式 Cesium.SceneMode
requestRenderMode: false, // 啟用請(qǐng)求渲染模式，不需要渲染，節(jié)約資源吧
selectionIndicator: false, // Cesium 關(guān)閉點(diǎn)擊綠色框
// fullscreenElement: document.body, // 全屏?xí)r渲染的HTML元素 暫時(shí)沒(méi)發(fā)現(xiàn)用處，雖然我關(guān)閉了全屏按鈕，但是鍵盤按F11 瀏覽器也還是會(huì)進(jìn)入全屏
imageryProvider: layer0, //影像地圖修改
// imageryProviderViewModels: [img_tdt_yx, img_tdt_dx, img_tdt_sl], //可供BaseLayerPicker選擇的圖像圖層ProviderViewModel數(shù)組
terrainProvider: Cesium.createWorldTerrain(), //提供地形
}); //通過(guò)指定的url模板請(qǐng)求圖塊提供圖像
var layer0 = new Cesium.UrlTemplateImageryProvider({
tileWidth: 256, //默認(rèn)貼圖寬度
tileHeight: 256,
url: "http://t{R}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=7254799da9b1f3d1f335f09497cd8848",
maximumLevel: 18,
customTags: {
R: function (imageryProvider, x, y, level) {
return Math.floor(Math.random() * 6);
},
},
});四：三維球定位到中國(guó)
flyto:將相機(jī)從當(dāng)前位置移動(dòng)到新位置。會(huì)有一個(gè)飛行動(dòng)畫 ; setview設(shè)置相機(jī)的位置，方向和變換。直接定位
// 三維球定位到中國(guó)
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(121.871337890625,30.893386706430803,178500),//定位的位置
orientation: {
heading : Cesium.Math.toRadians(0),// 水平偏角，默認(rèn)正北 0
pitch : Cesium.Math.toRadians(-90),// 俯視角，-90，垂直向下
roll : Cesium.Math.toRadians(0)
},
complete:function callback() {
// 定位完成之后的回調(diào)函數(shù)
setTimeout(()=>{
getview()
},2000)
}
});var position = Cesium.Cartesian3.fromDegrees(86.889, 27.991, 84000);
//相機(jī)定位到珠穆朗瑪峰
viewer.camera.setView({
destination: position,
orientation:{
heading:Cesium.Math.toRadians(0.0), //正北
pitch:Cesium.Math.toDegrees(-10), //平視
roll: 0.0
}
});五：添加entities實(shí)體
const boundingSphere = new Cesium.BoundingSphere(
Cesium.Cartesian3.fromDegrees(120.55538, 31.87532, 100),
15000
);
// 定位到初始位置 將相機(jī)移到當(dāng)前視圖包含所提供的包圍球的位置
this.viewer.camera.flyToBoundingSphere(boundingSphere, {
// 動(dòng)畫，定位到初始位置的過(guò)渡時(shí)間，設(shè)置成0，就沒(méi)有動(dòng)畫
duration: 0,
});
//初始點(diǎn)位數(shù)據(jù)
loadPoints() {
// 用模擬數(shù)據(jù)測(cè)試
this.pointInfo = [
{
id: "392f7fbb-ae25-4eef-ac43-58fd91148d1f",
latitude: "31.87532",
longitude: "120.55538",
psName: "點(diǎn)位1",
},
{
id: "0278a88c-b4f4-4d64-9ccb-65831b3fb19d",
latitude: "31.991057",
longitude: "120.700713",
psName: "點(diǎn)位2",
},
{
id: "248f6853-2ced-4aa6-b679-ea6422a5f3ac",
latitude: "31.94181",
longitude: "120.51517",
psName: "點(diǎn)位3",
},
{
id: "F8DADA95-A438-49E1-B263-63AE3BD7DAC4",
latitude: "31.97416",
longitude: "120.56132",
psName: "點(diǎn)位4",
},
{
id: "9402a911-78c5-466a-9162-d5b04d0e48f0",
latitude: "31.91604",
longitude: "120.57771",
psName: "點(diǎn)位5",
},
{
id: "EB392DD3-6998-437F-8DCB-F805AD4DB340",
latitude: "31.88727",
longitude: "120.48887",
psName: "點(diǎn)位6",
},
];
this.addMarker();
},
//初始化加載點(diǎn)位
addMarker() {
// 自定義label顏色
const _textColor = "rgb(11, 255, 244)";
// 清除上一次加載的點(diǎn)位
this.clearMarker();
// foreach循環(huán)加載點(diǎn)位
this.pointInfo.forEach((pointObj) => {
this.viewer.entities.add({
name: pointObj.psName,
code: pointObj.id,
id: pointObj.id,
position: Cesium.Cartesian3.fromDegrees(
pointObj.longitude * 1,
pointObj.latitude * 1
),
點(diǎn)
point: {
pixelSize: 5,
color: Cesium.Color.RED,
outlineColor: Cesium.Color.WHITE,
outlineWidth: 5,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //設(shè)置HeightReference高度參考類型為CLAMP_TO_GROUND貼地類型
},
// 文字標(biāo)簽
label: {
// show: false,
text: pointObj.psName,
font: "12px monospace",
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
// fillColor: Cesium.Color.LIME,
fillColor: Cesium.Color.fromCssColorString(_textColor),
outlineWidth: 4,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 垂直方向以底部來(lái)計(jì)算標(biāo)簽的位置
pixelOffset: new Cesium.Cartesian2(0, -20), // 偏移量
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //設(shè)置HeightReference高度參考類型為CLAMP_TO_GROUND貼地類型
},
// 圖標(biāo)
billboard: {
image: require("../../assets/images/profile.jpg"),
width: 18,
height: 24,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //設(shè)置HeightReference高度參考類型為CLAMP_TO_GROUND貼地類型
},
});
});
},六：添加點(diǎn)擊事件
// 監(jiān)聽地圖點(diǎn)擊事件
const handler = new Cesium.ScreenSpaceEventHandler(
this.viewer.scene.canvas
);
handler.setInputAction((e) => {
console.log("鼠標(biāo)點(diǎn)擊事件", e.position.x * 1, e.position.y * 1);
//清除之前的點(diǎn)位
this.clearMarker();
// 屏幕坐標(biāo)轉(zhuǎn)世界坐標(biāo)——關(guān)鍵點(diǎn)
const cartesian = this.viewer.camera.pickEllipsoid(
e.position,
this.viewer.scene.globe.ellipsoid
);
// 將笛卡爾坐標(biāo)轉(zhuǎn)換為地理坐標(biāo)
const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
// 將弧度轉(zhuǎn)為度的十進(jìn)制度表示，保留5位小數(shù)
const lon = Cesium.Math.toDegrees(cartographic.longitude).toFixed(5);
const lat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(5);
console.log(lon, lat);
//新增點(diǎn)位
this.viewer.entities.add({
name: "1",
id: "1",
position: Cesium.Cartesian3.fromDegrees(lon, lat),
// 點(diǎn)
point: {
pixelSize: 5,
color: Cesium.Color.RED,
outlineColor: Cesium.Color.WHITE,
outlineWidth: 5,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //設(shè)置HeightReference高度參考類型為CLAMP_TO_GROUND貼地類型
},
label: {
// show: false,
text: "新增點(diǎn)位",
font: "12px monospace",
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
// fillColor: Cesium.Color.LIME,
fillColor: Cesium.Color.fromCssColorString("rgb(11, 255, 244)"),
outlineWidth: 4,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 垂直方向以底部來(lái)計(jì)算標(biāo)簽的位置
pixelOffset: new Cesium.Cartesian2(0, -20), // 偏移量
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //設(shè)置HeightReference高度參考類型為CLAMP_TO_GROUND貼地類型
},
billboard: {
image: require("../../assets/images/profile.jpg"),
width: 18,
height: 24,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //設(shè)置HeightReference高度參考類型為CLAMP_TO_GROUND貼地類型
},
});
this.viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(lon, lat, 15000),
});
// 獲取地圖上的點(diǎn)位實(shí)體(entity)坐標(biāo)
const pick = this.viewer.scene.pick(e.position);
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);七：通過(guò)JSON加載范圍線
let res = Cesium.GeoJsonDataSource.load(jsonUrl, {
stroke: {red: 1, green: 1, blue: 1, alpha: 0.4},
fill: Cesium.Color.BLUE.withAlpha(0.4), //注意：顏色必須大寫，即不能為blue
strokeWidth: 3,
clampToGround: true
});
res.then(buffersource => {
viewer.dataSources.add(buffersource);
buffersource.name = "XXX";
})總結(jié)
到此這篇關(guān)于在vue上使用cesium開發(fā)三維地圖的文章就介紹到這了,更多相關(guān)vue cesium開發(fā)三維地圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在 Vue.js 的項(xiàng)目中，如果項(xiàng)目結(jié)構(gòu)簡(jiǎn)單， 父子組件之間的數(shù)據(jù)傳遞可以使用 props 或者 $emit 等方式，如果是大型項(xiàng)目，很多時(shí)候都需要在子組件之間傳遞數(shù)據(jù)，使用vue的狀態(tài)管理工具vuex很好的解決2018-08-08
這篇文章主要介紹了Element-UI中Upload上傳文件前端緩存處理示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
這篇文章主要介紹了vue3在setup中使用mapState方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
vue項(xiàng)目中使用axios遇到的相對(duì)路徑和絕對(duì)路徑問(wèn)題
這篇文章主要介紹了vue項(xiàng)目中使用axios遇到的相對(duì)路徑和絕對(duì)路徑問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了理順8個(gè)版本vue的區(qū)別(小結(jié))，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了vue2如何獲取上頁(yè)的url地址問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue2項(xiàng)目使用exceljs多表頭導(dǎo)出功能詳解
ExcelJS是一個(gè)用于在Node.js和瀏覽器中創(chuàng)建、讀取和修改Excel文件的強(qiáng)大JavaScript庫(kù),下面這篇文章主要給大家介紹了關(guān)于vue2項(xiàng)目使用exceljs多表頭導(dǎo)出功能的相關(guān)資料,需要的朋友可以參考下2024-05-05
vue + element ui實(shí)現(xiàn)播放器功能的實(shí)例代碼
這篇文章主要介紹了vue + element ui實(shí)現(xiàn)播放器功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-04
使用Element實(shí)現(xiàn)表格表頭添加搜索圖標(biāo)和功能
這篇文章主要介紹了使用Element實(shí)現(xiàn)表格表頭添加搜索圖標(biāo)和功能，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue+Element+Springboot圖片上傳的實(shí)現(xiàn)示例
最近在學(xué)習(xí)前段后分離，本文介紹了Vue+Element+Springboot圖片上傳的實(shí)現(xiàn)示例，具有一定的參考價(jià)值，感興趣的可以了解一下2021-11-11