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

更新時(shí)間：2023年12月08日 08:52:04 作者：wy-naruto

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

一：安裝Cesium

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

npm install cesium

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

二：在 Vue 項(xiàng)目中使用 Cesium

接下來，在 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)用程序中通過 this.Cesium 訪問 Cesium 相關(guān)的類和方法。

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

使用 Cesium 創(chuàng)建一個(gè)場景需要一個(gè) 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>

這只是一個(gè)簡單的示例，您可以通過查看 Cesium 的文檔和示例來學(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)限沒有被設(shè)置。

沙盒是一種安全特性，將潛在風(fēng)險(xiǎn)的代碼（例如第三方腳本）與系統(tǒng)的其余部分隔離開來，防止腳本對(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)建右上角幫助(問號(hào))按鈕。
      homeButton: true, // 如果設(shè)置為false，將不會(huì)創(chuàng)建右上角主頁(房子)按鈕。
      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, // 初始場景模式 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í)沒發(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(), //提供地形
    });

    //通過指定的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&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)前位置移動(dòng)到新位置。會(huì)有一個(gè)飛行動(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實(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)畫，定位到初始位置的過渡時(shí)間，設(shè)置成0，就沒有動(dòng)畫
   duration: 0,
});
//初始點(diǎn)位數(shù)據(jù)
    loadPoints() {
      // 用模擬數(shù)據(jù)測試
      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, // 垂直方向以底部來計(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)擊事件

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

// 監(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, // 垂直方向以底部來計(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);

七：通過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";
})