欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

在vue上使用cesium開發(fā)三維地圖的詳細(xì)過程

 更新時間：2023年12月08日 08:52:04   作者：wy-naruto  
這篇文章主要給大家介紹了關(guān)于在vue上使用cesium開發(fā)三維地圖的詳細(xì)過程,Cesium是一個強(qiáng)大的JavaScript庫,支持三維地理信息展示,并提供了豐富的地理空間數(shù)據(jù)可視化功能,需要的朋友可以參考下

需要注意的是，Cesium 使用 WebGL 技術(shù)，所以您需要確保瀏覽器支持 WebGL。

一：安裝Cesium

可以通過 NPM 安裝 Cesium。打開命令行界面，輸入以下命令：

npm install cesium

安裝完成后，您可以在 node_modules/cesium 目錄下找到 Cesium 的 JavaScript 文件和相關(guān)文件。

二：在 Vue 項目中使用 Cesium

接下來，在 Vue 項目中引入 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"  />

這將在整個 Vue 應(yīng)用程序中加載 Cesium。

方式二：使用模塊設(shè)置

在 main.js 文件中添加以下代碼：

import Cesium from 'cesium/Cesium'
import 'cesium/Build/Cesium/Widgets/widgets.css'
Vue.prototype.Cesium = Cesium  // 將 Cesium 注冊為 Vue 實例的屬性

這樣，您就可以在整個 Vue 應(yīng)用程序中通過 this.Cesium 訪問 Cesium 相關(guān)的類和方法。

三：創(chuàng)建一個 Cesium 場景

使用 Cesium 創(chuàng)建一個場景需要一個 HTML 元素來展示它?？梢栽?Vue 中使用 mounted() 鉤子函數(shù)將 Cesium 場景添加到您的 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 場景
    }
  }
</script>

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

這只是一個簡單的示例，您可以通過查看 Cesium 的文檔和示例來學(xué)習(xí)如何使用更高級的功能。

注意：Cesium報錯VM2395:1 Blocked script execution in 'about:blank' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.

這個錯誤信息通常出現(xiàn)在腳本嘗試在沙盒框架中運(yùn)行，但是'allow-scripts'權(quán)限沒有被設(shè)置。

沙盒是一種安全特性，將潛在風(fēng)險的代碼（例如第三方腳本）與系統(tǒng)的其余部分隔離開來，防止腳本對瀏覽器的惡意操作。'allow-scripts'是一個權(quán)限選項，允許在沙箱環(huán)境中運(yùn)行腳本。如果未設(shè)置此權(quán)限，瀏覽器將阻止腳本在沙箱中運(yùn)行并顯示此錯誤消息。

