vue集成超圖supermap-cesium實踐

一、使用vue-cli創建vue工程

1，cmd進入文件夾20200305，創建名爲vuesupermap的工程。

命令爲：vue init webpack vuesupermap

2，進入項目根目錄運行項目，在瀏覽器中瀏覽

命令爲：npm run dev

3，創建新的首頁頁面，後面三維場景就在此頁面加載。

接着在路由配置中引入我們剛創建的首頁，並更改一下路由配置

打開瀏覽器，看到更改的內容已經自動渲染

二、vue集成supermap-cesium

1，首先在你的項目中利用npm添加依賴項vue-cesium-supermap

命令爲：npm install vue-cesium-supermap --save

2，在vue的main.js中全局註冊，然後註冊supermapCesium

3，vue-cesium-supermap的使用

我們在首頁中加載三維場景

運行項目能夠發現大大的地球已經加載出來了

加載超圖官網數據

<template>
    <div>
        <!-- 歡迎來到首頁 -->
        <!-- 超圖三維地球viewer -->
        <sm-viewer @ready=ready navigation fullscreenButton>
        </sm-viewer>
    </div>
</template>

<script>
export default {
  methods: {
    ready (cesiumInstance) {
        var Cesium = cesiumInstance.Cesium;
        var viewer= cesiumInstance.viewer;
        var scene = viewer.scene;
        viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({
                url : 'https://dev.virtualearth.net',
                mapStyle : Cesium.BingMapsStyle.AERIAL,
                key : 'AhLx52IuZUuca_C3zK2TzBG2eu1vihUkayqc_e4MISbXZyn5Zw_X--odRqrweVap'
            }));
            var urlStr = 'http://www.supermapol.com/realspace/services/3D-suofeiya_church/rest/realspace';
            scene.open(urlStr);
            scene.camera.setView({
                //將經度、緯度、高度的座標轉換爲笛卡爾座標
                destination : new Cesium.Cartesian3(-2653915.6463913363,3571045.726807149,4570293.566342328),
                orientation : {
                    heading : 2.1953426301495345,
                    pitch : -0.33632707158103625,
                    roll : 6.283185307179586
                }
            });
    }
  }
}
</script>

三、參考文章

1，vue-cli入門（三）——人員管理實例

https://www.jianshu.com/p/5d9b341d650f

2，vue集成cesium或超圖的supermap-cesium學習筆記

https://blog.csdn.net/u011332271/article/details/83887958

3，vue-cesium-supermap的github地址

https://lauxb.github.io/vue-cesium-supermap/#/zh/start/installation