{"id":19838903,"url":"https://github.com/supermap/vue-iclient3d_for_cesium","last_synced_at":"2025-11-08T02:03:13.228Z","repository":{"id":40004027,"uuid":"297493172","full_name":"SuperMap/vue-iClient3D_for_Cesium","owner":"SuperMap","description":null,"archived":false,"fork":false,"pushed_at":"2023-10-18T07:13:50.000Z","size":39164,"stargazers_count":65,"open_issues_count":11,"forks_count":22,"subscribers_count":18,"default_branch":"master","last_synced_at":"2025-04-06T16:53:02.952Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SuperMap.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-09-22T00:28:05.000Z","updated_at":"2024-12-05T08:13:40.000Z","dependencies_parsed_at":"2024-11-12T12:29:44.627Z","dependency_job_id":null,"html_url":"https://github.com/SuperMap/vue-iClient3D_for_Cesium","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SuperMap%2Fvue-iClient3D_for_Cesium","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SuperMap%2Fvue-iClient3D_for_Cesium/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SuperMap%2Fvue-iClient3D_for_Cesium/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SuperMap%2Fvue-iClient3D_for_Cesium/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SuperMap","download_url":"https://codeload.github.com/SuperMap/vue-iClient3D_for_Cesium/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251924764,"owners_count":21666034,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-12T12:19:31.633Z","updated_at":"2025-11-08T02:03:08.190Z","avatar_url":"https://github.com/SuperMap.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# \u003ccenter\u003e@supermap/vue-iclient3d-webgl\u003c/center\u003e\n\n# Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:3000\nnpm run dev\n\n# build for production with minification\nnpm run build:js\nnpm run build:style\n\n```\n\n\n注：项目存放文件夹路径中不能有中文字符，否则启动会有异常报错。\n\n\n# 简介\n### 特点：\n- 采用当前Vue3升级组件，相比原来有更快的速度和更好的性能\n- 实现了界面与功能分离，可以更灵活的适用于各种应用场景\n- 全面的开源组件源码，可以更容易的理解和修改等二次开发，轻松实现自定义组件。\n\n### 示例：https://www.supermapol.com/earth/vue-iEarth/examples/index.html\n\n\n# 开发\n#### 方法一：Vue工程，NPM 安装：\n\n``` bash\nnpm install @supermap/iclient3d-vue-for-webgl --save-d\n```\n\n##### 1、修改main.js文件：\n\n``` bash\n\nimport { createApp } from 'vue'\nimport App from './App.vue'\nconst app = createApp(App);\n \n// 完整引入第三方库，部分组件需要\nimport ElementPlus from 'element-plus';\nimport 'element-plus/lib/theme-chalk/index.css';\napp.use(ElementPlus)\n//import * as echarts from 'echarts';\n//window.echarts = echarts //挂载到window上\n \n// 引入webgl3d组件包\nimport '@supermap/iclient3d-vue-for-webgl/lib/theme/index.css'\nimport webgl3d from \"@supermap/iclient3d-vue-for-webgl\"\napp.use(webgl3d)  \napp.mount('#app')\n\n```\n\n##### 2、修改index.html文件：\n\n- 引入依赖: 在node_module里找到本组件安装包，复制里面的public里需要的资源到工程目录public文件下，然后在index.html里引入cesium等资源文件。\n\n``` bash\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n  \u003cmeta charset=\"UTF-8\"\u003e\n  \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n  \u003clink href=\"public/Cesium/Widgets/widgets.css\" rel=\"stylesheet\"\u003e\n  \u003cscript src=\"public/Cesium/Cesium.js\" \u003e\u003c/script\u003e\n  \u003ctitle\u003ewebgl3d\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cdiv id=\"app\"\u003e\u003c/div\u003e\n  \u003cscript type=\"module\" src=\"/src/main.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.min.js\" async\u003e\u003c/script\u003e\n  \u003cscript src=\"public/js/axios.min.js\" \u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n##### 3、在App.vue里测试使用量算功能组件：\n\n``` bash\n\u003ctemplate\u003e\n  \u003csm3d-viewer scene-url=\"http://www.supermapol.com/realspace/services/3D-ZF_normal/rest/realspace\"\u003e\n    \u003csm3d-measure\u003e\u003c/sm3d-measure\u003e\n  \u003c/sm3d-viewer\u003e\n\u003c/template\u003e\n\u003cscript\u003e\n```\n\n\n#### 方法二：在 html中通过CDN引入,使用组件：\n\n``` bash\n\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003cmeta http-equiv=\"Content-Security-Policy\" content=\"upgrade-insecure-requests\"\u003e\n    \u003c!-- vue + element-plus--\u003e\n    \u003cscript src=\"https://www.supermapol.com/earth/vue-iEarth/examples/public/js/vue.global.prod.js\"\u003e\u003c/script\u003e\n    \u003clink rel=\"stylesheet\" href=\"https://www.supermapol.com/earth/vue-iEarth/examples/public/element-plus/index.css\"\u003e\n    \u003cscript src=\"https://www.supermapol.com/earth/vue-iEarth/examples/public/element-plus/index.full.js\"\u003e\u003c/script\u003e\n    \u003c!-- cesium --\u003e\n    \u003clink href=\"https://www.supermapol.com/earth/vue-iEarth/examples/public/Cesium/Widgets/widgets.css\"\n        rel=\"stylesheet\"\u003e\n    \u003cscript src=\"https://www.supermapol.com/earth/vue-iEarth/examples/public/Cesium/Cesium.js\"\u003e\u003c/script\u003e\n    \u003c!-- 组件包 --\u003e\n    \u003clink href=\"https://www.supermapol.com/earth/vue-iEarth/examples/dist/components.css\" rel=\"stylesheet\"\u003e\n    \u003cscript src=\"https://www.supermapol.com/earth/vue-iEarth/examples/dist/components.js\"\u003e\u003c/script\u003e\n    \u003ctitle\u003e完整组件-CDN引入-demo\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n      \u003cdiv id=\"app\"\u003e\n        \u003csm3d-viewer scene-url=\"http://www.supermapol.com/realspace/services/3D-ZF_normal/rest/realspace\"\u003e\n            \u003csm3d-measure\u003e\u003c/sm3d-measure\u003e\n        \u003c/sm3d-viewer\u003e\n    \u003c/div\u003e\n    \u003cscript\u003e\n        const app = Vue.createApp({});\n        app.use(webgl3d);  \n        app.mount(\"#app\");\n    \u003c/script\u003e\n\u003c/body\u003e\n\u003c!-- 根据使用具体组件的需要引入其他第三方依赖 --\u003e\n\u003c!-- \u003cscript src=\"https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.min.js\" async\u003e\u003c/script\u003e\n\u003cscript src=\"https://www.supermapol.com/earth/vue-iEarth/examples/public/js/axios.min.js\" async\u003e\u003c/script\u003e --\u003e\n\u003c/html\u003e\n\n```\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsupermap%2Fvue-iclient3d_for_cesium","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsupermap%2Fvue-iclient3d_for_cesium","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsupermap%2Fvue-iclient3d_for_cesium/lists"}