可能是因為infoBox中使用復(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，將不會創(chuàng)建右上角圖層按鈕。
      geocoder: true, // 如果設(shè)置為false，將不會創(chuàng)建右上角查詢(放大鏡)按鈕。
      navigationHelpButton: true, // 如果設(shè)置為false，則不會創(chuàng)建右上角幫助(問號)按鈕。
      homeButton: true, // 如果設(shè)置為false，將不會創(chuàng)建右上角主頁(房子)按鈕。
      sceneModePicker: true, // 如果設(shè)置為false，將不會創(chuàng)建右上角投影方式控件(顯示二三維切換按鈕)。
      animation: true, // 如果設(shè)置為false，將不會創(chuàng)建左下角動畫小部件。
      timeline: true, // 如果設(shè)置為false，則不會創(chuàng)建正下方時間軸小部件。
      fullscreenButton: true, // 如果設(shè)置為false，將不會創(chuàng)建右下角全屏按鈕。
      scene3DOnly: true, // 為 true 時，每個幾何實例將僅以3D渲染以節(jié)省GPU內(nèi)存。
      shouldAnimate: true, // 默認(rèn)true ，否則為 false 。此選項優(yōu)先于設(shè)置 Viewer＃clockViewModel 。
      // ps. Viewer＃clockViewModel 是用于控制當(dāng)前時間的時鐘視圖模型。我們這里用不到時鐘，就把shouldAnimate設(shè)為false
      infoBox: false, // 是否顯示點擊要素之后顯示的信息，原生自帶右上角彈窗
      sceneMode: 3, // 初始場景模式 1 2D模式 2 2D循環(huán)模式 3 3D模式  Cesium.SceneMode
      requestRenderMode: false, // 啟用請求渲染模式，不需要渲染，節(jié)約資源吧
      selectionIndicator: false, // Cesium 關(guān)閉點擊綠色框
      // fullscreenElement: document.body, // 全屏?xí)r渲染的HTML元素 暫時沒發(fā)現(xiàn)用處，雖然我關(guān)閉了全屏按鈕，但是鍵盤按F11 瀏覽器也還是會進(jìn)入全屏
      imageryProvider: layer0, //影像地圖修改
      // imageryProviderViewModels: [img_tdt_yx, img_tdt_dx, img_tdt_sl], //可供BaseLayerPicker選擇的圖像圖層ProviderViewModel數(shù)組
      terrainProvider: Cesium.createWorldTerrain(), //提供地形
    });
    //通過指定的url模板請求圖塊提供圖像
    var layer0 = new Cesium.UrlTemplateImageryProvider({
      tileWidth: 256, //默認(rèn)貼圖寬度
      tileHeight: 256,
      url: "http://t{R}.tianditu.gov.cn/DataServer?T=img_w&amp;x={x}&amp;y={y}&amp;l={z}&amp;tk=7254799da9b1f3d1f335f09497cd8848",
      maximumLevel: 18,
      customTags: {
        R: function (imageryProvider, x, y, level) {
          return Math.floor(Math.random() * 6);
        },
      },
    });

四：三維球定位到中國 

flyto:將相機(jī)從當(dāng)前位置移動到新位置。會有一個飛行動畫 ; setview設(shè)置相機(jī)的位置，方向和變換。直接定位

// 三維球定位到中國
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實體

const boundingSphere = new Cesium.BoundingSphere(
   Cesium.Cartesian3.fromDegrees(120.55538, 31.87532, 100),
   15000
);
// 定位到初始位置 將相機(jī)移到當(dāng)前視圖包含所提供的包圍球的位置
this.viewer.camera.flyToBoundingSphere(boundingSphere, {
// 動畫，定位到初始位置的過渡時間，設(shè)置成0，就沒有動畫
   duration: 0,
});
//初始點位數(shù)據(jù)
    loadPoints() {
      // 用模擬數(shù)據(jù)測試
      this.pointInfo = [
        {
          id: "392f7fbb-ae25-4eef-ac43-58fd91148d1f",
          latitude: "31.87532",
          longitude: "120.55538",
          psName: "點位1",
        },
        {
          id: "0278a88c-b4f4-4d64-9ccb-65831b3fb19d",
          latitude: "31.991057",
          longitude: "120.700713",
          psName: "點位2",
        },
        {
          id: "248f6853-2ced-4aa6-b679-ea6422a5f3ac",
          latitude: "31.94181",
          longitude: "120.51517",
          psName: "點位3",
        },
        {
          id: "F8DADA95-A438-49E1-B263-63AE3BD7DAC4",
          latitude: "31.97416",
          longitude: "120.56132",
          psName: "點位4",
        },
        {
          id: "9402a911-78c5-466a-9162-d5b04d0e48f0",
          latitude: "31.91604",
          longitude: "120.57771",
          psName: "點位5",
        },
        {
          id: "EB392DD3-6998-437F-8DCB-F805AD4DB340",
          latitude: "31.88727",
          longitude: "120.48887",
          psName: "點位6",
        },
      ];
      this.addMarker();
    },
    //初始化加載點位
    addMarker() {
      // 自定義label顏色
      const _textColor = "rgb(11, 255, 244)";
      // 清除上一次加載的點位
      this.clearMarker();
      // foreach循環(huá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
          ),

          點
          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, // 垂直方向以底部來計算標(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貼地類型
          },
        });
      });
    },

六：添加點擊事件

