├── .eslintrc.js ├── .github └── workflows │ └── deploy.yml ├── .gitignore ├── .prettierrc.js ├── .vscode └── settings.json ├── LICENSE ├── README.md ├── babel.config.js ├── package.json ├── public ├── favicon.ico ├── icon │ └── iconfont.js └── index.html ├── src ├── App.vue ├── assets │ ├── icon │ │ ├── demo.css │ │ ├── demo_index.html │ │ ├── iconfont.css │ │ ├── iconfont.js │ │ ├── iconfont.json │ │ ├── iconfont.ttf │ │ ├── iconfont.woff │ │ └── iconfont.woff2 │ └── imgs │ │ └── resource │ │ ├── boat.png │ │ ├── res_bg.png │ │ └── res_hover.png ├── components │ ├── CesiumExample │ │ └── No01-init.vue │ └── MyFont.js ├── main.js ├── mixins │ └── resizeMixin.js ├── pages │ ├── Animation │ │ ├── DefenceAlarm.vue │ │ ├── RadarAnimation.vue │ │ ├── ResPointAlarm.vue │ │ ├── TrackLine.vue │ │ ├── TrackPlayback.vue │ │ ├── TwinklePoint.vue │ │ └── index.vue │ ├── BaseMap.vue │ ├── Cesium.vue │ ├── Home.vue │ ├── Interaction │ │ ├── AddMarker.vue │ │ ├── DrawBoxOverlay.vue │ │ ├── HoverAndClick.vue │ │ ├── MeasureArea.vue │ │ ├── MeasureDistance.vue │ │ ├── Popover.vue │ │ ├── SetCenter.vue │ │ ├── ShowTrackInfo.vue │ │ ├── SwitchTileLayer.vue │ │ ├── VectorLayerVisible.vue │ │ └── index.vue │ ├── Overlay │ │ ├── Marker.vue │ │ └── index.vue │ ├── VectorLayer │ │ ├── Arrow.vue │ │ ├── LineString.vue │ │ ├── MultiLineString.vue │ │ ├── MultiPoint.vue │ │ ├── MultiPolygon.vue │ │ ├── Point.vue │ │ ├── Polygon.vue │ │ ├── Radar.vue │ │ ├── Sector.vue │ │ └── index.vue │ └── WebGL │ │ ├── IconPoints.vue │ │ └── index.vue └── router │ └── index.js └── vue.config.js /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | // 更多配置详见:https://eslint.bootcss.com/docs/user-guide/configuring 4 | browser: true, 5 | es6: true, 6 | }, 7 | extends: [ 8 | "plugin:vue/recommended", // 适用于 Vue.js 2.x,使用 recommended 规则。详见:https://eslint.vuejs.org/user-guide/#usage 9 | "plugin:prettier/recommended", // eslint-config-prettier 和 eslint-plugin-prettier 两个插件的快捷配置(官方文档有详细说明) 10 | ], 11 | rules: { 12 | quotes: ["error", "single"], // 使用单引号 13 | }, 14 | parserOptions: { 15 | parser: "babel-eslint", // 用于解析检查项目中用到的非标准或实验性的语法,比如异步 import 16 | }, 17 | }; -------------------------------------------------------------------------------- /.github/workflows/deploy.yml: -------------------------------------------------------------------------------- 1 | name: GitHub Actions Build and Deploy Demo 2 | on: 3 | push: 4 | branches: 5 | - master 6 | jobs: 7 | build-and-deploy: 8 | runs-on: ubuntu-latest 9 | steps: 10 | - name: Checkout 11 | uses: actions/checkout@master 12 | 13 | - name: Build and Deploy 14 | uses: jenkey2011/vuepress-deploy@master 15 | env: 16 | ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} 17 | # 部署分支 18 | TARGET_BRANCH: page 19 | BUILD_SCRIPT: yarn && yarn build 20 | # 打包输出目录3 21 | BUILD_DIR: dist -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist/ 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | pnpm-debug.log* 14 | 15 | # Editor directories and files 16 | .idea 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | semi: false, // 行末不跟分号 3 | trailingComma: "all", // 有尾随逗号 4 | arrowParens: "avoid", // 箭头函数单个参数不加分号 5 | singleQuote: true, // 使用单引号 6 | printWidth: 110, // 换行长度 7 | endOfLine: "crlf", // 换行格式采用 CRLF。说明:https://www.jianshu.com/p/b03ad01acd69 8 | }; -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | // VScode主题配置 3 | "editor.tabSize": 2, 4 | "editor.lineHeight": 24, 5 | "javascript.updateImportsOnFileMove.enabled": "always", // 移动文件或者修改文件名时,是否自动更新引用了此文件的所有文件。 6 | // 每次保存是否自动格式化文件 7 | // "editor.formatOnSave": true, 8 | // 每次保存的时候将代码按格式进行修复 9 | "editor.codeActionsOnSave": { 10 | // 自动引入缺少的库 11 | "source.addMissingImports": true, 12 | // 为代码及Eslint添加自动修复功能 13 | "source.fixAll": true, 14 | "source.fixAll.eslint": true 15 | }, 16 | // 针对.vue、.ts 和 .tsx 文件开启 ESLint 的 autoFix 17 | "eslint.validate": [ 18 | "javascript", 19 | "javascriptreact", 20 | "vue", 21 | "typescript", 22 | "typescriptreact" 23 | ] 24 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "[]" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright [yyyy] [name of copyright owner] 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # openlayers 2 | 3 | ## Project setup 4 | ``` 5 | yarn install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | yarn serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | yarn build 16 | ``` 17 | 18 | ### Lints and fixes files 19 | ``` 20 | yarn lint 21 | ``` 22 | 23 | ### Customize configuration 24 | See [Configuration Reference](https://cli.vuejs.org/config/). 25 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "openlayers", 3 | "version": "0.1.0", 4 | "private": true, 5 | "homepage": "https://wjr-dev.github.io/Openlayers6-Example", 6 | "scripts": { 7 | "serve": "vue-cli-service serve", 8 | "build": "vue-cli-service build", 9 | "lint": "vue-cli-service lint" 10 | }, 11 | "dependencies": { 12 | "ant-design-vue": "^1.7.8", 13 | "cesium": "1.71.0", 14 | "core-js": "^3.6.5", 15 | "ol": "^6.9.0", 16 | "vue": "^2.6.11", 17 | "vue-cli-plugin-cesium": "^1.1.7", 18 | "vue-router": "^3.5.3" 19 | }, 20 | "devDependencies": { 21 | "@vue/cli-plugin-babel": "~4.5.0", 22 | "@vue/cli-service": "~4.5.0", 23 | "babel-eslint": "^10.1.0", 24 | "eslint": "^8.2.0", 25 | "eslint-config-prettier": "^8.3.0", 26 | "eslint-plugin-prettier": "^4.0.0", 27 | "eslint-plugin-vue": "^8.1.1", 28 | "prettier": "^2.4.1", 29 | "sass": "^1.43.4", 30 | "sass-loader": "10.x", 31 | "vue-template-compiler": "^2.6.11" 32 | }, 33 | "eslintConfig": { 34 | "root": true, 35 | "env": { 36 | "node": true 37 | }, 38 | "extends": [ 39 | "plugin:vue/essential", 40 | "eslint:recommended" 41 | ], 42 | "parserOptions": { 43 | "parser": "babel-eslint" 44 | }, 45 | "rules": {} 46 | }, 47 | "browserslist": [ 48 | "> 1%", 49 | "last 2 versions", 50 | "not dead" 51 | ] 52 | } 53 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wjr-dev/Openlayers6-Example/002b0d28e665eaf72ec0db2487d44e566c7ca573/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | <%= htmlWebpackPlugin.options.title %> 11 | 12 | 13 | 16 |
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 67 | 68 | 111 | 112 | 169 | -------------------------------------------------------------------------------- /src/assets/icon/demo.css: -------------------------------------------------------------------------------- 1 | /* Logo 字体 */ 2 | @font-face { 3 | font-family: "iconfont logo"; 4 | src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); 5 | src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), 6 | url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), 7 | url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), 8 | url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); 9 | } 10 | 11 | .logo { 12 | font-family: "iconfont logo"; 13 | font-size: 160px; 14 | font-style: normal; 15 | -webkit-font-smoothing: antialiased; 16 | -moz-osx-font-smoothing: grayscale; 17 | } 18 | 19 | /* tabs */ 20 | .nav-tabs { 21 | position: relative; 22 | } 23 | 24 | .nav-tabs .nav-more { 25 | position: absolute; 26 | right: 0; 27 | bottom: 0; 28 | height: 42px; 29 | line-height: 42px; 30 | color: #666; 31 | } 32 | 33 | #tabs { 34 | border-bottom: 1px solid #eee; 35 | } 36 | 37 | #tabs li { 38 | cursor: pointer; 39 | width: 100px; 40 | height: 40px; 41 | line-height: 40px; 42 | text-align: center; 43 | font-size: 16px; 44 | border-bottom: 2px solid transparent; 45 | position: relative; 46 | z-index: 1; 47 | margin-bottom: -1px; 48 | color: #666; 49 | } 50 | 51 | 52 | #tabs .active { 53 | border-bottom-color: #f00; 54 | color: #222; 55 | } 56 | 57 | .tab-container .content { 58 | display: none; 59 | } 60 | 61 | /* 页面布局 */ 62 | .main { 63 | padding: 30px 100px; 64 | width: 960px; 65 | margin: 0 auto; 66 | } 67 | 68 | .main .logo { 69 | color: #333; 70 | text-align: left; 71 | margin-bottom: 30px; 72 | line-height: 1; 73 | height: 110px; 74 | margin-top: -50px; 75 | overflow: hidden; 76 | *zoom: 1; 77 | } 78 | 79 | .main .logo a { 80 | font-size: 160px; 81 | color: #333; 82 | } 83 | 84 | .helps { 85 | margin-top: 40px; 86 | } 87 | 88 | .helps pre { 89 | padding: 20px; 90 | margin: 10px 0; 91 | border: solid 1px #e7e1cd; 92 | background-color: #fffdef; 93 | overflow: auto; 94 | } 95 | 96 | .icon_lists { 97 | width: 100% !important; 98 | overflow: hidden; 99 | *zoom: 1; 100 | } 101 | 102 | .icon_lists li { 103 | width: 100px; 104 | margin-bottom: 10px; 105 | margin-right: 20px; 106 | text-align: center; 107 | list-style: none !important; 108 | cursor: default; 109 | } 110 | 111 | .icon_lists li .code-name { 112 | line-height: 1.2; 113 | } 114 | 115 | .icon_lists .icon { 116 | display: block; 117 | height: 100px; 118 | line-height: 100px; 119 | font-size: 42px; 120 | margin: 10px auto; 121 | color: #333; 122 | -webkit-transition: font-size 0.25s linear, width 0.25s linear; 123 | -moz-transition: font-size 0.25s linear, width 0.25s linear; 124 | transition: font-size 0.25s linear, width 0.25s linear; 125 | } 126 | 127 | .icon_lists .icon:hover { 128 | font-size: 100px; 129 | } 130 | 131 | .icon_lists .svg-icon { 132 | /* 通过设置 font-size 来改变图标大小 */ 133 | width: 1em; 134 | /* 图标和文字相邻时,垂直对齐 */ 135 | vertical-align: -0.15em; 136 | /* 通过设置 color 来改变 SVG 的颜色/fill */ 137 | fill: currentColor; 138 | /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 139 | normalize.css 中也包含这行 */ 140 | overflow: hidden; 141 | } 142 | 143 | .icon_lists li .name, 144 | .icon_lists li .code-name { 145 | color: #666; 146 | } 147 | 148 | /* markdown 样式 */ 149 | .markdown { 150 | color: #666; 151 | font-size: 14px; 152 | line-height: 1.8; 153 | } 154 | 155 | .highlight { 156 | line-height: 1.5; 157 | } 158 | 159 | .markdown img { 160 | vertical-align: middle; 161 | max-width: 100%; 162 | } 163 | 164 | .markdown h1 { 165 | color: #404040; 166 | font-weight: 500; 167 | line-height: 40px; 168 | margin-bottom: 24px; 169 | } 170 | 171 | .markdown h2, 172 | .markdown h3, 173 | .markdown h4, 174 | .markdown h5, 175 | .markdown h6 { 176 | color: #404040; 177 | margin: 1.6em 0 0.6em 0; 178 | font-weight: 500; 179 | clear: both; 180 | } 181 | 182 | .markdown h1 { 183 | font-size: 28px; 184 | } 185 | 186 | .markdown h2 { 187 | font-size: 22px; 188 | } 189 | 190 | .markdown h3 { 191 | font-size: 16px; 192 | } 193 | 194 | .markdown h4 { 195 | font-size: 14px; 196 | } 197 | 198 | .markdown h5 { 199 | font-size: 12px; 200 | } 201 | 202 | .markdown h6 { 203 | font-size: 12px; 204 | } 205 | 206 | .markdown hr { 207 | height: 1px; 208 | border: 0; 209 | background: #e9e9e9; 210 | margin: 16px 0; 211 | clear: both; 212 | } 213 | 214 | .markdown p { 215 | margin: 1em 0; 216 | } 217 | 218 | .markdown>p, 219 | .markdown>blockquote, 220 | .markdown>.highlight, 221 | .markdown>ol, 222 | .markdown>ul { 223 | width: 80%; 224 | } 225 | 226 | .markdown ul>li { 227 | list-style: circle; 228 | } 229 | 230 | .markdown>ul li, 231 | .markdown blockquote ul>li { 232 | margin-left: 20px; 233 | padding-left: 4px; 234 | } 235 | 236 | .markdown>ul li p, 237 | .markdown>ol li p { 238 | margin: 0.6em 0; 239 | } 240 | 241 | .markdown ol>li { 242 | list-style: decimal; 243 | } 244 | 245 | .markdown>ol li, 246 | .markdown blockquote ol>li { 247 | margin-left: 20px; 248 | padding-left: 4px; 249 | } 250 | 251 | .markdown code { 252 | margin: 0 3px; 253 | padding: 0 5px; 254 | background: #eee; 255 | border-radius: 3px; 256 | } 257 | 258 | .markdown strong, 259 | .markdown b { 260 | font-weight: 600; 261 | } 262 | 263 | .markdown>table { 264 | border-collapse: collapse; 265 | border-spacing: 0px; 266 | empty-cells: show; 267 | border: 1px solid #e9e9e9; 268 | width: 95%; 269 | margin-bottom: 24px; 270 | } 271 | 272 | .markdown>table th { 273 | white-space: nowrap; 274 | color: #333; 275 | font-weight: 600; 276 | } 277 | 278 | .markdown>table th, 279 | .markdown>table td { 280 | border: 1px solid #e9e9e9; 281 | padding: 8px 16px; 282 | text-align: left; 283 | } 284 | 285 | .markdown>table th { 286 | background: #F7F7F7; 287 | } 288 | 289 | .markdown blockquote { 290 | font-size: 90%; 291 | color: #999; 292 | border-left: 4px solid #e9e9e9; 293 | padding-left: 0.8em; 294 | margin: 1em 0; 295 | } 296 | 297 | .markdown blockquote p { 298 | margin: 0; 299 | } 300 | 301 | .markdown .anchor { 302 | opacity: 0; 303 | transition: opacity 0.3s ease; 304 | margin-left: 8px; 305 | } 306 | 307 | .markdown .waiting { 308 | color: #ccc; 309 | } 310 | 311 | .markdown h1:hover .anchor, 312 | .markdown h2:hover .anchor, 313 | .markdown h3:hover .anchor, 314 | .markdown h4:hover .anchor, 315 | .markdown h5:hover .anchor, 316 | .markdown h6:hover .anchor { 317 | opacity: 1; 318 | display: inline-block; 319 | } 320 | 321 | .markdown>br, 322 | .markdown>p>br { 323 | clear: both; 324 | } 325 | 326 | 327 | .hljs { 328 | display: block; 329 | background: white; 330 | padding: 0.5em; 331 | color: #333333; 332 | overflow-x: auto; 333 | } 334 | 335 | .hljs-comment, 336 | .hljs-meta { 337 | color: #969896; 338 | } 339 | 340 | .hljs-string, 341 | .hljs-variable, 342 | .hljs-template-variable, 343 | .hljs-strong, 344 | .hljs-emphasis, 345 | .hljs-quote { 346 | color: #df5000; 347 | } 348 | 349 | .hljs-keyword, 350 | .hljs-selector-tag, 351 | .hljs-type { 352 | color: #a71d5d; 353 | } 354 | 355 | .hljs-literal, 356 | .hljs-symbol, 357 | .hljs-bullet, 358 | .hljs-attribute { 359 | color: #0086b3; 360 | } 361 | 362 | .hljs-section, 363 | .hljs-name { 364 | color: #63a35c; 365 | } 366 | 367 | .hljs-tag { 368 | color: #333333; 369 | } 370 | 371 | .hljs-title, 372 | .hljs-attr, 373 | .hljs-selector-id, 374 | .hljs-selector-class, 375 | .hljs-selector-attr, 376 | .hljs-selector-pseudo { 377 | color: #795da3; 378 | } 379 | 380 | .hljs-addition { 381 | color: #55a532; 382 | background-color: #eaffea; 383 | } 384 | 385 | .hljs-deletion { 386 | color: #bd2c00; 387 | background-color: #ffecec; 388 | } 389 | 390 | .hljs-link { 391 | text-decoration: underline; 392 | } 393 | 394 | /* 代码高亮 */ 395 | /* PrismJS 1.15.0 396 | https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ 397 | /** 398 | * prism.js default theme for JavaScript, CSS and HTML 399 | * Based on dabblet (http://dabblet.com) 400 | * @author Lea Verou 401 | */ 402 | code[class*="language-"], 403 | pre[class*="language-"] { 404 | color: black; 405 | background: none; 406 | text-shadow: 0 1px white; 407 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 408 | text-align: left; 409 | white-space: pre; 410 | word-spacing: normal; 411 | word-break: normal; 412 | word-wrap: normal; 413 | line-height: 1.5; 414 | 415 | -moz-tab-size: 4; 416 | -o-tab-size: 4; 417 | tab-size: 4; 418 | 419 | -webkit-hyphens: none; 420 | -moz-hyphens: none; 421 | -ms-hyphens: none; 422 | hyphens: none; 423 | } 424 | 425 | pre[class*="language-"]::-moz-selection, 426 | pre[class*="language-"] ::-moz-selection, 427 | code[class*="language-"]::-moz-selection, 428 | code[class*="language-"] ::-moz-selection { 429 | text-shadow: none; 430 | background: #b3d4fc; 431 | } 432 | 433 | pre[class*="language-"]::selection, 434 | pre[class*="language-"] ::selection, 435 | code[class*="language-"]::selection, 436 | code[class*="language-"] ::selection { 437 | text-shadow: none; 438 | background: #b3d4fc; 439 | } 440 | 441 | @media print { 442 | 443 | code[class*="language-"], 444 | pre[class*="language-"] { 445 | text-shadow: none; 446 | } 447 | } 448 | 449 | /* Code blocks */ 450 | pre[class*="language-"] { 451 | padding: 1em; 452 | margin: .5em 0; 453 | overflow: auto; 454 | } 455 | 456 | :not(pre)>code[class*="language-"], 457 | pre[class*="language-"] { 458 | background: #f5f2f0; 459 | } 460 | 461 | /* Inline code */ 462 | :not(pre)>code[class*="language-"] { 463 | padding: .1em; 464 | border-radius: .3em; 465 | white-space: normal; 466 | } 467 | 468 | .token.comment, 469 | .token.prolog, 470 | .token.doctype, 471 | .token.cdata { 472 | color: slategray; 473 | } 474 | 475 | .token.punctuation { 476 | color: #999; 477 | } 478 | 479 | .namespace { 480 | opacity: .7; 481 | } 482 | 483 | .token.property, 484 | .token.tag, 485 | .token.boolean, 486 | .token.number, 487 | .token.constant, 488 | .token.symbol, 489 | .token.deleted { 490 | color: #905; 491 | } 492 | 493 | .token.selector, 494 | .token.attr-name, 495 | .token.string, 496 | .token.char, 497 | .token.builtin, 498 | .token.inserted { 499 | color: #690; 500 | } 501 | 502 | .token.operator, 503 | .token.entity, 504 | .token.url, 505 | .language-css .token.string, 506 | .style .token.string { 507 | color: #9a6e3a; 508 | background: hsla(0, 0%, 100%, .5); 509 | } 510 | 511 | .token.atrule, 512 | .token.attr-value, 513 | .token.keyword { 514 | color: #07a; 515 | } 516 | 517 | .token.function, 518 | .token.class-name { 519 | color: #DD4A68; 520 | } 521 | 522 | .token.regex, 523 | .token.important, 524 | .token.variable { 525 | color: #e90; 526 | } 527 | 528 | .token.important, 529 | .token.bold { 530 | font-weight: bold; 531 | } 532 | 533 | .token.italic { 534 | font-style: italic; 535 | } 536 | 537 | .token.entity { 538 | cursor: help; 539 | } 540 | -------------------------------------------------------------------------------- /src/assets/icon/demo_index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | iconfont Demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 36 | 37 | 38 |
39 |

40 | 41 | 42 |

43 | 53 |
54 |
55 |
    56 | 57 |
  • 58 | 59 |
    箭头
    60 |
    &#xe627;
    61 |
  • 62 | 63 |
  • 64 | 65 |
    point
    66 |
    &#xe642;
    67 |
  • 68 | 69 |
  • 70 | 71 |
    204首页
    72 |
    &#xe8b9;
    73 |
  • 74 | 75 |
  • 76 | 77 |
    Polygon
    78 |
    &#xe612;
    79 |
  • 80 | 81 |
  • 82 | 83 |
    人机交互
    84 |
    &#xeb66;
    85 |
  • 86 | 87 |
  • 88 | 89 |
    雷达
    90 |
    &#xe62a;
    91 |
  • 92 | 93 |
  • 94 | 95 |
    交互日志
    96 |
    &#xe632;
    97 |
  • 98 | 99 |
  • 100 | 101 |
    轨迹回放
    102 |
    &#xe699;
    103 |
  • 104 | 105 |
  • 106 | 107 |
    闪烁点image_9
    108 |
    &#xe60a;
    109 |
  • 110 | 111 |
  • 112 | 113 |
    Popover
    114 |
    &#xe6b6;
    115 |
  • 116 | 117 |
  • 118 | 119 |
    扇形
    120 |
    &#xe61d;
    121 |
  • 122 | 123 |
  • 124 | 125 |
    overlay
    126 |
    &#xe715;
    127 |
  • 128 | 129 |
  • 130 | 131 |
    定位
    132 |
    &#xe60b;
    133 |
  • 134 | 135 |
  • 136 | 137 |
    interaction
    138 |
    &#xe600;
    139 |
  • 140 | 141 |
  • 142 | 143 |
    播放
    144 |
    &#xe629;
    145 |
  • 146 | 147 |
  • 148 | 149 |
    雷达
    150 |
    &#xe62f;
    151 |
  • 152 | 153 |
  • 154 | 155 |
    基础地图
    156 |
    &#xe6e8;
    157 |
  • 158 | 159 |
  • 160 | 161 |
    标记
    162 |
    &#xe653;
    163 |
  • 164 | 165 |
  • 166 | 167 |
    更多-面
    168 |
    &#xed0c;
    169 |
  • 170 | 171 |
  • 172 | 173 |
    轨迹
    174 |
    &#xea05;
    175 |
  • 176 | 177 |
  • 178 | 179 |
    interaction
    180 |
    &#xe64e;
    181 |
  • 182 | 183 |
  • 184 | 185 |
    矢量图层
    186 |
    &#xe6b7;
    187 |
  • 188 | 189 |
  • 190 | 191 |
    vectorLayer
    192 |
    &#xe630;
    193 |
  • 194 | 195 |
  • 196 | 197 |
    animation-play
    198 |
    &#xe601;
    199 |
  • 200 | 201 |
  • 202 | 203 |
    lineString
    204 |
    &#xe602;
    205 |
  • 206 | 207 |
  • 208 | 209 |
    更多
    210 |
    &#xe677;
    211 |
  • 212 | 213 |
  • 214 | 215 |
    multi-point
    216 |
    &#xe60c;
    217 |
  • 218 | 219 |
220 |
221 |

Unicode 引用

222 |
223 | 224 |

Unicode 是字体在网页端最原始的应用方式,特点是:

225 |
    226 |
  • 支持按字体的方式去动态调整图标大小,颜色等等。
  • 227 |
  • 默认情况下不支持多色,直接添加多色图标会自动去色。
  • 228 |
229 |
230 |

注意:新版 iconfont 支持两种方式引用多色图标:SVG symbol 引用方式和彩色字体图标模式。(使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。)

231 |
232 |

Unicode 使用步骤如下:

233 |

第一步:拷贝项目下面生成的 @font-face

234 |
@font-face {
236 |   font-family: 'iconfont';
237 |   src: url('iconfont.woff2?t=1636685371780') format('woff2'),
238 |        url('iconfont.woff?t=1636685371780') format('woff'),
239 |        url('iconfont.ttf?t=1636685371780') format('truetype');
240 | }
241 | 
242 |

第二步:定义使用 iconfont 的样式

243 |
.iconfont {
245 |   font-family: "iconfont" !important;
246 |   font-size: 16px;
247 |   font-style: normal;
248 |   -webkit-font-smoothing: antialiased;
249 |   -moz-osx-font-smoothing: grayscale;
250 | }
251 | 
252 |

第三步:挑选相应图标并获取字体编码,应用于页面

253 |
254 | <span class="iconfont">&#x33;</span>
256 | 
257 |
258 |

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。

259 |
260 |
261 |
262 |
263 |
    264 | 265 |
  • 266 | 267 |
    268 | 箭头 269 |
    270 |
    .icon-Arrow 271 |
    272 |
  • 273 | 274 |
  • 275 | 276 |
    277 | point 278 |
    279 |
    .icon-Point 280 |
    281 |
  • 282 | 283 |
  • 284 | 285 |
    286 | 204首页 287 |
    288 |
    .icon-Home 289 |
    290 |
  • 291 | 292 |
  • 293 | 294 |
    295 | Polygon 296 |
    297 |
    .icon-Polygon 298 |
    299 |
  • 300 | 301 |
  • 302 | 303 |
    304 | 人机交互 305 |
    306 |
    .icon-renjijiaohu 307 |
    308 |
  • 309 | 310 |
  • 311 | 312 |
    313 | 雷达 314 |
    315 |
    .icon-Radar 316 |
    317 |
  • 318 | 319 |
  • 320 | 321 |
    322 | 交互日志 323 |
    324 |
    .icon-jiaohurizhi 325 |
    326 |
  • 327 | 328 |
  • 329 | 330 |
    331 | 轨迹回放 332 |
    333 |
    .icon-TrackPlayback 334 |
    335 |
  • 336 | 337 |
  • 338 | 339 |
    340 | 闪烁点image_9 341 |
    342 |
    .icon-TwinklePoint 343 |
    344 |
  • 345 | 346 |
  • 347 | 348 |
    349 | Popover 350 |
    351 |
    .icon-Popover 352 |
    353 |
  • 354 | 355 |
  • 356 | 357 |
    358 | 扇形 359 |
    360 |
    .icon-Sector 361 |
    362 |
  • 363 | 364 |
  • 365 | 366 |
    367 | overlay 368 |
    369 |
    .icon-Overlay 370 |
    371 |
  • 372 | 373 |
  • 374 | 375 |
    376 | 定位 377 |
    378 |
    .icon-SetCenter 379 |
    380 |
  • 381 | 382 |
  • 383 | 384 |
    385 | interaction 386 |
    387 |
    .icon-HoverAndClick 388 |
    389 |
  • 390 | 391 |
  • 392 | 393 |
    394 | 播放 395 |
    396 |
    .icon-TriangleCopyx 397 |
    398 |
  • 399 | 400 |
  • 401 | 402 |
    403 | 雷达 404 |
    405 |
    .icon-RadarAnimation 406 |
    407 |
  • 408 | 409 |
  • 410 | 411 |
    412 | 基础地图 413 |
    414 |
    .icon-BaseMap 415 |
    416 |
  • 417 | 418 |
  • 419 | 420 |
    421 | 标记 422 |
    423 |
    .icon-Marker 424 |
    425 |
  • 426 | 427 |
  • 428 | 429 |
    430 | 更多-面 431 |
    432 |
    .icon-MultiPolygon 433 |
    434 |
  • 435 | 436 |
  • 437 | 438 |
    439 | 轨迹 440 |
    441 |
    .icon-TrackLine 442 |
    443 |
  • 444 | 445 |
  • 446 | 447 |
    448 | interaction 449 |
    450 |
    .icon-Interaction 451 |
    452 |
  • 453 | 454 |
  • 455 | 456 |
    457 | 矢量图层 458 |
    459 |
    .icon-shiliangtuceng 460 |
    461 |
  • 462 | 463 |
  • 464 | 465 |
    466 | vectorLayer 467 |
    468 |
    .icon-VectorLayer 469 |
    470 |
  • 471 | 472 |
  • 473 | 474 |
    475 | animation-play 476 |
    477 |
    .icon-Animation 478 |
    479 |
  • 480 | 481 |
  • 482 | 483 |
    484 | lineString 485 |
    486 |
    .icon-LineString 487 |
    488 |
  • 489 | 490 |
  • 491 | 492 |
    493 | 更多 494 |
    495 |
    .icon-MultiLineString 496 |
    497 |
  • 498 | 499 |
  • 500 | 501 |
    502 | multi-point 503 |
    504 |
    .icon-MultiPoint 505 |
    506 |
  • 507 | 508 |
509 |
510 |

font-class 引用

511 |
512 | 513 |

font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。

514 |

与 Unicode 使用方式相比,具有如下特点:

515 |
    516 |
  • 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
  • 517 |
  • 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。
  • 518 |
519 |

使用步骤如下:

520 |

第一步:引入项目下面生成的 fontclass 代码:

521 |
<link rel="stylesheet" href="./iconfont.css">
522 | 
523 |

第二步:挑选相应图标并获取类名,应用于页面:

524 |
<span class="iconfont icon-xxx"></span>
525 | 
526 |
527 |

" 528 | iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。

529 |
530 |
531 |
532 |
533 |
    534 | 535 |
  • 536 | 539 |
    箭头
    540 |
    #icon-Arrow
    541 |
  • 542 | 543 |
  • 544 | 547 |
    point
    548 |
    #icon-Point
    549 |
  • 550 | 551 |
  • 552 | 555 |
    204首页
    556 |
    #icon-Home
    557 |
  • 558 | 559 |
  • 560 | 563 |
    Polygon
    564 |
    #icon-Polygon
    565 |
  • 566 | 567 |
  • 568 | 571 |
    人机交互
    572 |
    #icon-renjijiaohu
    573 |
  • 574 | 575 |
  • 576 | 579 |
    雷达
    580 |
    #icon-Radar
    581 |
  • 582 | 583 |
  • 584 | 587 |
    交互日志
    588 |
    #icon-jiaohurizhi
    589 |
  • 590 | 591 |
  • 592 | 595 |
    轨迹回放
    596 |
    #icon-TrackPlayback
    597 |
  • 598 | 599 |
  • 600 | 603 |
    闪烁点image_9
    604 |
    #icon-TwinklePoint
    605 |
  • 606 | 607 |
  • 608 | 611 |
    Popover
    612 |
    #icon-Popover
    613 |
  • 614 | 615 |
  • 616 | 619 |
    扇形
    620 |
    #icon-Sector
    621 |
  • 622 | 623 |
  • 624 | 627 |
    overlay
    628 |
    #icon-Overlay
    629 |
  • 630 | 631 |
  • 632 | 635 |
    定位
    636 |
    #icon-SetCenter
    637 |
  • 638 | 639 |
  • 640 | 643 |
    interaction
    644 |
    #icon-HoverAndClick
    645 |
  • 646 | 647 |
  • 648 | 651 |
    播放
    652 |
    #icon-TriangleCopyx
    653 |
  • 654 | 655 |
  • 656 | 659 |
    雷达
    660 |
    #icon-RadarAnimation
    661 |
  • 662 | 663 |
  • 664 | 667 |
    基础地图
    668 |
    #icon-BaseMap
    669 |
  • 670 | 671 |
  • 672 | 675 |
    标记
    676 |
    #icon-Marker
    677 |
  • 678 | 679 |
  • 680 | 683 |
    更多-面
    684 |
    #icon-MultiPolygon
    685 |
  • 686 | 687 |
  • 688 | 691 |
    轨迹
    692 |
    #icon-TrackLine
    693 |
  • 694 | 695 |
  • 696 | 699 |
    interaction
    700 |
    #icon-Interaction
    701 |
  • 702 | 703 |
  • 704 | 707 |
    矢量图层
    708 |
    #icon-shiliangtuceng
    709 |
  • 710 | 711 |
  • 712 | 715 |
    vectorLayer
    716 |
    #icon-VectorLayer
    717 |
  • 718 | 719 |
  • 720 | 723 |
    animation-play
    724 |
    #icon-Animation
    725 |
  • 726 | 727 |
  • 728 | 731 |
    lineString
    732 |
    #icon-LineString
    733 |
  • 734 | 735 |
  • 736 | 739 |
    更多
    740 |
    #icon-MultiLineString
    741 |
  • 742 | 743 |
  • 744 | 747 |
    multi-point
    748 |
    #icon-MultiPoint
    749 |
  • 750 | 751 |
752 |
753 |

Symbol 引用

754 |
755 | 756 |

这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 757 | 这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:

758 |
    759 |
  • 支持多色图标了,不再受单色限制。
  • 760 |
  • 通过一些技巧,支持像字体那样,通过 font-size, color 来调整样式。
  • 761 |
  • 兼容性较差,支持 IE9+,及现代浏览器。
  • 762 |
  • 浏览器渲染 SVG 的性能一般,还不如 png。
  • 763 |
764 |

使用步骤如下:

765 |

第一步:引入项目下面生成的 symbol 代码:

766 |
<script src="./iconfont.js"></script>
767 | 
768 |

第二步:加入通用 CSS 代码(引入一次就行):

769 |
<style>
770 | .icon {
771 |   width: 1em;
772 |   height: 1em;
773 |   vertical-align: -0.15em;
774 |   fill: currentColor;
775 |   overflow: hidden;
776 | }
777 | </style>
778 | 
779 |

第三步:挑选相应图标并获取类名,应用于页面:

780 |
<svg class="icon" aria-hidden="true">
781 |   <use xlink:href="#icon-xxx"></use>
782 | </svg>
783 | 
784 |
785 |
786 | 787 |
788 |
789 | 808 | 809 | 810 | -------------------------------------------------------------------------------- /src/assets/icon/iconfont.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "iconfont"; /* Project id 2932920 */ 3 | src: url('iconfont.woff2?t=1636685371780') format('woff2'), 4 | url('iconfont.woff?t=1636685371780') format('woff'), 5 | url('iconfont.ttf?t=1636685371780') format('truetype'); 6 | } 7 | 8 | .iconfont { 9 | font-family: "iconfont" !important; 10 | font-size: 16px; 11 | font-style: normal; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | } 15 | 16 | .icon-Arrow:before { 17 | content: "\e627"; 18 | } 19 | 20 | .icon-Point:before { 21 | content: "\e642"; 22 | } 23 | 24 | .icon-Home:before { 25 | content: "\e8b9"; 26 | } 27 | 28 | .icon-Polygon:before { 29 | content: "\e612"; 30 | } 31 | 32 | .icon-renjijiaohu:before { 33 | content: "\eb66"; 34 | } 35 | 36 | .icon-Radar:before { 37 | content: "\e62a"; 38 | } 39 | 40 | .icon-jiaohurizhi:before { 41 | content: "\e632"; 42 | } 43 | 44 | .icon-TrackPlayback:before { 45 | content: "\e699"; 46 | } 47 | 48 | .icon-TwinklePoint:before { 49 | content: "\e60a"; 50 | } 51 | 52 | .icon-Popover:before { 53 | content: "\e6b6"; 54 | } 55 | 56 | .icon-Sector:before { 57 | content: "\e61d"; 58 | } 59 | 60 | .icon-Overlay:before { 61 | content: "\e715"; 62 | } 63 | 64 | .icon-SetCenter:before { 65 | content: "\e60b"; 66 | } 67 | 68 | .icon-HoverAndClick:before { 69 | content: "\e600"; 70 | } 71 | 72 | .icon-TriangleCopyx:before { 73 | content: "\e629"; 74 | } 75 | 76 | .icon-RadarAnimation:before { 77 | content: "\e62f"; 78 | } 79 | 80 | .icon-BaseMap:before { 81 | content: "\e6e8"; 82 | } 83 | 84 | .icon-Marker:before { 85 | content: "\e653"; 86 | } 87 | 88 | .icon-MultiPolygon:before { 89 | content: "\ed0c"; 90 | } 91 | 92 | .icon-TrackLine:before { 93 | content: "\ea05"; 94 | } 95 | 96 | .icon-Interaction:before { 97 | content: "\e64e"; 98 | } 99 | 100 | .icon-shiliangtuceng:before { 101 | content: "\e6b7"; 102 | } 103 | 104 | .icon-VectorLayer:before { 105 | content: "\e630"; 106 | } 107 | 108 | .icon-Animation:before { 109 | content: "\e601"; 110 | } 111 | 112 | .icon-LineString:before { 113 | content: "\e602"; 114 | } 115 | 116 | .icon-MultiLineString:before { 117 | content: "\e677"; 118 | } 119 | 120 | .icon-MultiPoint:before { 121 | content: "\e60c"; 122 | } 123 | 124 | -------------------------------------------------------------------------------- /src/assets/icon/iconfont.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "2932920", 3 | "name": "Openlayers", 4 | "font_family": "iconfont", 5 | "css_prefix_text": "icon-", 6 | "description": "", 7 | "glyphs": [ 8 | { 9 | "icon_id": "755545", 10 | "name": "箭头", 11 | "font_class": "Arrow", 12 | "unicode": "e627", 13 | "unicode_decimal": 58919 14 | }, 15 | { 16 | "icon_id": "1080592", 17 | "name": "point", 18 | "font_class": "Point", 19 | "unicode": "e642", 20 | "unicode_decimal": 58946 21 | }, 22 | { 23 | "icon_id": "1727423", 24 | "name": "204首页", 25 | "font_class": "Home", 26 | "unicode": "e8b9", 27 | "unicode_decimal": 59577 28 | }, 29 | { 30 | "icon_id": "2746212", 31 | "name": "Polygon", 32 | "font_class": "Polygon", 33 | "unicode": "e612", 34 | "unicode_decimal": 58898 35 | }, 36 | { 37 | "icon_id": "3868275", 38 | "name": "人机交互", 39 | "font_class": "renjijiaohu", 40 | "unicode": "eb66", 41 | "unicode_decimal": 60262 42 | }, 43 | { 44 | "icon_id": "4372990", 45 | "name": "雷达", 46 | "font_class": "Radar", 47 | "unicode": "e62a", 48 | "unicode_decimal": 58922 49 | }, 50 | { 51 | "icon_id": "5536246", 52 | "name": "交互日志", 53 | "font_class": "jiaohurizhi", 54 | "unicode": "e632", 55 | "unicode_decimal": 58930 56 | }, 57 | { 58 | "icon_id": "6295816", 59 | "name": "轨迹回放", 60 | "font_class": "TrackPlayback", 61 | "unicode": "e699", 62 | "unicode_decimal": 59033 63 | }, 64 | { 65 | "icon_id": "9035342", 66 | "name": "闪烁点image_9", 67 | "font_class": "TwinklePoint", 68 | "unicode": "e60a", 69 | "unicode_decimal": 58890 70 | }, 71 | { 72 | "icon_id": "9203273", 73 | "name": "Popover", 74 | "font_class": "Popover", 75 | "unicode": "e6b6", 76 | "unicode_decimal": 59062 77 | }, 78 | { 79 | "icon_id": "9443060", 80 | "name": "扇形", 81 | "font_class": "Sector", 82 | "unicode": "e61d", 83 | "unicode_decimal": 58909 84 | }, 85 | { 86 | "icon_id": "10564335", 87 | "name": "overlay", 88 | "font_class": "Overlay", 89 | "unicode": "e715", 90 | "unicode_decimal": 59157 91 | }, 92 | { 93 | "icon_id": "10939449", 94 | "name": "定位", 95 | "font_class": "SetCenter", 96 | "unicode": "e60b", 97 | "unicode_decimal": 58891 98 | }, 99 | { 100 | "icon_id": "10997420", 101 | "name": "interaction", 102 | "font_class": "HoverAndClick", 103 | "unicode": "e600", 104 | "unicode_decimal": 58880 105 | }, 106 | { 107 | "icon_id": "11390278", 108 | "name": "播放", 109 | "font_class": "TriangleCopyx", 110 | "unicode": "e629", 111 | "unicode_decimal": 58921 112 | }, 113 | { 114 | "icon_id": "11748306", 115 | "name": "雷达", 116 | "font_class": "RadarAnimation", 117 | "unicode": "e62f", 118 | "unicode_decimal": 58927 119 | }, 120 | { 121 | "icon_id": "11942544", 122 | "name": "基础地图", 123 | "font_class": "BaseMap", 124 | "unicode": "e6e8", 125 | "unicode_decimal": 59112 126 | }, 127 | { 128 | "icon_id": "12323745", 129 | "name": "标记", 130 | "font_class": "Marker", 131 | "unicode": "e653", 132 | "unicode_decimal": 58963 133 | }, 134 | { 135 | "icon_id": "14827011", 136 | "name": "更多-面", 137 | "font_class": "MultiPolygon", 138 | "unicode": "ed0c", 139 | "unicode_decimal": 60684 140 | }, 141 | { 142 | "icon_id": "18171086", 143 | "name": "轨迹", 144 | "font_class": "TrackLine", 145 | "unicode": "ea05", 146 | "unicode_decimal": 59909 147 | }, 148 | { 149 | "icon_id": "19100280", 150 | "name": "interaction", 151 | "font_class": "Interaction", 152 | "unicode": "e64e", 153 | "unicode_decimal": 58958 154 | }, 155 | { 156 | "icon_id": "19828163", 157 | "name": "矢量图层", 158 | "font_class": "shiliangtuceng", 159 | "unicode": "e6b7", 160 | "unicode_decimal": 59063 161 | }, 162 | { 163 | "icon_id": "19908871", 164 | "name": "vectorLayer", 165 | "font_class": "VectorLayer", 166 | "unicode": "e630", 167 | "unicode_decimal": 58928 168 | }, 169 | { 170 | "icon_id": "20354423", 171 | "name": "animation-play", 172 | "font_class": "Animation", 173 | "unicode": "e601", 174 | "unicode_decimal": 58881 175 | }, 176 | { 177 | "icon_id": "20656014", 178 | "name": "lineString", 179 | "font_class": "LineString", 180 | "unicode": "e602", 181 | "unicode_decimal": 58882 182 | }, 183 | { 184 | "icon_id": "22928466", 185 | "name": "更多", 186 | "font_class": "MultiLineString", 187 | "unicode": "e677", 188 | "unicode_decimal": 58999 189 | }, 190 | { 191 | "icon_id": "23095357", 192 | "name": "multi-point", 193 | "font_class": "MultiPoint", 194 | "unicode": "e60c", 195 | "unicode_decimal": 58892 196 | } 197 | ] 198 | } 199 | -------------------------------------------------------------------------------- /src/assets/icon/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wjr-dev/Openlayers6-Example/002b0d28e665eaf72ec0db2487d44e566c7ca573/src/assets/icon/iconfont.ttf -------------------------------------------------------------------------------- /src/assets/icon/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wjr-dev/Openlayers6-Example/002b0d28e665eaf72ec0db2487d44e566c7ca573/src/assets/icon/iconfont.woff -------------------------------------------------------------------------------- /src/assets/icon/iconfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wjr-dev/Openlayers6-Example/002b0d28e665eaf72ec0db2487d44e566c7ca573/src/assets/icon/iconfont.woff2 -------------------------------------------------------------------------------- /src/assets/imgs/resource/boat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wjr-dev/Openlayers6-Example/002b0d28e665eaf72ec0db2487d44e566c7ca573/src/assets/imgs/resource/boat.png -------------------------------------------------------------------------------- /src/assets/imgs/resource/res_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wjr-dev/Openlayers6-Example/002b0d28e665eaf72ec0db2487d44e566c7ca573/src/assets/imgs/resource/res_bg.png -------------------------------------------------------------------------------- /src/assets/imgs/resource/res_hover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wjr-dev/Openlayers6-Example/002b0d28e665eaf72ec0db2487d44e566c7ca573/src/assets/imgs/resource/res_hover.png -------------------------------------------------------------------------------- /src/components/CesiumExample/No01-init.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 21 | 31 | -------------------------------------------------------------------------------- /src/components/MyFont.js: -------------------------------------------------------------------------------- 1 | import { Icon } from "ant-design-vue"; 2 | 3 | export default Icon.createFromIconfontCN({ 4 | // 最终需要换成本地地址 5 | // scriptUrl: "/icon/iconfont.js", 6 | scriptUrl: "//at.alicdn.com/t/font_2932920_k2awbn0w5b.js", 7 | }); -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import router from '@/router' 4 | import VueRouter from 'vue-router' 5 | import Antd from 'ant-design-vue'; 6 | import 'ant-design-vue/dist/antd.css'; 7 | import 'cesium/Widgets/widgets.css' 8 | import '@/assets/icon/iconfont.css' 9 | 10 | Vue.config.productionTip = false 11 | Vue.use(VueRouter) 12 | Vue.use(Antd); 13 | 14 | // eslint-disable-next-line no-undef 15 | Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmMDE4MjM1Zi1lZWZkLTQyNTktOWZhZS0xYjlhZTZkNTFkNmUiLCJpZCI6NzMwNDAsImlhdCI6MTYzNjU0MjMxMX0.ouBR3MBCYGhFrq4IaHGNGlBWrOrDUH-ddz6ef2yI92k' 16 | 17 | new Vue({ 18 | router, 19 | render: h => h(App), 20 | }).$mount('#app') 21 | -------------------------------------------------------------------------------- /src/mixins/resizeMixin.js: -------------------------------------------------------------------------------- 1 | export default { 2 | data() { 3 | return { 4 | resizeObserver: null, 5 | } 6 | }, 7 | mounted() { 8 | if (this.$refs.map) { 9 | this.resizeObserver = new ResizeObserver(() => { 10 | this.map.updateSize(); 11 | }); 12 | this.resizeObserver.observe(this.$refs.map); 13 | } 14 | }, 15 | beforeDestroy() { 16 | if (this.resizeObserver) { 17 | this.resizeObserver.unobserve(this.$refs.map); 18 | this.resizeObserver = null; 19 | } 20 | }, 21 | } -------------------------------------------------------------------------------- /src/pages/Animation/DefenceAlarm.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 169 | 170 | -------------------------------------------------------------------------------- /src/pages/Animation/RadarAnimation.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 192 | 193 | -------------------------------------------------------------------------------- /src/pages/Animation/ResPointAlarm.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 168 | 169 | -------------------------------------------------------------------------------- /src/pages/Animation/TrackLine.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 252 | 253 | -------------------------------------------------------------------------------- /src/pages/Animation/TrackPlayback.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 196 | 197 | -------------------------------------------------------------------------------- /src/pages/Animation/TwinklePoint.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 126 | 127 | -------------------------------------------------------------------------------- /src/pages/Animation/index.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | 9 | -------------------------------------------------------------------------------- /src/pages/BaseMap.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 41 | 42 | -------------------------------------------------------------------------------- /src/pages/Cesium.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 57 | 58 | -------------------------------------------------------------------------------- /src/pages/Home.vue: -------------------------------------------------------------------------------- 1 | 34 | 35 | 40 | 41 | -------------------------------------------------------------------------------- /src/pages/Interaction/AddMarker.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 76 | 90 | -------------------------------------------------------------------------------- /src/pages/Interaction/DrawBoxOverlay.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 95 | 96 | -------------------------------------------------------------------------------- /src/pages/Interaction/HoverAndClick.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 154 | 155 | -------------------------------------------------------------------------------- /src/pages/Interaction/MeasureArea.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 210 | -------------------------------------------------------------------------------- /src/pages/Interaction/MeasureDistance.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 286 | -------------------------------------------------------------------------------- /src/pages/Interaction/Popover.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 95 | 96 | -------------------------------------------------------------------------------- /src/pages/Interaction/SetCenter.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 74 | 75 | -------------------------------------------------------------------------------- /src/pages/Interaction/ShowTrackInfo.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 315 | 316 | -------------------------------------------------------------------------------- /src/pages/Interaction/SwitchTileLayer.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 78 | 79 | -------------------------------------------------------------------------------- /src/pages/Interaction/VectorLayerVisible.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 82 | 83 | -------------------------------------------------------------------------------- /src/pages/Interaction/index.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | 9 | -------------------------------------------------------------------------------- /src/pages/Overlay/Marker.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 60 | 72 | -------------------------------------------------------------------------------- /src/pages/Overlay/index.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | 9 | -------------------------------------------------------------------------------- /src/pages/VectorLayer/Arrow.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 113 | 114 | -------------------------------------------------------------------------------- /src/pages/VectorLayer/LineString.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 76 | 77 | -------------------------------------------------------------------------------- /src/pages/VectorLayer/MultiLineString.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 81 | 82 | -------------------------------------------------------------------------------- /src/pages/VectorLayer/MultiPoint.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 74 | 75 | -------------------------------------------------------------------------------- /src/pages/VectorLayer/MultiPolygon.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 94 | 95 | -------------------------------------------------------------------------------- /src/pages/VectorLayer/Point.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 74 | 75 | -------------------------------------------------------------------------------- /src/pages/VectorLayer/Polygon.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 84 | 85 | -------------------------------------------------------------------------------- /src/pages/VectorLayer/Radar.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 150 | 151 | -------------------------------------------------------------------------------- /src/pages/VectorLayer/Sector.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 107 | 108 | -------------------------------------------------------------------------------- /src/pages/VectorLayer/index.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | 9 | -------------------------------------------------------------------------------- /src/pages/WebGL/IconPoints.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 128 | 129 | -------------------------------------------------------------------------------- /src/pages/WebGL/index.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | 9 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import VueRouter from 'vue-router' 2 | import Home from '@/pages/Home.vue' 3 | 4 | const router = new VueRouter({ 5 | routes: [{ 6 | path: '/', 7 | name: 'Home', 8 | component: Home, 9 | meta: { 10 | label: '首页', 11 | root: null, 12 | current: 'Home' 13 | } 14 | }, { 15 | path: '/baseMap', 16 | name: 'BaseMap', 17 | component: () => import('@/pages/BaseMap.vue'), 18 | meta: { 19 | label: '基础地图', 20 | root: null, 21 | current: 'BaseMap' 22 | } 23 | }, { 24 | path: '/overlay/', 25 | name: 'Overlay', 26 | component: () => import('@/pages/Overlay/index.vue'), 27 | meta: { 28 | label: 'Overlay 叠加层', 29 | root: null, 30 | current: 'Overlay' 31 | }, 32 | children: [{ 33 | path: 'marker', 34 | name: 'Marker', 35 | component: () => import('@/pages/Overlay/Marker.vue'), 36 | meta: { 37 | label: '标记点', 38 | root: 'Overlay', 39 | current: 'Marker' 40 | } 41 | }] 42 | }, { 43 | path: '/vectorLayer/', 44 | name: 'VectorLayer', 45 | component: () => import('@/pages/VectorLayer/index.vue'), 46 | meta: { 47 | label: 'VectorLayer 矢量图层', 48 | root: null, 49 | current: 'VectorLayer' 50 | }, 51 | children: [{ 52 | path: 'point', 53 | name: 'Point', 54 | component: () => import('@/pages/VectorLayer/Point.vue'), 55 | meta: { 56 | label: 'Point 点', 57 | root: 'VectorLayer', 58 | current: 'Point' 59 | } 60 | }, { 61 | path: 'lineString', 62 | name: 'LineString', 63 | component: () => import('@/pages/VectorLayer/LineString.vue'), 64 | meta: { 65 | label: 'LineString 线', 66 | root: 'VectorLayer', 67 | current: 'LineString' 68 | } 69 | }, { 70 | path: 'polygon', 71 | name: 'Polygon', 72 | component: () => import('@/pages/VectorLayer/Polygon.vue'), 73 | meta: { 74 | label: 'Polygon 多边形(面)', 75 | root: 'VectorLayer', 76 | current: 'Polygon' 77 | } 78 | }, { 79 | path: 'multiPoint', 80 | name: 'MultiPoint', 81 | component: () => import('@/pages/VectorLayer/MultiPoint.vue'), 82 | meta: { 83 | label: 'MultiPoint 多点', 84 | root: 'VectorLayer', 85 | current: 'MultiPoint' 86 | } 87 | }, { 88 | path: 'multiLineString', 89 | name: 'MultiLineString', 90 | component: () => import('@/pages/VectorLayer/MultiLineString.vue'), 91 | meta: { 92 | label: 'MultiLineString 多线', 93 | root: 'VectorLayer', 94 | current: 'MultiLineString' 95 | } 96 | }, { 97 | path: 'multiPolygon', 98 | name: 'MultiPolygon', 99 | component: () => import('@/pages/VectorLayer/MultiPolygon.vue'), 100 | meta: { 101 | label: 'MultiPolygon 多面', 102 | root: 'VectorLayer', 103 | current: 'MultiPolygon' 104 | } 105 | }, { 106 | path: 'arrow', 107 | name: 'Arrow', 108 | component: () => import('@/pages/VectorLayer/Arrow.vue'), 109 | meta: { 110 | label: '箭头', 111 | root: 'VectorLayer', 112 | current: 'Arrow' 113 | } 114 | }, { 115 | path: 'sector', 116 | name: 'Sector', 117 | component: () => import('@/pages/VectorLayer/Sector.vue'), 118 | meta: { 119 | label: '扇形', 120 | root: 'VectorLayer', 121 | current: 'Sector' 122 | } 123 | }, { 124 | path: 'radar', 125 | name: 'Radar', 126 | component: () => import('@/pages/VectorLayer/Radar.vue'), 127 | meta: { 128 | label: '雷达', 129 | root: 'VectorLayer', 130 | current: 'Radar' 131 | } 132 | },] 133 | }, 134 | { 135 | path: '/animation/', 136 | name: 'Animation', 137 | component: () => import('@/pages/Animation/index.vue'), 138 | meta: { 139 | label: 'Animation 动画' 140 | }, 141 | children: [{ 142 | path: 'twinklePoint', 143 | name: 'TwinklePoint', 144 | component: () => import('@/pages/Animation/TwinklePoint.vue'), 145 | meta: { 146 | label: '闪烁点', 147 | root: 'Animation', 148 | current: 'TwinklePoint' 149 | } 150 | }, { 151 | path: 'trackLine', 152 | name: 'TrackLine', 153 | component: () => import('@/pages/Animation/TrackLine.vue'), 154 | meta: { 155 | label: '轨迹线', 156 | root: 'Animation', 157 | current: 'TrackLine' 158 | } 159 | }, { 160 | path: 'trackPlayback', 161 | name: 'TrackPlayback', 162 | component: () => import('@/pages/Animation/TrackPlayback.vue'), 163 | meta: { 164 | label: '轨迹回放', 165 | root: 'Animation', 166 | current: 'TrackPlayback' 167 | } 168 | }, { 169 | path: 'radarAnimation', 170 | name: 'RadarAnimation', 171 | component: () => import('@/pages/Animation/RadarAnimation.vue'), 172 | meta: { 173 | label: '雷达波', 174 | root: 'Animation', 175 | current: 'RadarAnimation' 176 | } 177 | }, { 178 | path: 'resPointAlarm', 179 | name: 'ResPointAlarm', 180 | component: () => import('@/pages/Animation/ResPointAlarm.vue'), 181 | meta: { 182 | label: '资源点报警', 183 | root: 'Animation', 184 | current: 'ResPointAlarm' 185 | } 186 | },{ 187 | path: 'defenceAlarm', 188 | name: 'DefenceAlarm', 189 | component: () => import('@/pages/Animation/DefenceAlarm.vue'), 190 | meta: { 191 | label: '防区报警', 192 | root: 'Animation', 193 | current: 'DefenceAlarm' 194 | } 195 | },] 196 | }, 197 | { 198 | path: '/interaction/', 199 | name: 'Interaction', 200 | component: () => import('@/pages/Interaction/index.vue'), 201 | meta: { 202 | label: 'Interaction 交互' 203 | }, 204 | children: [{ 205 | path: 'popover', 206 | name: 'Popover', 207 | component: () => import('@/pages/Interaction/Popover.vue'), 208 | meta: { 209 | label: 'Popover 点击弹窗', 210 | root: 'Interaction', 211 | current: 'Popover' 212 | } 213 | }, { 214 | path: 'setCenter', 215 | name: 'SetCenter', 216 | component: () => import('@/pages/Interaction/SetCenter.vue'), 217 | meta: { 218 | label: 'SetCenter 设置中心', 219 | root: 'Interaction', 220 | current: 'SetCenter' 221 | } 222 | }, { 223 | path: 'hoverAndClick', 224 | name: 'HoverAndClick', 225 | component: () => import('@/pages/Interaction/HoverAndClick.vue'), 226 | meta: { 227 | label: '矢量图层 Hover和Click', 228 | root: 'Interaction', 229 | current: 'HoverAndClick' 230 | } 231 | }, { 232 | path: 'switchTileLayer', 233 | name: 'SwitchTileLayer', 234 | component: () => import('@/pages/Interaction/SwitchTileLayer.vue'), 235 | meta: { 236 | label: '切换瓦片图层', 237 | root: 'Interaction', 238 | current: 'SwitchTileLayer' 239 | } 240 | }, { 241 | path: 'showTrackInfo', 242 | name: 'ShowTrackInfo', 243 | component: () => import('@/pages/Interaction/ShowTrackInfo.vue'), 244 | meta: { 245 | label: '点击轨迹显示信息', 246 | root: 'Interaction', 247 | current: 'ShowTrackInfo' 248 | } 249 | }, { 250 | path: 'vectorLayerVisible', 251 | name: 'VectorLayerVisible', 252 | component: () => import('@/pages/Interaction/VectorLayerVisible.vue'), 253 | meta: { 254 | label: '矢量图层显示隐藏', 255 | root: 'Interaction', 256 | current: 'VectorLayerVisible' 257 | } 258 | }, { 259 | path: 'addMarker', 260 | name: 'AddMarker', 261 | component: () => import('@/pages/Interaction/AddMarker.vue'), 262 | meta: { 263 | label: '添加标记点', 264 | root: 'Interaction', 265 | current: 'AddMarker' 266 | } 267 | }, { 268 | path: 'measureDistance', 269 | name: 'MeasureDistance', 270 | component: () => import('@/pages/Interaction/MeasureDistance.vue'), 271 | meta: { 272 | label: '测距', 273 | root: 'Interaction', 274 | current: 'MeasureDistance' 275 | } 276 | }, { 277 | path: 'measureArea', 278 | name: 'MeasureArea', 279 | component: () => import('@/pages/Interaction/MeasureArea.vue'), 280 | meta: { 281 | label: '测面', 282 | root: 'Interaction', 283 | current: 'MeasureArea' 284 | } 285 | }, { 286 | path: 'drawBoxOverlay', 287 | name: 'DrawBoxOverlay', 288 | component: () => import('@/pages/Interaction/DrawBoxOverlay.vue'), 289 | meta: { 290 | label: '框选 Overlay', 291 | root: 'Interaction', 292 | current: 'DrawBoxOverlay' 293 | } 294 | },] 295 | }, { 296 | path: '/webGL/', 297 | name: 'WebGL', 298 | component: () => import('@/pages/WebGL/index.vue'), 299 | meta: { 300 | label: 'WebGL', 301 | root: null, 302 | current: 'WebGL' 303 | }, 304 | children: [{ 305 | path: 'iconPoints', 306 | name: 'IconPoints', 307 | component: () => import('@/pages/WebGL/IconPoints.vue'), 308 | meta: { 309 | label: '海量图标', 310 | root: 'WebGL', 311 | current: 'IconPoints' 312 | } 313 | }] 314 | }, 315 | 316 | ] 317 | }) 318 | 319 | export default router 320 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports={ 2 | publicPath: './' 3 | } --------------------------------------------------------------------------------