# attempt **Repository Path**: zmmlet/attempt ## Basic Information - **Project Name**: attempt - **Description**: 【基于Vue框架的技术尝试和学习性项目】目前实现了结合vue2仿写elementUI组件库（已经实现button、dialog、input、switch、radio、radioGroup、checkbox等组件）;实现自定义vue指令；结合cesium库实现三维地球demo（包含：自定义事件、视频纹理，半透明矩形，天空盒子，广告牌，显示网格等） - **Primary Language**: JavaScript - **License**: Apache-2.0 - **Default Branch**: master - **Homepage**: https://gitee.com/zmmlet - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2021-06-17 - **Last Updated**: 2025-05-31 ## Categories & Tags **Categories**: Uncategorized **Tags**: Vue, 自定义组件库, Cesium, 自定义指令 ## README # attempt ## 项目安装 ``` yarn install ``` ### 编译并热部署的开发环境 ``` yarn serve ``` ### 编译并压缩的生产环境 ``` yarn build ``` ## 项目目录结构 ``` attempt ├─ .editorconfig ├─ .eslintrc ├─ .gitignore ├─ .prettierrc ├─ babel.config.js ├─ LICENSE ├─ package.json ├─ public │ ├─ favicon.ico │ ├─ index.html │ └─ jquery-3.5.1.min.js ├─ README.md ├─ src │ ├─ App.vue │ ├─ assets │ │ ├─ fonts // 维护字典图标 │ │ │ ├─ d-icons.ttf │ │ │ ├─ d-icons.woff │ │ │ └─ font.css │ │ ├─ images │ │ │ ├─ bg-1.jpg │ │ │ ├─ bg-2.jpg │ │ │ ├─ bg-3.jpg │ │ │ ├─ doodle-sprite.png │ │ │ ├─ error.png │ │ │ ├─ jiankong.png │ │ │ ├─ success.png │ │ │ └─ warning.png │ │ └─ scss // 公共组件样式 │ │ ├─ custom │ │ │ ├─ _initialize.scss │ │ │ ├─ _mixins.scss │ │ │ ├─ _utilities.scss │ │ │ └─ _variables.scss │ │ └─ dui.scss │ ├─ components │ │ ├─ customComponents // 公共组件 │ │ │ ├─ Bg.vue │ │ │ ├─ BoxBorder1.vue │ │ │ ├─ BoxBorder2.vue │ │ │ ├─ BoxBorder3.vue │ │ │ ├─ Button.vue │ │ │ ├─ Card.vue │ │ │ ├─ CheckBox.vue │ │ │ ├─ DColumnChart.vue │ │ │ ├─ Dialog.vue │ │ │ ├─ DLineChart.vue │ │ │ ├─ DRoseChart.vue │ │ │ ├─ Form.vue │ │ │ ├─ FormItem.vue │ │ │ ├─ imageShadow.vue │ │ │ ├─ index.vue │ │ │ ├─ Input.vue │ │ │ ├─ JsBarcode.vue │ │ │ ├─ Loading.vue │ │ │ ├─ Radio.vue │ │ │ ├─ RadioGroup.vue │ │ │ ├─ README.md │ │ │ └─ Switch.vue │ │ └─ dragDropComponents │ │ ├─ components │ │ ├─ index.vue │ │ └─ README.md │ ├─ directives // 自定义指令 │ │ ├─ index.js │ │ └─ js │ │ ├─ copy.js │ │ ├─ debounce.js │ │ ├─ draggable.js │ │ ├─ inputNumber.js │ │ ├─ longPress.js │ │ └─ waterMarker.js │ ├─ images │ │ ├─ blueCamera.png │ │ ├─ facility.gif │ │ ├─ marker02.png │ │ ├─ waterNormals.jpg │ │ ├─ waterNormals.png │ │ └─ worldimage.jpg │ ├─ main.js │ ├─ plugins // 自定义UI插件 │ │ └─ globalComponents.js │ ├─ router │ │ └─ index.js │ ├─ store │ │ └─ index.js │ ├─ utils // 工具函数 │ │ ├─ arr.js │ │ ├─ check.js │ │ ├─ client.js │ │ ├─ dom.js │ │ ├─ file.js │ │ ├─ loadMap.js │ │ ├─ number.js │ │ ├─ obj.js │ │ ├─ README.md │ │ ├─ storage.js │ │ ├─ str.js │ │ ├─ thrDeb.js │ │ ├─ time.js │ │ ├─ url.js │ │ └─ utils.js │ └─ views │ ├─ cesium // cesium │ │ ├─ billboard │ │ │ └─ billboard.vue │ │ ├─ bubbleCartridge │ │ │ └─ bubbleCartridge.vue │ │ ├─ CesiumContainer.vue │ │ ├─ dynamicBillboard │ │ │ └─ dynamicBillboard.vue │ │ ├─ dynamicColor │ │ │ └─ dynamicColor.vue │ │ ├─ dynamicCZML │ │ │ └─ dynamicCZML.vue │ │ ├─ entityRectEarth │ │ │ └─ entityRectEarth.vue │ │ ├─ graphicCombination │ │ │ └─ graphicCombination.vue │ │ ├─ ranging │ │ │ └─ ranging.vue │ │ ├─ showGrid │ │ │ └─ showGrid.vue │ │ ├─ skyBox │ │ │ ├─ SkyBox │ │ │ │ ├─ tycho2t3_80_mx.jpg │ │ │ │ ├─ tycho2t3_80_my.jpg │ │ │ │ ├─ tycho2t3_80_mz.jpg │ │ │ │ ├─ tycho2t3_80_px.jpg │ │ │ │ ├─ tycho2t3_80_py.jpg │ │ │ │ └─ tycho2t3_80_pz.jpg │ │ │ └─ skyBox.vue │ │ └─ videosEarth │ │ ├─ imgvideos │ │ │ ├─ tt.avi │ │ │ ├─ tt.mp4 │ │ │ └─ worldimage.jpg │ │ └─ videosEarth.vue │ ├─ home // 首页 │ │ └─ Home.vue │ ├─ layout // 布局页面 │ │ └─ index.vue │ └─ supermap // supermap │ └─ supermap.vue ├─ vue.config.js └─ yarn.lock ``` ## 技术栈介绍 - [cesium](https://cesium.com/platform/cesiumjs/) - [Vue](https://cn.vuejs.org/) - [VueRouter](https://router.vuejs.org/zh/) ## 知识点 ### Cesium #### 隐藏 LOGO 版权 `viewer._cesiumWidget._creditContainer.style.display = 'none'` #### 去除 entity 默认事件 ```js viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK) viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK) ``` #### 鼠标事件 1. 创建 viewer `var viewer = new Cesium.Viewer('cesiumContainer');` 2. 创建鼠标事件 `var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);` 3. 监听鼠标事件 **3.1 左键单击事件** ```js handler.setInputAction(function(click) { console.log('左键单击事件', click.position) }, Cesium.ScreenSpaceEventType.LEFT_CLICK) ``` **3.2 左键双击事件** ```js handler.setInputAction(function(click) { console.log('左键双击事件', click.position) }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK) ``` **3.3 左键按下事件** ```js handler.setInputAction(function(click) { console.log('左键按下事件', click.position) }, Cesium.ScreenSpaceEventType.LEFT_DOWN) ``` **3.4 左键弹起事件** ```js handler.setInputAction(function(click) { console.log('左键弹起事件', click.position) }, Cesium.ScreenSpaceEventType.LEFT_UP) ``` **3.5 中键单击事??件** ```js handler.setInputAction(function(click) { console.log('中键单击事??件', click.position) }, Cesium.ScreenSpaceEventType.MIDDLE_CLICK) ``` **3.6 中键按下事件** ```js handler.setInputAction(function(click) { console.log('中键按下事件', click.position) }, Cesium.ScreenSpaceEventType.MIDDLE_DOWN) ``` **3.7 中键弹起事件** ```js handler.setInputAction(function(click) { console.log('中键弹起事件', click.position) }, Cesium.ScreenSpaceEventType.MIDDLE_UP) ``` **3.8 移动事件** ```js handler.setInputAction(function(movement) { console.log('移动事件', movement.endPosition) }, Cesium.ScreenSpaceEventType.MOUSE_MOVE) ``` **3.9 右键单击事件** ```js handler.setInputAction(function(click) { console.log('右键单击事件', click.position) }, Cesium.ScreenSpaceEventType.RIGHT_CLICK) ``` **3.10 右键按下事件** ```js handler.setInputAction(function(click) { console.log('右键按下事件', click.position) }, Cesium.ScreenSpaceEventType.RIGHT_DOWN) ``` **3.11 右键弹起事件** ```js handler.setInputAction(function(click) { console.log('右键弹起事件', click.position) }, Cesium.ScreenSpaceEventType.RIGHT_UP) ``` **3.12 滚轮事件** ```js handler.setInputAction(function(wheelment) { console.log('滚轮事件', wheelment) }, Cesium.ScreenSpaceEventType.WHEEL) ``` 4. 删除鼠标事件 ```js handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK) ```