http://cesium.xin/cesium/cn/Documentation1.72/global.html?classFilter=ScreenSpaceEventType#ScreenSpaceEventType

// 監(jiān)聽地圖點擊事件
      const handler = new Cesium.ScreenSpaceEventHandler(
        this.viewer.scene.canvas
      );
      handler.setInputAction((e) => {
        console.log("鼠標(biāo)點擊事件", e.position.x * 1, e.position.y * 1);
        //清除之前的點位
        this.clearMarker();

        // 屏幕坐標(biāo)轉(zhuǎn)世界坐標(biāo)——關(guā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);
        //新增點位
        this.viewer.entities.add({
          name: "1",
          id: "1",
          position: Cesium.Cartesian3.fromDegrees(lon, lat),
          // 點
          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: "新增點位",
            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, // 垂直方向以底部來計算標(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),
        });

        // 獲取地圖上的點位實體(entity)坐標(biāo)
        const pick = this.viewer.scene.pick(e.position);
      }, Cesium.ScreenSpaceEventType.LEFT_DOWN);

七：通過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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • Vue 與 Vuex 的第一次接觸遇到的坑

    Vue 與 Vuex 的第一次接觸遇到的坑

    在 Vue.js 的項目中，如果項目結(jié)構(gòu)簡單， 父子組件之間的數(shù)據(jù)傳遞可以使用 props 或者 $emit 等方式，如果是大型項目，很多時候都需要在子組件之間傳遞數(shù)據(jù)，使用vue的狀態(tài)管理工具vuex很好的解決
    2018-08-08
  • Element-UI中Upload上傳文件前端緩存處理示例

    Element-UI中Upload上傳文件前端緩存處理示例

    這篇文章主要介紹了Element-UI中Upload上傳文件前端緩存處理示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2019-02-02
  • vue3在setup中使用mapState解讀

    vue3在setup中使用mapState解讀

    這篇文章主要介紹了vue3在setup中使用mapState方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2023-04-04
  • vue項目中使用axios遇到的相對路徑和絕對路徑問題

    vue項目中使用axios遇到的相對路徑和絕對路徑問題

    這篇文章主要介紹了vue項目中使用axios遇到的相對路徑和絕對路徑問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-06-06
  • 理順8個版本vue的區(qū)別(小結(jié))

    理順8個版本vue的區(qū)別(小結(jié))

    這篇文章主要介紹了理順8個版本vue的區(qū)別(小結(jié))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-09
  • vue2如何獲取上頁的url地址

    vue2如何獲取上頁的url地址

    這篇文章主要介紹了vue2如何獲取上頁的url地址問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • vue2項目使用exceljs多表頭導(dǎo)出功能詳解

    vue2項目使用exceljs多表頭導(dǎo)出功能詳解

    ExcelJS是一個用于在Node.js和瀏覽器中創(chuàng)建、讀取和修改Excel文件的強(qiáng)大JavaScript庫,下面這篇文章主要給大家介紹了關(guān)于vue2項目使用exceljs多表頭導(dǎo)出功能的相關(guān)資料,需要的朋友可以參考下
    2024-05-05
  • vue + element ui實現(xiàn)播放器功能的實例代碼

    vue + element ui實現(xiàn)播放器功能的實例代碼

    這篇文章主要介紹了vue + element ui實現(xiàn)播放器功能，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2021-04-04
  • 使用Element實現(xiàn)表格表頭添加搜索圖標(biāo)和功能

    使用Element實現(xiàn)表格表頭添加搜索圖標(biāo)和功能

    這篇文章主要介紹了使用Element實現(xiàn)表格表頭添加搜索圖標(biāo)和功能，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-07-07
  • Vue+Element+Springboot圖片上傳的實現(xiàn)示例

    Vue+Element+Springboot圖片上傳的實現(xiàn)示例

    最近在學(xué)習(xí)前段后分離，本文介紹了Vue+Element+Springboot圖片上傳的實現(xiàn)示例，具有一定的參考價值，感興趣的可以了解一下
    2021-11-11

最新評論