In my case, I followed this demo code that it was success.
But, when I import a KML file from this project of folder which always get an error message.
Here is my code and my kml file.
CesiumViewer.vue
import * as Cesium from "cesium"
import "cesium/Source/Widgets/widgets.css";
const viewer = new Cesium.Viewer('app')
viewer.scene.debugShowFramesPerSecond = true
viewer.dataSources.add(Cesium.KmlDataSource.load('../SampleData/demo.kml',
{
camera: viewer.scene.camera,
canvas: viewer.scene.canvas
})
);
package.json
{
"name": "vue-cesium",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"cesium": "^1.100.0",
"core-js": "^3.8.3",
"vue": "^3.2.13"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"copy-webpack-plugin": "^9.1.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"webpack": "^5.75.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "@babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"not ie 11"
]
}
Tree Commend
KML File
demo.kml (336.8 KB)
–
Does Cesium is not support KmlDataSource to load KML file in vue framework?
Or here are some mistake of setting in my project?
Thank you for your anwser.