developer-plexscape / cesium-angular-example Goto Github PK
View Code? Open in Web Editor NEWAn example application using Cesium with Angular.
An example application using Cesium with Angular.
I am trying to import cesium
import Cesium, { Ion } from 'cesium';
it gives error TS1192: Module '"cesium"' has no default export.
I believe it would be beneficial to make this repo function with @types/cesium from definitelytyped as well. I could include that in the docs pull also.
only one issue, it has stopped working suddenly, I'm tracking an issue with repro steps here
if you have any idea on fixes for this we could work it out together, and this would be a great resource for Angular Typescript Cesium users
Hello, I read the code of the master branch and tried to creat a new project from scratch.
The dependencies is as follow.
"dependencies": {
"@angular/animations": "~10.0.4",
"@angular/common": "~10.0.4",
"@angular/compiler": "~10.0.4",
"@angular/core": "~10.0.4",
"@angular/forms": "~10.0.4",
"@angular/platform-browser": "~10.0.4",
"@angular/platform-browser-dynamic": "~10.0.4",
"@angular/router": "~10.0.4",
"cesium": "^1.71.0",
"rxjs": "~6.5.5",
"tslib": "^2.0.0",
"zone.js": "~0.10.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.1000.3",
"@angular/cli": "~10.0.3",
"@angular/compiler-cli": "~10.0.4",
"@types/node": "^12.11.1",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~3.3.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~3.9.5"
}
I installed cesium, generated a directive and created the same appCesium div with css. But I got some errors when using ng serve.
ERROR in ./node_modules/_cesium@1.71.0@cesium/Source/Core/Resource.js
Module not found: Error: Can't resolve 'http' in 'C:\Users\xzm\Desktop\test\node_modules_cesium@1.71.0@cesium\Source\Core'
ERROR in ./node_modules/_cesium@1.71.0@cesium/Source/Core/Resource.js
Module not found: Error: Can't resolve 'https' in 'C:\Users\xzm\Desktop\test\node_modules_cesium@1.71.0@cesium\Source\Core'
ERROR in ./node_modules/_cesium@1.71.0@cesium/Source/Core/Resource.js
Module not found: Error: Can't resolve 'zlib' in 'C:\Users\xzm\Desktop\test\node_modules_cesium@1.71.0@cesium\Source\Core'
To solve the problem, I added a script in angular.json and changed the way of using Cesium.
"scripts": [
"node_modules/cesium/Build/Cesium/Cesium.js"
]
For declaration, instead of
import { Viewer } from 'cesium';
I used
declare const Cesium: any;
The problem solved, but I got the cesium map like this.
Does anyone know where the problem is?
I had to change the .angular-cli.json redirects to below to get it working
{
"glob": "**/*",
"input": "../node_modules/cesium/Build/Cesium",
"output": "./"
},
{
"glob": "**/*",
"input": "../node_modules/cesium/Source",
"output": "./assets/cesium"
},
Directing from ../node_modules/cesium/Build/Cesium to ./assets/cesium
spits out millions of 404's
Sending ../node_modules/cesium/Source to ./ spits out an Elipsoid.js failure message as seen here.
#mmacaula/cesium-webpack#4 (comment)
Above way works
> Angular CLI: 1.7.4
> Node: 9.10.0
> OS: win32 x64
> Angular: 5.2.9
> ... animations, common, compiler, compiler-cli, core, forms
> ... http, language-service, platform-browser
> ... platform-browser-dynamic, router
>
> @angular/cli: 1.7.4
> @angular-devkit/build-optimizer: 0.3.2
> @angular-devkit/core: 0.3.2
> @angular-devkit/schematics: 0.3.2
> @ngtools/json-schema: 1.2.0
> @ngtools/webpack: 1.10.2
> @schematics/angular: 0.3.2
> @schematics/package-update: 0.3.2
> typescript: 2.5.3
> webpack: 3.11.0
Currently the docs do not explain how to add Cesium to your angular app.
I would be happy to help contribute, I just got it working in my own app.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.