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