用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一 ...
随机推荐
- qt 标签 QTextBrowser QLabel
使用标签控件时我首先想到的就是QLabel,QLabel支持自动换行,并可以解析富文本,是一个不错的选择,这也使的我并没有去深入了解其他的可以有 同样效果的控件,本篇文字我也主要是讲解标签的用法,可以 ...
- asp.net core 系列 21 EF现有数据库进行反向工程
一.概述 在上篇中使用EF基于数据模型创建数据库, 本篇继续使用 EF 基于数据库创建数据模型. 实现对已有数据库进行反向工程,来构建数据访问的 ASP.NET Core MVC 应用程序.已有 ...
- C++版 - Lintcode 77-Longest Common Subsequence最长公共子序列(LCS) - 题解
版权声明:本文为博主Bravo Yeung(知乎UserName同名)的原创文章,欲转载请先私信获博主允许,转载时请附上网址 http://blog.csdn.net/lzuacm. C++版 - L ...
- Solr 08 - 在Solr Web管理页面中查询索引数据 (Solr中各类查询参数的使用方法)
目录 1 Solr管理页面的查询入口 2 Solr查询输入框简介 3 Solr管理页面的查询方案 1 Solr管理页面的查询入口 选中需要查询的SolrCore, 然后在菜单栏选择[Query]: 2 ...
- 精读《Scheduling in React》
1. 引言 这次介绍的文章是 scheduling-in-react,简单来说就是 React 的调度系统,为了得到更顺滑的用户体验. 毕竟前端做到最后,都是体验优化,前端带给用户的价值核心就在于此. ...
- C语言实现顺序栈的初始化&进栈&出栈&读取栈顶元素
/*顺序表实现栈的一系列操作*/ #include<stdio.h> #include<stdlib.h> #define Stack_Size 50 //设栈中元素个数为50 ...
- webpack4.0各个击破(8)—— tapable篇
webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习we ...
- babel版本兼容报错处理:Plugin/Preset files are not allowed to export objects
原文地址: https://www.cnblogs.com/jiebba/p/9618930.html 1.为什么会报错 ? 这里抱着错误是因为 babel 的版本冲突. 多是因为你的 babel 依 ...
- 实时显示数据 SignalR 及时消息提醒( 立即向其推送内容)
实时显示数据 SignalR 及时消息提醒( 立即向其推送内容) http://www.cnblogs.com/Leo_wl/p/5634910.html <!--Reference the ...
- ubuntu所有php扩展php-7.0扩展列表
sudo apt-get install php7.0-bcmath sudo apt-get install php7.0-bz2 sudo apt-get install php7.0-calen ...