用Angular部署Cesium
用到的集成开发环境是WebStrom,Cesium版本是1.50.0,Angular版本是6.2.4
1.首先我们安装cesium,在webstorm中的Termianl中输入
npm install --save cesium
2.再安装类型描述文件,让TypeScript认识Cesium
npm install @types/cesium --save
3.在项目中引用cesium
打开angular.json文件,添加如下路径:

4.在main.ts中配置Cesium的环境路径
main.ts中添加以下语句
window['CESIUM_BASE_URL'] = 'node_modules/cesium/Build/Cesium';
5.然后在我们的项目ts文件中引用
6.在我们项目html文件中添加Cesium的容器,在css文件中添加修饰文件
<div id="cesiumContainer"></div>
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
7.运行项目,查看效果

用Angular部署Cesium的更多相关文章
- angular部署到iis出现404解决方案
angular应用部署在iis上,刷新出现404 解决方案: 安装 iis URL Rewrite 模块,并在 src 目录下增加web.config,配置urlrewrite如下: <conf ...
- asp.net core spa应用(angular) 部署同一网站下
需求:现在一个应用是前后端开发分离,前端使用angular,后端使用 asp.net core 提供api ,开发完成后,现在需要把两个程序部署在同一个网站下,应该怎么处理? 首先可以参考微软的官方文 ...
- Angular部署到windows上
1. 确保已经打开了IIS服务. 如果没有打开可参考 http://jingyan.baidu.com/article/eb9f7b6d9e73d1869364e8d8.html 2. 编译angul ...
- Angular + Github action + Nginx 部署
在常规 Web 的开发流程之中,当开发步入尾声时就需要部署应用到服务器上,Angular 部署上还算简单.经过测试,部署平均用时在5分钟左右,主要受限于 GitHub 海外服务器的网速. 一.Angu ...
- .net core service && angular项目 iis发布
项目结构 .net core 后端服务站点 angular 前端页面站点 项目模板来自于abp或者52abp .net core 后端服务站点发布到IIS 发布报错 .Net Core使用IIS部署出 ...
- cesium 学习(四) Hello World
一.前言 之前的文章都是基础,搭建环境.部署Cesium.学习资料等等.现在简单入手,一个Hello World页面开发. 二.Hello World 感觉Hello World没有什么特别需要讲的, ...
- Cesium 学习(三)各种资源链接
1.前言 前面已经介绍如何获得以及安装部署Cesium,接下来分享下学习资源链接,其中访问最多的是官网以及超图.火星的demo网站. 2.官网地址及介绍 官网:https://cesiumjs.org ...
- Cesium简介以及离线部署运行
Cesium简介 cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎,一款开源3DGIS的js库.cesium支持3D,2D,2.5D形式的地图展示,可以自行绘制图形,高亮区 ...
- ABP .Net Core API和Angular前端APP集成部署
前言:在ABP官网(https://aspnetboilerplate.com)生成的.Net Core + Angular项目前后端是两个独立的项目,我们可以分开部署,也可以将前端和Web API一 ...
随机推荐
- 网络协议 5 - ICMP 与 ping:投石问路的侦察兵
日常开发中,我们经常会碰到查询网络是否畅通以及域名对应 IP 地址等小需求,这时候用的最多的应该就是 ping 命令了. 那你知道 ping 命令是怎么工作的吗?今天,我们就来一起认识下 pi ...
- Vim 复制粘帖格式错乱问题的解决办法
有时候,复制文本(尤其是代码)到 Vim,会出现格式错乱的问题.看样子,应该是自动缩进惹得祸.本文不去深究原因,直接给出解决方法. 1. paste 模式 运行如下命令,进入 paste 模式: :s ...
- Chapter 4 Invitations——24
"How do you do that?" I asked in amazed irritation. “你是怎么做到的?”我惊讶的问道. "Do what?" ...
- Why DDD and layered architecture
As a developer, you may think that your job is to write code. However, Software development is not a ...
- 【ASP.NET Core快速入门】(九) RoutingMiddleware介绍以及MVC引入
前言 前面我们介绍了使用app.Map来配置路由,但是对于一般不是特别大的项目来说,我们不使用Map来进行路由配置. 配置路由 我们首先需要在Startup.cs文件中的ConfigureServic ...
- JDK源码分析(1)之 String 相关
在此之前有无数次下定决心要把JDK的源码大致看一遍,但是每次还没点开就已被一个超链接或者其他事情吸引直接跳开了.直到最近突然意识到,因为对源码的了解不深导致踩了许多莫名其妙的坑,所以再次下定决心要把 ...
- ubuntu 修改网卡名称 更改设备网卡名称 修改eno16777736为eth0 ubuntu 15.10网卡名称为eno16777736
ubuntu linux 进入root用户,管理员模式 编辑这个文件需要管理员模式 在GRUB_CMD_LINUX后面增加图中所示 看到这个地方了没,有提示信息的,想要改变这个文件,记得运行 upda ...
- iframe跨域通信实战
"长时间不写文章,开头的方式总是那么出奇的相似",最近很忙,好久没写博客了啊(是不是?). 更换工作已经有三个月有余,这段三个月把过去三年没加过的班都加了一次.收获挺多,发现的问题 ...
- 脚本检测Kafka和Zookeeper
Java测试环境中Kafka最近总是自动停止,所有写了一个简单的脚本来监听Kafka和Zookeeper,其中Kafka监听端口为9092,Zookeeper监听端口为2181,脚本如下: #!/bi ...
- IO通信模型(二)同步非阻塞模式NIO(NonBlocking IO)
同步非阻塞模式(NonBlocking IO) 在非阻塞模式中,发出Socket的accept()和read()操作时,如果内核中的数据还没有准备好,那么它并不会阻塞用户进程,而是立刻返回一个信息.也 ...