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

vue集成超图supermap-cesium实践相关推荐

Vue集成Cesium之二 —— 相机（Camera）
上一篇文章初步写了一下 vue 集成 cesium 方法和注意的地方. 最近因为项目中用到的地图资源并不是拿来就能用,需要调整显示的角度.缩放等设置.所以把 cesium 所有的相机(也就是视角)设置 ...
vue集成cesium入门教程（1）环境搭建、初始化三维地球
1.概述这篇内容是<vue集成cesium入门教程>的第一篇,我将记录在vue中集成cesium并实现页面的初始化(显示三维地图页面)等学习内容.效果如下: 2.实现步骤首先是 ...
SpreadJS与Vue集成，苏宁集团『极客办公』系统开发案例
"造极"如今已成为苏宁集团的年度核心关键词."造极"在具体工作上的体现,代表着苏宁不断追求极致的工匠精神,即对待每一个环节,都要严格要求.精益求精." ...
云效平台：企业级互联网架构下的持续集成与持续交付实践
摘要:本文的整理自2017云栖大会-南京峰会上阿里云高级技术专家鲁小川的分享讲义,讲义主要分享了阿里云云效平台对于企业级互联网架构下的持续集成与持续交付的实践经验,首先介绍了阿里云云效平台的起源,之后 ...
Vue.js组件化开发实践
Vue.js组件化开发实践前言公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一 ...
Electron中与Vue集成流程
场景用HTML和CSS和JS构建跨平台桌面应用程序的开源库Electron的介绍以及搭建HelloWorld: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/a ...
Node.js、Npm、MVVM模式、idea的vue集成
Node.js 简单的说 Node.js 就是运行在服务端的 JavaScript. Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台. Node.js是一个事件驱动 ...
.NET Core开发实战（第15课：选项框架：服务组件集成配置的最佳实践）--学习笔记...
15 | 选项框架:服务组件集成配置的最佳实践这一节讲解如何使用选项框架来处理服务和配置的关系选项框架的特性: 1.支持单例模式读取配置 2.支持快照 3.支持配置变更通知 4.支持运行时动态修改 ...
vue 是否有word编辑控件_GitHub - C84882428/editor-ui: vue集成 tinymce 富文本编辑器,增加导入 word 模板...
editor-ui vue 集成 tinymce 富文本编辑器自定义 tinymce 富文本编辑器, 在原来的编辑器中增加上传 word 模板最终展示效果: 主要代码: 整体思路: 1,在编辑器原 ...

vue集成超图supermap-cesium实践

vue集成超图supermap-cesium实践相关推荐

最新文章

热门文章