├── vue.config.js
├── public
    ├── favicon.ico
    └── index.html
├── babel.config.js
├── src
    ├── assets
    │   ├── icon
    │   │   ├── iconfont.ttf
    │   │   ├── iconfont.woff
    │   │   ├── iconfont.woff2
    │   │   ├── iconfont.css
    │   │   ├── iconfont.json
    │   │   ├── demo.css
    │   │   └── demo_index.html
    │   └── imgs
    │   │   └── resource
    │   │       ├── boat.png
    │   │       ├── res_bg.png
    │   │       └── res_hover.png
    ├── pages
    │   ├── Overlay
    │   │   ├── index.vue
    │   │   └── Marker.vue
    │   ├── WebGL
    │   │   ├── index.vue
    │   │   └── IconPoints.vue
    │   ├── Animation
    │   │   ├── index.vue
    │   │   ├── TwinklePoint.vue
    │   │   ├── DefenceAlarm.vue
    │   │   ├── RadarAnimation.vue
    │   │   ├── ResPointAlarm.vue
    │   │   ├── TrackPlayback.vue
    │   │   └── TrackLine.vue
    │   ├── Interaction
    │   │   ├── index.vue
    │   │   ├── AddMarker.vue
    │   │   ├── SetCenter.vue
    │   │   ├── SwitchTileLayer.vue
    │   │   ├── VectorLayerVisible.vue
    │   │   ├── DrawBoxOverlay.vue
    │   │   ├── Popover.vue
    │   │   ├── HoverAndClick.vue
    │   │   ├── MeasureArea.vue
    │   │   ├── MeasureDistance.vue
    │   │   └── ShowTrackInfo.vue
    │   ├── VectorLayer
    │   │   ├── index.vue
    │   │   ├── Point.vue
    │   │   ├── MultiPoint.vue
    │   │   ├── LineString.vue
    │   │   ├── Polygon.vue
    │   │   ├── MultiLineString.vue
    │   │   ├── MultiPolygon.vue
    │   │   ├── Sector.vue
    │   │   ├── Arrow.vue
    │   │   └── Radar.vue
    │   ├── BaseMap.vue
    │   ├── Home.vue
    │   └── Cesium.vue
    ├── components
    │   ├── MyFont.js
    │   └── CesiumExample
    │   │   └── No01-init.vue
    ├── mixins
    │   └── resizeMixin.js
    ├── main.js
    ├── App.vue
    └── router
    │   └── index.js
├── .prettierrc.js
├── .gitignore
├── README.md
├── .github
    └── workflows
    │   └── deploy.yml
├── .eslintrc.js
├── .vscode
    └── settings.json
├── package.json
└── LICENSE


/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports={
2 |   publicPath: './'
3 | }


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wjr-dev/Openlayers6-Example/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/src/assets/icon/iconfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wjr-dev/Openlayers6-Example/HEAD/src/assets/icon/iconfont.ttf


--------------------------------------------------------------------------------
/src/assets/icon/iconfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wjr-dev/Openlayers6-Example/HEAD/src/assets/icon/iconfont.woff


--------------------------------------------------------------------------------
/src/assets/icon/iconfont.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wjr-dev/Openlayers6-Example/HEAD/src/assets/icon/iconfont.woff2


--------------------------------------------------------------------------------
/src/assets/imgs/resource/boat.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wjr-dev/Openlayers6-Example/HEAD/src/assets/imgs/resource/boat.png


--------------------------------------------------------------------------------
/src/assets/imgs/resource/res_bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wjr-dev/Openlayers6-Example/HEAD/src/assets/imgs/resource/res_bg.png


--------------------------------------------------------------------------------
/src/assets/imgs/resource/res_hover.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wjr-dev/Openlayers6-Example/HEAD/src/assets/imgs/resource/res_hover.png


--------------------------------------------------------------------------------
/src/pages/Overlay/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <router-view></router-view>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {};
 7 | </script>
 8 | 
 9 | <style>
10 | </style>


--------------------------------------------------------------------------------
/src/pages/WebGL/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <router-view></router-view>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {};
 7 | </script>
 8 | 
 9 | <style>
10 | </style>


--------------------------------------------------------------------------------
/src/pages/Animation/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <router-view></router-view>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {};
 7 | </script>
 8 | 
 9 | <style>
10 | </style>


--------------------------------------------------------------------------------
/src/pages/Interaction/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <router-view></router-view>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {};
 7 | </script>
 8 | 
 9 | <style>
10 | </style>


--------------------------------------------------------------------------------
/src/pages/VectorLayer/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <router-view></router-view>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {};
 7 | </script>
 8 | 
 9 | <style>
10 | </style>


--------------------------------------------------------------------------------
/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 | });


--------------------------------------------------------------------------------
/.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 | };


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | }


--------------------------------------------------------------------------------
/.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


--------------------------------------------------------------------------------
/.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 | };


--------------------------------------------------------------------------------
/.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 | }


--------------------------------------------------------------------------------
/src/components/CesiumExample/No01-init.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="map-box">
 3 |     <div id="cesiumContainer"></div>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script> 
 8 | export default {
 9 |   name: "", 
10 |   mounted() {
11 |     // var viewer = new Cesium.CesiumWidget('cesiumContainer')
12 | 
13 |     // eslint-disable-next-line no-undef
14 |     var viewer = new Cesium.Viewer("cesiumContainer");
15 |     
16 |     // eslint-disable-next-line no-console
17 |     console.log(viewer)
18 |   }
19 | };
20 | </script> 
21 | <style scoped>
22 |   .map-box{
23 |     width: 100%;
24 |     height: 100%;
25 |   }
26 |   #cesiumContainer{
27 |     width: 100%;
28 |     height: 100%;
29 |   }
30 | </style>
31 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <!--TODO 这里的地址时 iconfont 的在线地址，后面要换成本地的 -->
 9 |     <link rel="stylesheet" href="//at.alicdn.com/t/font_2932920_4gnsehv3nw4.css">
10 |     <title><%= htmlWebpackPlugin.options.title %></title>
11 |   </head>
12 |   <body>
13 |     <noscript>
14 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
15 |     </noscript>
16 |     <div id="app"></div>
17 |     <!-- built files will be auto injected -->
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/src/pages/BaseMap.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="map" ref="map" class="map-container"></div>
 3 | </template>
 4 | 
 5 | <script>
 6 | import resizeMixin from "@/mixins/resizeMixin"; // 监听地图容器大小变化,调用 map.updateSize() 方法使地图撑满容器
 7 | import "ol/ol.css";
 8 | import Map from "ol/Map";
 9 | import OSM from "ol/source/OSM";
10 | import TileLayer from "ol/layer/Tile";
11 | import View from "ol/View";
12 | export default {
13 |   name: "BaseMap", // 基础地图
14 |   mixins: [resizeMixin],
15 |   data() {
16 |     return {
17 |       map: null,
18 |     };
19 |   },
20 |   mounted() {
21 |     this.initMap();
22 |   },
23 |   methods: {
24 |     initMap() {
25 |       this.map = new Map({
26 |         target: "map",
27 |         layers: [
28 |           new TileLayer({
29 |             source: new OSM(),
30 |           }),
31 |         ],
32 |         view: new View({
33 |           center: [13384755.517469, 3529894.878215],
34 |           zoom: 15,
35 |         }),
36 |       });
37 |     },
38 |   },
39 | };
40 | </script>
41 | 
42 | <style>
43 | </style>


--------------------------------------------------------------------------------
/src/pages/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h2>Openlayers 基础示例</h2>
 4 |     <p>主要技术：Openlayers6 + Vue2 + AntdV</p>
 5 |     <p>内容：Openlayers6 部分基础示例</p>
 6 |     <p>
 7 |       挑选项目中的典型示例做成 Example，方便参考，目前只有部分示例，后期会逐渐增加
 8 |     </p>
 9 |     <p>若有比较通用的示例可以提 Issues 或 PR</p>
10 |     <br />
11 |     <br />
12 |     <h4>Overlay</h4>
13 |     <p>
14 |       Overlay
15 |       叠加图层：主要是放置一些和地图位置相关的元素，如：infowindow、点标记、图片等，而这些覆盖物都是和html中的element等价的，通过overlay的属性element和html元素绑定同时设定坐标参数——达到将html元素放到地图上的位置，在平移缩放的时候html元素也会随着地图的移动而移动。
16 |     </p>
17 |     <br />
18 |     <h4>VectorLayer</h4>
19 |     <p>
20 |       VectorLayer矢量图层： 矢量图层是在客户端渲染的，在 web
21 |       环境中，对应的就是浏览器。构成一个矢量图层的包含一个数据（source）和一个样式（style），数据构成矢量图层的要素，样式规定要素显示的方式和外观。一个初始化成功的矢量图层包含一个到多个要素（feature），每个要素由地理属（geometry）和多个其他的属性，可能包含名称等。
22 |     </p>
23 |     <br />
24 |     <h3>TODO</h3>
25 |     <h4><b>=== 交互 ===</b></h4>
26 |     <p class="delete">框选 Overlay</p>
27 |     <p>框选 Feature</p>
28 |     <h4><b>=== 动画 ===</b></h4>
29 |     <p class="delete">设备报警</p>
30 |     <p class="delete">防区报警</p>
31 |     <p>光纤报警</p>
32 |   </div>
33 | </template>
34 | 
35 | <script>
36 | export default {
37 |   name: "Home",
38 | };
39 | </script>
40 | 
41 | <style lang="scss" scoped>
42 | .delete{
43 |   text-decoration: line-through;
44 | }
45 | p{
46 |   text-indent: 2rem;
47 | }
48 | </style>


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/src/pages/Overlay/Marker.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div class="map-box">
 3 |   <div id="map" ref="map" class="map-container"></div>
 4 |   <div id="marker" @click="handleClick"></div>
 5 | </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | import resizeMixin from "@/mixins/resizeMixin";
10 | import "ol/ol.css";
11 | import Map from "ol/Map";
12 | import OSM from "ol/source/OSM";
13 | import TileLayer from "ol/layer/Tile";
14 | import View from "ol/View";
15 | import Overlay from "ol/Overlay"
16 | import { fromLonLat } from "ol/proj";
17 | export default {
18 |   name: "Marker",
19 |   mixins: [resizeMixin],
20 |   data() {
21 |     return {
22 |       map: null
23 |     };
24 |   },
25 |   mounted() {
26 |     this.initMap();
27 |     this.addMarker()
28 |   },
29 |   methods: {
30 |     initMap() {
31 |       this.map = new Map({
32 |         target: "map",
33 |         layers: [
34 |           new TileLayer({
35 |             source: new OSM(),
36 |           }),
37 |         ],
38 |         view: new View({
39 |           center: [0, 0],
40 |           zoom: 2,
41 |         }),
42 |       });
43 |     },
44 |     addMarker(){
45 |       const pos = fromLonLat([16.3725, 48.208889])
46 |       const marker = new Overlay({
47 |         element: document.getElementById('marker'),
48 |         position: pos,
49 |         positioning: 'center-center',
50 |         stopEvent: false
51 |       })
52 |       this.map.addOverlay(marker)
53 |     },
54 |     handleClick(){
55 |       alert('Overlay 被点击了')
56 |     }
57 |   },
58 | };
59 | </script>
60 | <style lang="scss" scoped>
61 | #marker{
62 |   width: 20px;
63 |   height: 20px;
64 |   line-height: 20px;
65 |   text-align: center;
66 |   border-radius: 50%;
67 |   background-color: red;
68 |   opacity: 0.5;
69 |   cursor: pointer;
70 | }
71 | </style>
72 | 


--------------------------------------------------------------------------------
/src/pages/Cesium.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="map" class="map-container"></div>
 3 | </template>
 4 | 
 5 | <script>
 6 | // import 'ol/ol.css';
 7 | // import Map from "ol/Map";
 8 | // import OSM from "ol/source/OSM";
 9 | // import TileLayer from "ol/layer/Tile";
10 | // import View from "ol/View";
11 | export default {
12 |   name: "Cesium", // 基础地图
13 |   data() {
14 |     return {
15 |       map: null,
16 |     };
17 |   },
18 |   mounted() {
19 |     this.initMap();
20 |   },
21 |   methods: {
22 |     initMap() {
23 |       // eslint-disable-next-line no-undef
24 |       this.map = new Cesium.Viewer("map", {
25 |         scene3DOnly: true,
26 |         selectionIndicator: false,
27 |         baseLayerPicker: false,
28 |       });
29 |       // Remove default base layer
30 |       // eslint-disable-next-line no-undef
31 |       this.map.imageryLayers.remove(this.map.imageryLayers.get(0));
32 | 
33 |       // Add Sentinel-2 imagery
34 |       this.map.imageryLayers.addImageryProvider(
35 |         // eslint-disable-next-line no-undef
36 |         new Cesium.IonImageryProvider({ assetId: 3954 })
37 |       );
38 |       this.map.imageryLayers.addImageryProvider(
39 |         // eslint-disable-next-line no-undef
40 |         new Cesium.ArcGisMapServerImageryProvider({
41 |           url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
42 |         })
43 |       );
44 |       // Load Cesium World Terrain
45 |       // eslint-disable-next-line no-undef
46 |       this.map.terrainProvider = Cesium.createWorldTerrain({
47 |         requestWaterMask: true, // required for water effects
48 |         requestVertexNormals: true, // required for terrain lighting
49 |       });
50 | 
51 |       // Enable depth testing so things behind the terrain disappear.
52 |       this.map.scene.globe.depthTestAgainstTerrain = true;
53 |     },
54 |   },
55 | };
56 | </script>
57 | 
58 | <style>
59 | </style>


--------------------------------------------------------------------------------
/src/pages/VectorLayer/Point.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="map" ref="map" class="map-container"></div>
 3 | </template>
 4 | 
 5 | <script>
 6 | import resizeMixin from "@/mixins/resizeMixin";
 7 | import "ol/ol.css";
 8 | import Map from "ol/Map";
 9 | import OSM from "ol/source/OSM";
10 | import TileLayer from "ol/layer/Tile";
11 | import View from "ol/View";
12 | import Feature from "ol/Feature";
13 | import { Point } from "ol/geom";
14 | import { Fill, Stroke, Style,Circle } from "ol/style";
15 | import VectorLayer from "ol/layer/Vector";
16 | import VectorSource from "ol/source/Vector";
17 | export default {
18 |   name: "Point", // 点
19 |   mixins: [resizeMixin],
20 |   data() {
21 |     return {
22 |       map: null,
23 |       point: [13384755.517469, 3529894.878215],
24 |     };
25 |   },
26 |   mounted() {
27 |     this.initMap();
28 |   },
29 |   methods: {
30 |     initMap() {
31 |       this.map = new Map({
32 |         target: "map",
33 |         layers: [
34 |           new TileLayer({
35 |             source: new OSM(),
36 |           }),
37 |         ],
38 |         view: new View({
39 |           center: [13384755.517469, 3529894.878215],
40 |           zoom: 15,
41 |         }),
42 |       });
43 | 
44 |       const pointLayer = this.getPoint();
45 |       this.map.addLayer(pointLayer);
46 |     },
47 |     getPoint() {
48 |       const pointFeature = new Feature({
49 |         geometry: new Point(this.point),
50 |         style: new Style({
51 |           image: new Circle({
52 |             radius: 10,
53 |             fill: new Fill({
54 |               color: "red",
55 |             }),
56 |             stroke: new Stroke({
57 |               color: "blue",
58 |               width: 5,
59 |             }),
60 |           }),
61 |         }),
62 |       });
63 | 
64 |       return new VectorLayer({
65 |         style: function (feature) {
66 |           return feature.get("style");
67 |         },
68 |         source: new VectorSource({ features: [pointFeature] }),
69 |       });
70 |     },
71 |   },
72 | };
73 | </script>
74 | 
75 | <style>
76 | </style>


--------------------------------------------------------------------------------
/src/pages/VectorLayer/MultiPoint.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="map" ref="map" class="map-container"></div>
 3 | </template>
 4 | 
 5 | <script>
 6 | import resizeMixin from "@/mixins/resizeMixin";
 7 | import "ol/ol.css";
 8 | import Map from "ol/Map";
 9 | import OSM from "ol/source/OSM";
10 | import TileLayer from "ol/layer/Tile";
11 | import View from "ol/View";
12 | import Feature from "ol/Feature";
13 | import { MultiPoint } from "ol/geom";
14 | import { Fill, Style, Circle } from "ol/style";
15 | import VectorLayer from "ol/layer/Vector";
16 | import VectorSource from "ol/source/Vector";
17 | export default {
18 |   name: "MultiPoint", // 多点
19 |   mixins: [resizeMixin],
20 |   data() {
21 |     return {
22 |       map: null,
23 |       points: [
24 |         [13382758.600105051, 3529634.5145874037],
25 |         [13383231.554217564, 3529644.0692159394],
26 |         [13383393.98290267, 3529648.846530207],
27 |         [13383475.197245223, 3529687.06504435],
28 |       ],
29 |     };
30 |   },
31 |   mounted() {
32 |     this.initMap();
33 |   },
34 |   methods: {
35 |     initMap() {
36 |       this.map = new Map({
37 |         target: "map",
38 |         layers: [
39 |           new TileLayer({
40 |             source: new OSM(),
41 |           }),
42 |         ],
43 |         view: new View({
44 |           center: [13384755.517469, 3529894.878215],
45 |           zoom: 15,
46 |         }),
47 |       });
48 |       const multiPoint = this.getMultiPoint();
49 |       this.map.addLayer(multiPoint);
50 |     },
51 |     getMultiPoint() {
52 |       const multiPointFeature = new Feature({
53 |         geometry: new MultiPoint(this.points),
54 |         style: new Style({
55 |           image: new Circle({
56 |             radius: 5,
57 |             fill: new Fill({
58 |               color: "blue",
59 |             }),
60 |           }),
61 |         }),
62 |       });
63 | 
64 |       return new VectorLayer({
65 |         style: function (feature) {
66 |           return feature.get("style");
67 |         },
68 |         source: new VectorSource({ features: [multiPointFeature] }),
69 |       });
70 |     },
71 |   },
72 | };
73 | </script>
74 | 
75 | <style>
76 | </style>


--------------------------------------------------------------------------------
/src/pages/VectorLayer/LineString.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="map" ref="map" class="map-container"></div>
 3 | </template>
 4 | 
 5 | <script>
 6 | import resizeMixin from "@/mixins/resizeMixin";
 7 | import "ol/ol.css";
 8 | import Map from "ol/Map";
 9 | import OSM from "ol/source/OSM";
10 | import TileLayer from "ol/layer/Tile";
11 | import View from "ol/View";
12 | import Feature from "ol/Feature";
13 | import { LineString } from "ol/geom";
14 | import { Stroke, Style } from "ol/style";
15 | import VectorLayer from "ol/layer/Vector";
16 | import VectorSource from "ol/source/Vector";
17 | export default {
18 |   name: "LineString", // 线
19 |   mixins: [resizeMixin],
20 |   data() {
21 |     return {
22 |       map: null,
23 |       linePoints: [
24 |         [13383752.281472757, 3529949.81732908],
25 |         [13383905.155529328, 3530007.145100294],
26 |         [13384024.588386023, 3530016.69972883],
27 |         [13384191.794385398, 3530026.2543573654],
28 |         [13384411.550841717, 3530035.808985901],
29 |         [13384636.084612304, 3530097.9140713825],
30 |         [13384841.509125821, 3530193.460356739],
31 |       ],
32 |     };
33 |   },
34 |   mounted() {
35 |     this.initMap();
36 |   },
37 |   methods: {
38 |     initMap() {
39 |       this.map = new Map({
40 |         target: "map",
41 |         layers: [
42 |           new TileLayer({
43 |             source: new OSM(),
44 |           }),
45 |         ],
46 |         view: new View({
47 |           center: [13384755.517469, 3529894.878215],
48 |           zoom: 15,
49 |         }),
50 |       });
51 | 
52 |       const lineLayer = this.getLine();
53 |       this.map.addLayer(lineLayer);
54 |     },
55 |     getLine() {
56 |       const lineFeature = new Feature({
57 |         geometry: new LineString(this.linePoints),
58 |         style: new Style({
59 |           stroke: new Stroke({
60 |             color: "red",
61 |             width: 2,
62 |           }),
63 |         }),
64 |       });
65 | 
66 |       return new VectorLayer({
67 |         style: function (feature) {
68 |           return feature.get("style");
69 |         },
70 |         source: new VectorSource({ features: [lineFeature] }),
71 |       });
72 |     },
73 |   },
74 | };
75 | </script>
76 | 
77 | <style>
78 | </style>


--------------------------------------------------------------------------------
/src/pages/Interaction/AddMarker.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="map-box">
 3 |     <div id="map" ref="map" class="map-container"></div>
 4 |     <div
 5 |       v-for="(item, index) in points"
 6 |       :key="index"
 7 |       :id="`marker_${index}`"
 8 |       class="marker"
 9 |       @click="handleClick"
10 |     ></div>
11 |   </div>
12 | </template>
13 | 
14 | <script>
15 | import resizeMixin from "@/mixins/resizeMixin";
16 | import "ol/ol.css";
17 | import Map from "ol/Map";
18 | import OSM from "ol/source/OSM";
19 | import TileLayer from "ol/layer/Tile";
20 | import View from "ol/View";
21 | import Overlay from "ol/Overlay";
22 | export default {
23 |   name: "AddMarker", // 添加标记点
24 |   mixins: [resizeMixin],
25 |   data() {
26 |     return {
27 |       map: null,
28 |       points: [],
29 |     };
30 |   },
31 |   mounted() {
32 |     this.initMap();
33 |     this.addMarker();
34 |   },
35 |   methods: {
36 |     initMap() {
37 |       this.map = new Map({
38 |         target: "map",
39 |         layers: [
40 |           new TileLayer({
41 |             source: new OSM(),
42 |           }),
43 |         ],
44 |         view: new View({
45 |           center: [13384755.517469, 3529894.878215],
46 |           zoom: 15,
47 |         }),
48 |       });
49 | 
50 |       this.map.on("singleclick", this.handleMapClick);
51 |     },
52 |     addMarker(id, position) {
53 |       const marker = new Overlay({
54 |         element: document.getElementById(id),
55 |         position,
56 |         positioning: "center-center",
57 |         stopEvent: false,
58 |       });
59 |       this.map.addOverlay(marker);
60 |       this.map.render();
61 |     },
62 |     handleMapClick(e) {
63 |       const pos = e.coordinate;
64 |       this.points.push(pos);
65 |       const id = `marker_${this.points.length - 1}`;
66 |       this.$nextTick(() => {
67 |         this.addMarker(id, pos);
68 |       });
69 |     },
70 |     handleClick() {
71 |       alert("Overlay 被点击了");
72 |     },
73 |   },
74 | };
75 | </script>
76 | <style lang="scss" scoped>
77 | .marker {
78 |   width: 20px;
79 |   height: 20px;
80 |   line-height: 20px;
81 |   text-align: center;
82 |   border-radius: 50%;
83 |   background-color: red;
84 |   opacity: 0.5;
85 |   cursor: pointer;
86 |   position: absolute;
87 |   transform: translate(-10px, -10px);
88 | }
89 | </style>
90 | 


--------------------------------------------------------------------------------
/src/pages/Interaction/SetCenter.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="map-box">
 3 |     <div id="map" ref="map" class="map-container"></div>
 4 |     <div id="marker1"></div>
 5 |     <div id="marker2"></div>
 6 |     <div class="button-box">
 7 |       <a-button type="primary" @click="handleSetCenter">
 8 |         移动中心并放大层级
 9 |       </a-button>
10 |       <a-button @click="handleRecover"> 恢复 </a-button>
11 |     </div>
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 | import resizeMixin from "@/mixins/resizeMixin";
17 | import "ol/ol.css";
18 | import Map from "ol/Map";
19 | import OSM from "ol/source/OSM";
20 | import TileLayer from "ol/layer/Tile";
21 | import View from "ol/View";
22 | import Overlay from "ol/Overlay";
23 | export default {
24 |   name: "SetCenter", // 设置地图中心
25 |   mixins: [resizeMixin],
26 |   data() {
27 |     return {
28 |       map: null,
29 |     };
30 |   },
31 |   mounted() {
32 |     this.initMap();
33 |   },
34 |   methods: {
35 |     initMap() {
36 |       const marker1 = new Overlay({
37 |         element: document.getElementById("marker1"),
38 |         position: [0, 0],
39 |         positioning: "center-center",
40 |         stopEvent: false,
41 |       });
42 |       const marker2 = new Overlay({
43 |         element: document.getElementById("marker2"),
44 |         position: [13368091.088894, 3556688.839038],
45 |         positioning: "center-center",
46 |         stopEvent: false,
47 |       });
48 | 
49 |       this.map = new Map({
50 |         target: "map",
51 |         layers: [
52 |           new TileLayer({
53 |             source: new OSM(),
54 |           }),
55 |         ],
56 |         view: new View({
57 |           center: [0, 0],
58 |           zoom: 2,
59 |         }),
60 |         overlays: [marker1, marker2],
61 |       });
62 |     },
63 |     handleSetCenter() {
64 |       const view = this.map.getView();
65 |       view.animate({ center: [13368091.088894, 3556688.839038] }, { zoom: 10 });
66 |     },
67 |     handleRecover() {
68 |       const view = this.map.getView();
69 |       view.animate({ zoom: 2, duration: 2000 }, { center: [0, 0] });
70 |     },
71 |   },
72 | };
73 | </script>
74 | 
75 | <style>
76 | #marker1,
77 | #marker2 {
78 |   width: 20px;
79 |   height: 20px;
80 |   line-height: 20px;
81 |   text-align: center;
82 |   border-radius: 50%;
83 |   background-color: red;
84 |   opacity: 0.5;
85 | }
86 | </style>


--------------------------------------------------------------------------------
/src/pages/VectorLayer/Polygon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="map" ref="map" class="map-container"></div>
 3 | </template>
 4 | 
 5 | <script>
 6 | import resizeMixin from "@/mixins/resizeMixin";
 7 | import "ol/ol.css";
 8 | import Map from "ol/Map";
 9 | import OSM from "ol/source/OSM";
10 | import TileLayer from "ol/layer/Tile";
11 | import View from "ol/View";
12 | import Feature from "ol/Feature";
13 | import { Polygon } from "ol/geom";
14 | import { Fill, Stroke, Style } from "ol/style";
15 | import VectorLayer from "ol/layer/Vector";
16 | import VectorSource from "ol/source/Vector";
17 | export default {
18 |   name: "Polygon", // 面
19 |   mixins: [resizeMixin],
20 |   data() {
21 |     return {
22 |       map: null,
23 |       polygonPoints: [
24 |         [
25 |           [13382858.923704674, 3530585.2001267006],
26 |           [13382916.25147589, 3529605.850701797],
27 |           [13383967.260614809, 3529677.510415814],
28 |           [13383957.705986274, 3530599.5320695043],
29 |           [13382858.923704674, 3530585.2001267006],
30 |         ],
31 |       ],
32 |     };
33 |   },
34 |   mounted() {
35 |     this.initMap();
36 |   },
37 |   methods: {
38 |     initMap() {
39 |       this.map = new Map({
40 |         target: "map",
41 |         layers: [
42 |           new TileLayer({
43 |             source: new OSM(),
44 |           }),
45 |         ],
46 |         view: new View({
47 |           center: [13384755.517469, 3529894.878215],
48 |           zoom: 15,
49 |         }),
50 |       });
51 | 
52 |       const vectorLayer = this.getPolygon();
53 |       this.map.addLayer(vectorLayer);
54 | 
55 |       // this.map.on("singleclick", function (e) {
56 |       //   console.log(e.coordinate);
57 |       // });
58 |     },
59 |     getPolygon() {
60 |       const feature = new Feature({
61 |         geometry: new Polygon(this.polygonPoints),
62 |         style: new Style({
63 |           stroke: new Stroke({
64 |             color: "red",
65 |             lineDash: [7, 10],
66 |             width: 2,
67 |           }),
68 |           fill: new Fill({
69 |             color: "rgba(0,37,41,.6)",
70 |           }),
71 |         }),
72 |       });
73 | 
74 |       return new VectorLayer({
75 |         style: function (feature) {
76 |           return feature.get("style");
77 |         },
78 |         source: new VectorSource({ features: [feature] }),
79 |       });
80 |     },
81 |   },
82 | };
83 | </script>
84 | 
85 | <style>
86 | </style>


--------------------------------------------------------------------------------
/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/pages/Interaction/SwitchTileLayer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="map-box">
 3 |     <div id="map" ref="map" class="map-container"></div>
 4 |     <div class="button-box">
 5 |       <a-button type="primary" @click="handleChangeLayer('layer1')">
 6 |         矢量地图
 7 |       </a-button>
 8 |       <a-button @click="handleChangeLayer('layer2')">
 9 |         卫星影像
10 |       </a-button>
11 |     </div>
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 | import resizeMixin from "@/mixins/resizeMixin"; // 监听地图容器大小变化,调用 map.updateSize() 方法使地图撑满容器
17 | import "ol/ol.css";
18 | import Map from "ol/Map";
19 | // import OSM from "ol/source/OSM";
20 | import XYZ from "ol/source/XYZ";
21 | import TileLayer from "ol/layer/Tile";
22 | import View from "ol/View";
23 | export default {
24 |   name: "SwitchTileLayer", // 切换瓦片图层
25 |   mixins: [resizeMixin],
26 |   data() {
27 |     return {
28 |       map: null,
29 |       layer1: null,
30 |       layer2: null,
31 |       // currentLayer: "",
32 |     };
33 |   },
34 |   mounted() {
35 |     this.initMap();
36 |   },
37 |   methods: {
38 |     initMap() {
39 |       // 矢量地图
40 |       this.layer1 = new TileLayer({
41 |         source: new XYZ({
42 |           url: "https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
43 |         }),
44 |       });
45 |       // 卫星影像
46 |       this.layer2 = new TileLayer({
47 |         source: new XYZ({
48 |           url: "https://webst03.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
49 |         }),
50 |       });
51 | 
52 |       this.map = new Map({
53 |         target: "map",
54 |         layers: [this.layer1],
55 |         view: new View({
56 |           center: [13384755.517469, 3529894.878215],
57 |           zoom: 15,
58 |         }),
59 |         controls:[] // 清除所有自带控件
60 |       });
61 |       // this.currentLayer = "layer1";
62 |     },
63 |     handleChangeLayer(newLayer) {
64 |       // 下面两种方法都可以实现
65 |       // 先清除所有图层,再设置新图层
66 |       this.map.setLayers([this[newLayer]])
67 |       // 移除某个图层,再添加新图层
68 |       // if ( newLayer === this.currentLayer ) {
69 |       //   return;
70 |       // }
71 |       // this.map.removeLayer(this[this.currentLayer]);
72 |       // this.map.addLayer(this[newLayer]);
73 |       // this.currentLayer = newLayer
74 |     },
75 |   },
76 | };
77 | </script>
78 | 
79 | <style lang="scss" scoped>
80 | .button-box {
81 |   position: absolute;
82 |   bottom: 10px;
83 |   right: 0px;
84 | }
85 | </style>


--------------------------------------------------------------------------------
/src/pages/Interaction/VectorLayerVisible.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="map-box">
 3 |     <div id="map" ref="map" class="map-container"></div>
 4 |     <div class="button-box">
 5 |       <a-button type="primary" @click="handleClick"> {{ visible ? "隐藏" : "显示" }} </a-button>
 6 |     </div>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | import resizeMixin from "@/mixins/resizeMixin";
12 | import "ol/ol.css";
13 | import Map from "ol/Map";
14 | import OSM from "ol/source/OSM";
15 | import TileLayer from "ol/layer/Tile";
16 | import View from "ol/View";
17 | import Feature from "ol/Feature";
18 | import { Point } from "ol/geom";
19 | import { Fill, Style, Circle } from "ol/style";
20 | import VectorLayer from "ol/layer/Vector";
21 | import VectorSource from "ol/source/Vector";
22 | export default {
23 |   name: "VectorLayerVisible", // 矢量图层显示隐藏
24 |   mixins: [resizeMixin],
25 |   data() {
26 |     return {
27 |       map: null,
28 |       pointLayer:null,
29 |       point: [13384755.517469, 3529894.878215],
30 |       visible: true,
31 |     };
32 |   },
33 |   mounted() {
34 |     this.initMap();
35 |   },
36 |   methods: {
37 |     initMap() {
38 |       this.map = new Map({
39 |         target: "map",
40 |         layers: [
41 |           new TileLayer({
42 |             source: new OSM(),
43 |           }),
44 |         ],
45 |         view: new View({
46 |           center: [13384755.517469, 3529894.878215],
47 |           zoom: 15,
48 |         }),
49 |         controls: [],
50 |       });
51 | 
52 |       this.pointLayer = this.getPoint();
53 |       this.map.addLayer(this.pointLayer);
54 |     },
55 |     getPoint() {
56 |       const pointFeature = new Feature({
57 |         geometry: new Point(this.point),
58 |         style: new Style({
59 |           image: new Circle({
60 |             radius: 10,
61 |             fill: new Fill({
62 |               color: "red",
63 |             }),
64 |           }),
65 |         }),
66 |       });
67 | 
68 |       return new VectorLayer({
69 |         style: function (feature) {
70 |           return feature.get("style");
71 |         },
72 |         source: new VectorSource({ features: [pointFeature] }),
73 |       });
74 |     },
75 |     handleClick(){
76 |       this.visible = !this.visible
77 |       this.pointLayer.setVisible(this.visible)
78 |     }
79 |   },
80 | };
81 | </script>
82 | 
83 | <style lang="scss" scoped>
84 | .button-box {
85 |   position: absolute;
86 |   top: 0;
87 |   left: 20px;
88 | }
89 | </style>


--------------------------------------------------------------------------------
/src/pages/VectorLayer/MultiLineString.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="map" ref="map" class="map-container"></div>
 3 | </template>
 4 | 
 5 | <script>
 6 | import resizeMixin from "@/mixins/resizeMixin";
 7 | import "ol/ol.css";
 8 | import Map from "ol/Map";
 9 | import OSM from "ol/source/OSM";
10 | import TileLayer from "ol/layer/Tile";
11 | import View from "ol/View";
12 | import Feature from "ol/Feature";
13 | import { MultiLineString } from "ol/geom";
14 | import { Style, Stroke } from "ol/style";
15 | import VectorLayer from "ol/layer/Vector";
16 | import VectorSource from "ol/source/Vector";
17 | export default {
18 |   name: "MultiLineString", // 多线
19 |   mixins: [resizeMixin],
20 |   data() {
21 |     return {
22 |       map: null,
23 |       linePoints1: [
24 |         [13382758.600105051, 3529634.5145874037],
25 |         [13383231.554217564, 3529644.0692159394],
26 |         [13383393.98290267, 3529648.846530207],
27 |         [13383475.197245223, 3529687.06504435],
28 |       ],
29 |       linePoints2: [
30 |         [13383752.281472757, 3529949.81732908],
31 |         [13383905.155529328, 3530007.145100294],
32 |         [13384024.588386023, 3530016.69972883],
33 |         [13384191.794385398, 3530026.2543573654],
34 |         [13384411.550841717, 3530035.808985901],
35 |         [13384636.084612304, 3530097.9140713825],
36 |         [13384841.509125821, 3530193.460356739],
37 |       ],
38 |     };
39 |   },
40 |   mounted() {
41 |     this.initMap();
42 |   },
43 |   methods: {
44 |     initMap() {
45 |       this.map = new Map({
46 |         target: "map",
47 |         layers: [
48 |           new TileLayer({
49 |             source: new OSM(),
50 |           }),
51 |         ],
52 |         view: new View({
53 |           center: [13384755.517469, 3529894.878215],
54 |           zoom: 15,
55 |         }),
56 |       });
57 |       const multiLineString = this.initVectorLayer();
58 |       this.map.addLayer(multiLineString);
59 |     },
60 |     initVectorLayer() {
61 |       const multiLineStringFeature = new Feature({
62 |         geometry: new MultiLineString([this.linePoints1, this.linePoints2]),
63 |         style: new Style({
64 |           stroke: new Stroke({
65 |             color: "red",
66 |             width: 3,
67 |           }),
68 |         }),
69 |       });
70 | 
71 |       return new VectorLayer({
72 |         style: function (feature) {
73 |           return feature.get("style");
74 |         },
75 |         source: new VectorSource({ features: [multiLineStringFeature] }),
76 |       });
77 |     },
78 |   },
79 | };
80 | </script>
81 | 
82 | <style>
83 | </style>


--------------------------------------------------------------------------------
/src/pages/VectorLayer/MultiPolygon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="map" ref="map" class="map-container"></div>
 3 | </template>
 4 | 
 5 | <script>
 6 | import resizeMixin from "@/mixins/resizeMixin";
 7 | import "ol/ol.css";
 8 | import Map from "ol/Map";
 9 | import OSM from "ol/source/OSM";
10 | import TileLayer from "ol/layer/Tile";
11 | import View from "ol/View";
12 | import Feature from "ol/Feature";
13 | import { MultiPolygon } from "ol/geom";
14 | import { Fill, Stroke, Style } from "ol/style";
15 | import VectorLayer from "ol/layer/Vector";
16 | import VectorSource from "ol/source/Vector";
17 | export default {
18 |   name: "MultiPolygon", // 多面
19 |   mixins: [resizeMixin],
20 |   data() {
21 |     return {
22 |       map: null,
23 |       polygon1: [
24 |         [
25 |           [13382858.923704674, 3530585.2001267006],
26 |           [13382916.25147589, 3529605.850701797],
27 |           [13383967.260614809, 3529677.510415814],
28 |           [13383957.705986274, 3530599.5320695043],
29 |           [13382858.923704674, 3530585.2001267006],
30 |         ],
31 |       ],
32 |       polygon2: [
33 |         [
34 |           [13384908.39152557, 3529959.3719576155],
35 |           [13384989.605868123, 3529085.123446604],
36 |           [13385878.186321938, 3529128.1192750144],
37 |           [13385816.081236457, 3529816.052529581],
38 |           [13384908.39152557, 3529959.3719576155],
39 |         ],
40 |       ],
41 |     };
42 |   },
43 |   mounted() {
44 |     this.initMap();
45 |   },
46 |   methods: {
47 |     initMap() {
48 |       this.map = new Map({
49 |         target: "map",
50 |         layers: [
51 |           new TileLayer({
52 |             source: new OSM(),
53 |           }),
54 |         ],
55 |         view: new View({
56 |           center: [13384755.517469, 3529894.878215],
57 |           zoom: 15,
58 |         }),
59 |       });
60 | 
61 |       const vectorLayer = this.getMultiPolygon();
62 |       this.map.addLayer(vectorLayer);
63 | 
64 |       // this.map.on("singleclick", function (e) {
65 |       //   console.log(e.coordinate);
66 |       // });
67 |     },
68 |     getMultiPolygon() {
69 |       const feature = new Feature({
70 |         geometry: new MultiPolygon([this.polygon1, this.polygon2]),
71 |         style: new Style({
72 |           stroke: new Stroke({
73 |             color: "orange",
74 |             // lineDash: [7, 10],
75 |             width: 2,
76 |           }),
77 |           fill: new Fill({
78 |             color: "rgba(0,37,41,.8)",
79 |           }),
80 |         }),
81 |       });
82 | 
83 |       const vectorLayer = new VectorLayer({
84 |         style: function (feature) {
85 |           return feature.get("style");
86 |         },
87 |         source: new VectorSource({ features: [feature] }),
88 |       });
89 |       return vectorLayer;
90 |     },
91 |   },
92 | };
93 | </script>
94 | 
95 | <style>
96 | </style>


--------------------------------------------------------------------------------
/src/pages/VectorLayer/Sector.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="map" ref="map" class="map-container"></div>
  3 | </template>
  4 | 
  5 | <script>
  6 | import resizeMixin from "@/mixins/resizeMixin";
  7 | import "ol/ol.css";
  8 | import Map from "ol/Map";
  9 | import OSM from "ol/source/OSM";
 10 | import TileLayer from "ol/layer/Tile";
 11 | import View from "ol/View";
 12 | import VectorLayer from "ol/layer/Vector";
 13 | import Feature from "ol/Feature";
 14 | import { Polygon } from "ol/geom";
 15 | import VectorSource from "ol/source/Vector";
 16 | import { Style, Fill } from "ol/style";
 17 | 
 18 | export default {
 19 |   name: "Sector", // 扇形
 20 |   mixins: [resizeMixin],
 21 |   data() {
 22 |     return {
 23 |       map: null,
 24 |       center: [13384755.517469, 3529894.878215], // 圆心
 25 |       radius: 1500, // 半径
 26 |       direction: 45, // 方向
 27 |       viewRange: 90, // 夹角
 28 |     };
 29 |   },
 30 |   mounted() {
 31 |     this.initMap();
 32 |   },
 33 |   methods: {
 34 |     initMap() {
 35 |       this.map = new Map({
 36 |         target: "map",
 37 |         layers: [
 38 |           new TileLayer({
 39 |             source: new OSM({
 40 |               wrapX: false,
 41 |             }),
 42 |           }),
 43 |         ],
 44 |         view: new View({
 45 |           center: [13384755.517469, 3529894.878215],
 46 |           zoom: 15,
 47 |         }),
 48 |       });
 49 | 
 50 |       const sectorLayer = this.getSector();
 51 |       this.map.addLayer(sectorLayer);
 52 |     },
 53 |     getSector() {
 54 |       // 扇形 feature
 55 |       const sectorPoints = this.getPoints(
 56 |         this.center,
 57 |         this.radius,
 58 |         this.direction,
 59 |         this.viewRange
 60 |       );
 61 |       const feature = new Feature({
 62 |         geometry: new Polygon([sectorPoints]),
 63 |         style: new Style({
 64 |           fill: new Fill({
 65 |             color: "rgba(0,37,41,.4)",
 66 |           }),
 67 |         }),
 68 |       });
 69 | 
 70 |       // 扇形图层
 71 |       return new VectorLayer({
 72 |         style: function (feature) {
 73 |           return feature.get("style");
 74 |         },
 75 |         source: new VectorSource({
 76 |           features: [feature],
 77 |           wrapX: false,
 78 |         }),
 79 |       });
 80 |     },
 81 |     // 计算几何图形所需点位
 82 |     getPoints(center, radius, direction, viewRange) {
 83 |       const points = [];
 84 |       points.push(center);
 85 |       // 弧线的边数,越大弧边的点越密
 86 |       const sides = 5000;
 87 |       // 起始点弧度 ，本系统以正东为起始方向 degree2meter
 88 |       const startAngle = (direction - viewRange / 2) * (Math.PI / 180);
 89 |       // 每个点之间的弧度间隔
 90 |       const angle = (viewRange / sides) * (Math.PI / 180);
 91 | 
 92 |       for (var i = 0; i <= sides; i++) {
 93 |         const rotation = startAngle + i * angle;
 94 |         const x = center[0] + radius * Math.cos(rotation);
 95 |         const y = center[1] + radius * Math.sin(rotation);
 96 | 
 97 |         points.push([x, y]);
 98 |       }
 99 | 
100 |       points.push(center);
101 | 
102 |       return points;
103 |     },
104 |   },
105 | };
106 | </script>
107 | 
108 | <style>
109 | </style>


--------------------------------------------------------------------------------
/src/pages/Interaction/DrawBoxOverlay.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="map-box">
  3 |     <div id="map" ref="map" class="map-container"></div>
  4 |     <div id="marker"></div>
  5 |   </div>
  6 | </template>
  7 | 
  8 | <script>
  9 | import resizeMixin from '@/mixins/resizeMixin' // 监听地图容器大小变化,调用 map.updateSize() 方法使地图撑满容器
 10 | import 'ol/ol.css'
 11 | import Map from 'ol/Map'
 12 | import OSM from 'ol/source/OSM'
 13 | import TileLayer from 'ol/layer/Tile'
 14 | import View from 'ol/View'
 15 | import { DragBox } from 'ol/interaction'
 16 | import Overlay from 'ol/Overlay'
 17 | import { always } from 'ol/events/condition'
 18 | import { containsCoordinate } from 'ol/extent'
 19 | export default {
 20 |   name: 'DrawBoxOverlay', // 框选 Overlay
 21 |   mixins: [resizeMixin],
 22 |   data() {
 23 |     return {
 24 |       map: null,
 25 |       dragBox: null,
 26 |       selectOverlays: [] // 当前选中的 Overlay
 27 |     }
 28 |   },
 29 |   mounted() {
 30 |     this.initMap()
 31 |     this.addMarker()
 32 |   },
 33 |   beforeDestroy(){
 34 |     this.dragBox && this.dragBox.un('boxstart', this.dragBoxStart)
 35 |     this.dragBox && this.dragBox.un('boxend', this.dragBoxEnd)
 36 |   },
 37 |   methods: {
 38 |     initMap() {
 39 |       this.map = new Map({
 40 |         target: 'map',
 41 |         layers: [
 42 |           new TileLayer({
 43 |             source: new OSM(),
 44 |           }),
 45 |         ],
 46 |         view: new View({
 47 |           center: [13384755.517469, 3529894.878215],
 48 |           zoom: 15,
 49 |         }),
 50 |       })
 51 | 
 52 |       this.dragBox = this.initDragBox()
 53 | 
 54 |       this.map.addInteraction(this.dragBox)
 55 |     },
 56 |     addMarker() {
 57 |       const pos = [13384755.517469, 3529894.878215]
 58 |       const marker = new Overlay({
 59 |         element: document.getElementById('marker'),
 60 |         position: pos,
 61 |         positioning: 'center-center',
 62 |         stopEvent: false,
 63 |       })
 64 |       this.map.addOverlay(marker)
 65 |     },
 66 |     initDragBox() {
 67 |       const dragBox = new DragBox({
 68 |         condition: always,
 69 |       })
 70 |       dragBox.on('boxstart', this.dragBoxStart)
 71 |       dragBox.on('boxend', this.dragBoxEnd)
 72 |       return dragBox
 73 |     },
 74 |     dragBoxStart() {
 75 |       // 框选前还原所有 Overlay
 76 |       this.selectOverlays.map(item => {
 77 |         item.getElement().style.backgroundColor = 'red'
 78 |       })
 79 |     },
 80 |     dragBoxEnd() {
 81 |       // 获取框选范围
 82 |       const extent = this.dragBox.getGeometry().getExtent()
 83 |       // 获取 Map 中所有的 Overlay
 84 |       const overlays = this.map.getOverlays().getArray()
 85 |       // 筛选出所有在当前范围内的 Overlay
 86 |       this.selectOverlays = overlays.filter(item => containsCoordinate(extent, item.getPosition()))
 87 |       // 改变框选的 Overlay 颜色
 88 |       this.selectOverlays.map(item => {
 89 |         item.getElement().style.backgroundColor = 'blue'
 90 |       })
 91 |     },
 92 |   },
 93 | }
 94 | </script>
 95 | 
 96 | <style lang="scss" scoped>
 97 | #marker {
 98 |   width: 20px;
 99 |   height: 20px;
100 |   line-height: 20px;
101 |   text-align: center;
102 |   border-radius: 50%;
103 |   background-color: red;
104 |   opacity: 0.5;
105 |   cursor: pointer;
106 | }
107 | </style>


--------------------------------------------------------------------------------
/src/pages/VectorLayer/Arrow.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="map" ref="map" class="map-container"></div>
  3 | </template>
  4 | 
  5 | <script>
  6 | import resizeMixin from "@/mixins/resizeMixin";
  7 | import "ol/ol.css";
  8 | import Map from "ol/Map";
  9 | import OSM from "ol/source/OSM";
 10 | import TileLayer from "ol/layer/Tile";
 11 | import View from "ol/View";
 12 | import Feature from "ol/Feature";
 13 | import { LineString, Polygon } from "ol/geom";
 14 | import { Style, Stroke, Fill } from "ol/style";
 15 | import VectorLayer from "ol/layer/Vector";
 16 | import VectorSource from "ol/source/Vector";
 17 | export default {
 18 |   name: "Arrow", // 箭头
 19 |   mixins: [resizeMixin],
 20 |   data() {
 21 |     return {
 22 |       map: null,
 23 |       points: [
 24 |         [13383752.281472757, 3529949.81732908],
 25 |         [13383905.155529328, 3530007.145100294],
 26 |         [13384024.588386023, 3530016.69972883],
 27 |         [13384191.794385398, 3530026.2543573654],
 28 |         [13384411.550841717, 3530035.808985901],
 29 |         [13384636.084612304, 3530097.9140713825],
 30 |         [13384841.509125821, 3530193.460356739],
 31 |       ],
 32 |       speed: 300,
 33 |     };
 34 |   },
 35 |   mounted() {
 36 |     this.initMap();
 37 |   },
 38 |   methods: {
 39 |     initMap() {
 40 |       this.map = new Map({
 41 |         target: "map",
 42 |         layers: [
 43 |           new TileLayer({
 44 |             source: new OSM(),
 45 |           }),
 46 |         ],
 47 |         view: new View({
 48 |           center: [13384755.517469, 3529894.878215],
 49 |           zoom: 15,
 50 |         }),
 51 |       });
 52 |       const pointLayer = this.initFeature();
 53 |       this.map.addLayer(pointLayer);
 54 |     },
 55 |     // 带箭头的线
 56 |     initFeature() {
 57 |       const lineFeature = new Feature({
 58 |         geometry: new LineString(this.points),
 59 |         style: new Style({
 60 |           stroke: new Stroke({
 61 |             color: "red",
 62 |             lineDash: [7, 10],
 63 |             width: 2,
 64 |           }),
 65 |         }),
 66 |       });
 67 |       // 获取箭头关键点坐标
 68 |       const point3 = this.getArrowPoints(this.points);
 69 |       // 绘制箭头 Polygon
 70 |       const arrowFeature = new Feature({
 71 |         geometry: new Polygon([point3]),
 72 |         style: new Style({
 73 |           fill: new Fill({
 74 |             color: "red",
 75 |           }),
 76 |         }),
 77 |       });
 78 |       // 创建 vector 图层
 79 |       const vectorLayer = new VectorLayer({
 80 |         style: function (feature) {
 81 |           return feature.get("style"); // 注意与方法1的区别
 82 |         },
 83 |         // source 中添加 线 和 箭头 feature
 84 |         source: new VectorSource({ features: [lineFeature, arrowFeature] }),
 85 |       });
 86 | 
 87 |       return vectorLayer;
 88 |     },
 89 |     getArrowPoints(linePoints) {
 90 |       const headlen = 100; // 箭头斜边大小
 91 |       const theta = 15; // 箭头一边与直线的夹角
 92 |       const lineLength = linePoints.length;
 93 |       // 获取line的最后两个坐标点
 94 |       const p1 = linePoints[lineLength - 2];
 95 |       const p2 = linePoints[lineLength - 1];
 96 |       // 计算角度
 97 |       const angle = (Math.atan2(p2[1] - p1[1], p2[0] - p1[0]) * 180) / Math.PI;
 98 | 
 99 |       const p3 = []; // p3
100 |       const p4 = []; // p4
101 | 
102 |       p3[0] = p2[0] - Math.cos(((angle + theta) * Math.PI) / 180) * headlen; // P3对应的X坐标
103 |       p3[1] = p2[1] - Math.sin(((angle + theta) * Math.PI) / 180) * headlen; // P3对应的Y坐标
104 | 
105 |       p4[0] = p2[0] - Math.cos(((angle - theta) * Math.PI) / 180) * headlen; // P4对应的X坐标
106 |       p4[1] = p2[1] - Math.sin(((angle - theta) * Math.PI) / 180) * headlen; // P4对应的Y坐标
107 | 
108 |       return [p2, p3, p4, p2];
109 |     },
110 |   },
111 | };
112 | </script>
113 | 
114 | <style>
115 | </style>


--------------------------------------------------------------------------------
/src/pages/Animation/TwinklePoint.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="map" ref="map" class="map-container"></div>
  3 | </template>
  4 | 
  5 | <script>
  6 | import resizeMixin from '@/mixins/resizeMixin'
  7 | import 'ol/ol.css'
  8 | import Map from 'ol/Map'
  9 | import OSM from 'ol/source/OSM'
 10 | import TileLayer from 'ol/layer/Tile'
 11 | import View from 'ol/View'
 12 | import Feature from 'ol/Feature'
 13 | import { Point } from 'ol/geom'
 14 | import { Style, Circle, Fill } from 'ol/style'
 15 | import VectorLayer from 'ol/layer/Vector'
 16 | import VectorSource from 'ol/source/Vector'
 17 | import { getVectorContext } from 'ol/render'
 18 | import { linear } from 'ol/easing'
 19 | export default {
 20 |   name: 'TwinklePoint', // 闪烁点
 21 |   mixins: [resizeMixin],
 22 |   data() {
 23 |     return {
 24 |       map: null,
 25 |       pointLayer: null,
 26 |       point: [13384755.517469, 3529894.878215],
 27 |       speed: 600, // 闪烁速度
 28 |       start: Date.now(),
 29 |     }
 30 |   },
 31 |   mounted() {
 32 |     this.initMap()
 33 |   },
 34 |   beforeDestroy() {
 35 |     // 销毁前取消动画
 36 |     this.pointLayer.un('postrender', this.animation)
 37 |   },
 38 |   methods: {
 39 |     initMap() {
 40 |       this.map = new Map({
 41 |         target: 'map',
 42 |         layers: [
 43 |           new TileLayer({
 44 |             source: new OSM(),
 45 |           }),
 46 |         ],
 47 |         view: new View({
 48 |           center: [13384755.517469, 3529894.878215],
 49 |           zoom: 15,
 50 |         }),
 51 |       })
 52 |       this.pointLayer = this.initFeature()
 53 |       this.map.addLayer(this.pointLayer)
 54 | 
 55 |       // 动画
 56 |       this.pointLayer.on('postrender', this.animation)
 57 |     },
 58 |     // 点 Point
 59 |     initFeature() {
 60 |       const feature = new Feature({
 61 |         id: 2,
 62 |         geometry: new Point(this.point), // 注意自己的经纬度坐标系
 63 |         style: new Style({
 64 |           image: new Circle({
 65 |             radius: 5,
 66 |             fill: new Fill({
 67 |               color: 'red',
 68 |             }),
 69 |           }),
 70 |         }),
 71 |       })
 72 |       const vectorLayer = new VectorLayer({
 73 |         style: function (feature) {
 74 |           return feature.get('style') // 注意与方法1的区别
 75 |         },
 76 |         source: new VectorSource({ features: [feature] }),
 77 |       })
 78 | 
 79 |       return vectorLayer
 80 |     },
 81 |     // 动画
 82 |     animation(event) {
 83 |       const vectorContext = getVectorContext(event)
 84 |       const frameState = event.frameState
 85 | 
 86 |       const elapsed = frameState.time - this.start
 87 |       let radius = 5
 88 |       let opcatity = 0.6
 89 | 
 90 |       if (elapsed > this.speed) {
 91 |         radius = 5
 92 |         opcatity = 0.6
 93 |         this.start = Date.now()
 94 |       } else {
 95 |         radius = linear(elapsed / this.speed) * 15
 96 |         opcatity = opcatity * linear(1 - elapsed / this.speed)
 97 |       }
 98 | 
 99 |       const geom = new Point(this.point)
100 |       const geom2 = new Point(this.point)
101 |       const geom3 = new Point(this.point)
102 | 
103 |       vectorContext.setStyle(this.getPointStyle(radius, opcatity * 4))
104 |       vectorContext.drawGeometry(geom)
105 | 
106 |       vectorContext.setStyle(this.getPointStyle(radius * 2, opcatity * 2))
107 |       vectorContext.drawGeometry(geom2)
108 | 
109 |       vectorContext.setStyle(this.getPointStyle(radius * 4, opcatity))
110 |       vectorContext.drawGeometry(geom3)
111 |       this.map.render()
112 |     },
113 |     getPointStyle(radius, opcatity) {
114 |       return new Style({
115 |         image: new Circle({
116 |           radius: radius,
117 |           fill: new Fill({
118 |             color: `rgba(255,0,0,${opcatity})`,
119 |           }),
120 |         }),
121 |       })
122 |     },
123 |   },
124 | }
125 | </script>
126 | 
127 | <style>
128 | </style>


--------------------------------------------------------------------------------
/src/pages/Interaction/Popover.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="map-box">
  3 |     <div id="map" ref="map" class="map-container"></div>
  4 |     <div id="popover" ref="popover">
  5 |       <a-icon class="popover-close" type="close" @click="handleClosePopover" />
  6 |       <p>当前经纬度：</p>
  7 |       <span>{{ hdms }}</span>
  8 |     </div>
  9 |   </div>
 10 | </template>
 11 | 
 12 | <script>
 13 | import resizeMixin from "@/mixins/resizeMixin";
 14 | import "ol/ol.css";
 15 | import Map from "ol/Map";
 16 | // import TileJSON from "ol/source/TileJSON";
 17 | // import OSM from "ol/source/OSM";
 18 | import XYZ from "ol/source/XYZ";
 19 | import Overlay from "ol/Overlay";
 20 | import TileLayer from "ol/layer/Tile";
 21 | import View from "ol/View";
 22 | import { toLonLat } from "ol/proj";
 23 | import { toStringHDMS } from "ol/coordinate";
 24 | export default {
 25 |   name: "Popover", // 点击弹出气泡弹窗
 26 |   mixins: [resizeMixin],
 27 |   data() {
 28 |     return {
 29 |       map: null, // map 对象
 30 |       popover: null, // 弹窗对象
 31 |       hdms: "", // 经纬度
 32 |     };
 33 |   },
 34 |   mounted() {
 35 |     this.initMap();
 36 |   },
 37 |   beforeDestroy() {
 38 |     this.map.un("singleclick", this.handleSingleClick);
 39 |   },
 40 |   methods: {
 41 |     initMap() {
 42 |       // 弹窗的 Overlay
 43 |       this.popover = new Overlay({
 44 |         element: document.getElementById("popover"),
 45 |         autoPan: true, // 边缘自动拖拽
 46 |         autoPanAnimation: {
 47 |           // 拖拽动画
 48 |           duration: 250, // 动画时间
 49 |         },
 50 |       });
 51 | 
 52 |       this.map = new Map({
 53 |         target: "map",
 54 |         layers: [
 55 |           new TileLayer({
 56 |             // 加载mapbox地图
 57 |             // source: new TileJSON({
 58 |             //   url: "https://api.tiles.mapbox.com/v4/mapbox.natural-earth-hypso-bathy.json?secure&access_token=pk.eyJ1Ijoid2pyLTMxNyIsImEiOiJja3Y5ZjcyZzAyMTRkMm5sdXc5ejRnZzIwIn0.pFtB_-6p_nCiM_5d3Mmx-g",
 59 |             //   crossOrigin: "anonymous",
 60 |             // }),
 61 |             // 加载高德地图
 62 |             source: new XYZ({
 63 |               urls: [
 64 |                 // "https://webrd03.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}",
 65 |                 // "https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
 66 |                 'https://webst03.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
 67 |                 // "http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}",
 68 |               ],
 69 |             }),
 70 |             // source: new OSM(),
 71 |           }),
 72 |         ],
 73 |         view: new View({
 74 |           center: [13384755.517469, 3529894.878215],
 75 |           zoom: 13,
 76 |         }),
 77 |         overlays: [this.popover],
 78 |       });
 79 |       this.map.on("singleclick", this.handleSingleClick);
 80 |     },
 81 |     // 关闭弹窗
 82 |     handleClosePopover() {
 83 |       this.popover.setPosition(undefined);
 84 |     },
 85 |     // 地图单击事件
 86 |     handleSingleClick(event) {
 87 |       const coordinate = event.coordinate; // 获取经纬度
 88 |       console.log(coordinate);
 89 |       this.hdms = toStringHDMS(toLonLat(coordinate)); // 坐标转换
 90 |       this.popover.setPosition(coordinate);
 91 |     },
 92 |   },
 93 | };
 94 | </script>
 95 | 
 96 | <style lang="scss" scoped>
 97 | #popover {
 98 |   position: absolute;
 99 |   background-color: #fff;
100 |   -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
101 |   filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
102 |   padding: 15px;
103 |   border-radius: 10px;
104 |   border: 1px solid #ccc;
105 |   bottom: 12px;
106 |   left: -50px;
107 |   min-width: 280px;
108 |   .popover-close {
109 |     position: absolute;
110 |     right: 10px;
111 |     top: 6px;
112 |     cursor: pointer;
113 |   }
114 |   &::after,
115 |   &::before {
116 |     top: 100%;
117 |     border: solid transparent;
118 |     content: "";
119 |     width: 0;
120 |     height: 0;
121 |     position: absolute;
122 |     pointer-events: none;
123 |   }
124 |   &::after {
125 |     border-top-color: #fff;
126 |     border-width: 10px;
127 |     left: 48px;
128 |     margin-left: -10px;
129 |   }
130 |   &::before {
131 |     border-top-color: #ccc;
132 |     border-width: 11px;
133 |     left: 48px;
134 |     margin-left: -11px;
135 |   }
136 | }
137 | </style>


--------------------------------------------------------------------------------
/src/pages/VectorLayer/Radar.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="map" ref="map" class="map-container"></div>
  3 | </template>
  4 | 
  5 | <script>
  6 | import resizeMixin from "@/mixins/resizeMixin";
  7 | import "ol/ol.css";
  8 | import Map from "ol/Map";
  9 | import OSM from "ol/source/OSM";
 10 | import TileLayer from "ol/layer/Tile";
 11 | import View from "ol/View";
 12 | import VectorLayer from "ol/layer/Vector";
 13 | import Feature from "ol/Feature";
 14 | import { Polygon, LineString } from "ol/geom";
 15 | import VectorSource from "ol/source/Vector";
 16 | import { Style, Fill, Stroke, Text } from "ol/style";
 17 | 
 18 | export default {
 19 |   name: "Radar", // 雷达
 20 |   mixins: [resizeMixin],
 21 |   data() {
 22 |     return {
 23 |       map: null,
 24 |       center: [13384755.517469, 3529894.878215], // 圆心
 25 |       radius: 1500, // 半径
 26 |       direction: 45, // 方向
 27 |       viewRange: 90, // 夹角
 28 |       labelSpace: 400, // 标注间隔
 29 |     };
 30 |   },
 31 |   mounted() {
 32 |     this.initMap();
 33 |   },
 34 |   methods: {
 35 |     initMap() {
 36 |       this.map = new Map({
 37 |         target: "map",
 38 |         layers: [
 39 |           new TileLayer({
 40 |             source: new OSM({
 41 |               wrapX: false,
 42 |             }),
 43 |           }),
 44 |         ],
 45 |         view: new View({
 46 |           center: [13384755.517469, 3529894.878215],
 47 |           zoom: 15,
 48 |         }),
 49 |       });
 50 | 
 51 |       const sectorLayer = this.getSector();
 52 |       this.map.addLayer(sectorLayer);
 53 |     },
 54 |     getSector() {
 55 |       // 扇形 feature
 56 |       const sectorPoints = this.getPoints(
 57 |         this.center,
 58 |         this.radius,
 59 |         this.direction,
 60 |         this.viewRange,
 61 |         true
 62 |       );
 63 |       const feature = new Feature({
 64 |         geometry: new Polygon([sectorPoints]),
 65 |         style: new Style({
 66 |           fill: new Fill({
 67 |             color: "rgba(0,37,41,.4)",
 68 |           }),
 69 |         }),
 70 |       });
 71 | 
 72 |       // 雷达距离标注
 73 |       const lineNum = Math.ceil(this.radius / this.labelSpace); // 距离线条数
 74 |       const features = [];
 75 |       // 防止距离线条数lineNum不是整数
 76 |       const remainder = this.radius % this.labelSpace; // 余数
 77 | 
 78 |       for (let i = 0; i < lineNum; i++) {
 79 |         const points = this.getPoints(
 80 |           this.center,
 81 |           remainder === 0
 82 |             ? (i + 1) * this.labelSpace
 83 |             : i * this.labelSpace + remainder,
 84 |           this.direction,
 85 |           this.viewRange,
 86 |           false
 87 |         );
 88 |         const feature = new Feature({
 89 |           geometry: new LineString(points),
 90 |           style: new Style({
 91 |             stroke: new Stroke({
 92 |               color: "rgba(0,0,0,0.4)",
 93 |               width: 1,
 94 |             }),
 95 |             text: new Text({
 96 |               text: `${
 97 |                 remainder
 98 |                   ? (i + 1) * this.labelSpace
 99 |                   : i * this.labelSpace + remainder
100 |               }m`,
101 |               placement: "line",
102 |               textBaseline: "bottom",
103 |               rotateWithView: true,
104 |               fill: new Fill({
105 |                 color: "rgba(0, 0, 0, 0.4)",
106 |               }),
107 |             }),
108 |           }),
109 |         });
110 |         features.push(feature);
111 |       }
112 | 
113 |       // 扇形图层
114 |       return new VectorLayer({
115 |         style: function (feature) {
116 |           return feature.get("style");
117 |         },
118 |         source: new VectorSource({
119 |           features: [feature, ...features],
120 |           wrapX: false,
121 |         }),
122 |       });
123 |     },
124 |     // 计算几何图形所需点位
125 |     getPoints(center, radius, direction, viewRange, includeCenter) {
126 |       const points = [];
127 |       if (includeCenter) points.push(center);
128 | 
129 |       const sides = 5000;
130 |       // 起始点弧度 ，本系统以正东为起始方向 degree2meter
131 |       const startAngle = (direction - viewRange / 2) * (Math.PI / 180);
132 |       // 每个点之间的弧度间隔
133 |       const angle = (viewRange / sides) * (Math.PI / 180);
134 | 
135 |       for (var i = 0; i <= sides; i++) {
136 |         const rotation = startAngle + i * angle;
137 |         const x = center[0] + radius * Math.cos(rotation);
138 |         const y = center[1] + radius * Math.sin(rotation);
139 | 
140 |         points.push([x, y]);
141 |       }
142 | 
143 |       if (includeCenter) points.push(center);
144 | 
145 |       return points;
146 |     },
147 |   },
148 | };
149 | </script>
150 | 
151 | <style>
152 | </style>


--------------------------------------------------------------------------------
/src/pages/Interaction/HoverAndClick.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="map" ref="map" class="map-container"></div>
  3 | </template>
  4 | 
  5 | <script>
  6 | import resizeMixin from "@/mixins/resizeMixin";
  7 | import "ol/ol.css";
  8 | import Map from "ol/Map";
  9 | import OSM from "ol/source/OSM";
 10 | import TileLayer from "ol/layer/Tile";
 11 | import View from "ol/View";
 12 | import VectorLayer from "ol/layer/Vector";
 13 | import VectorSource from "ol/source/Vector";
 14 | import Feature from "ol/Feature";
 15 | import { Polygon } from "ol/geom";
 16 | // import LineString from "ol/geom/LineString";
 17 | import { Stroke, Style, Fill } from "ol/style";
 18 | // import Interaction from "ol/interaction";
 19 | import { singleClick, pointerMove } from "ol/events/condition";
 20 | import { Select, Pointer } from "ol/interaction";
 21 | // import { fromLonLat } from "ol/proj";
 22 | export default {
 23 |   name: "Hover", // Hover
 24 |   mixins: [resizeMixin],
 25 |   data() {
 26 |     return {
 27 |       map: null,
 28 |       vectorLayer: null,
 29 |       points: [
 30 |         [
 31 |           [928567.4597877879, 5876854.581025382],
 32 |           [10874013.673830742, 6805422.040813176],
 33 |           [10629653.81599185, -647553.6232730672],
 34 |           [586463.6588133369, -232141.86494694836],
 35 |           [928567.4597877879, 5876854.581025382],
 36 |         ],
 37 |       ],
 38 |     };
 39 |   },
 40 |   mounted() {
 41 |     this.initMap();
 42 |   },
 43 |   methods: {
 44 |     initMap() {
 45 |       this.map = new Map({
 46 |         target: "map",
 47 |         layers: [
 48 |           new TileLayer({
 49 |             source: new OSM(),
 50 |           }),
 51 |         ],
 52 |         view: new View({
 53 |           center: [0, 0],
 54 |           zoom: 2,
 55 |         }),
 56 |       });
 57 | 
 58 |       this.vectorLayer = this.initFeature();
 59 |       this.map.addLayer(this.vectorLayer);
 60 | 
 61 |       const pointerMove = this.changeCursor();
 62 |       const hover = this.getHover();
 63 |       const click = this.getClick();
 64 | 
 65 |       this.map.addInteraction(pointerMove);
 66 |       this.map.addInteraction(click);
 67 |       this.map.addInteraction(hover);
 68 |     },
 69 |     // 面 Polygon 多边形
 70 |     initFeature() {
 71 |       const feature = new Feature({
 72 |         geometry: new Polygon(this.points),
 73 |         style: new Style({
 74 |           stroke: new Stroke({
 75 |             color: "orange",
 76 |             lineDash: [7, 10],
 77 |             width: 2,
 78 |           }),
 79 |           fill: new Fill({
 80 |             color: "rgba(0,37,41,.2)",
 81 |           }),
 82 |         }),
 83 |       });
 84 |       const vectorLayer = new VectorLayer({
 85 |         style: function (feature) {
 86 |           return feature.get("style");
 87 |         },
 88 |         source: new VectorSource({ features: [feature] }),
 89 |       });
 90 |       return vectorLayer;
 91 |     },
 92 |     // vectorLayer 的click效果
 93 |     getClick() {
 94 |       return new Select({
 95 |         layers: [this.vectorLayer],
 96 |         condition: singleClick,
 97 |         style: new Style({
 98 |           stroke: new Stroke({
 99 |             color: "red",
100 |             // lineDash: [7, 10],
101 |             width: 2,
102 |           }),
103 |           fill: new Fill({
104 |             color: "rgba(0,37,41,.6)",
105 |           }),
106 |         }),
107 |         toggleCondition: function (e) {
108 |           console.log(e);
109 |         },
110 |       });
111 |     },
112 |     // vectorLayer 的hover效果
113 |     getHover() {
114 |       return new Select({
115 |         layers: [this.vectorLayer],
116 |         condition: pointerMove,
117 |         style: new Style({
118 |           stroke: new Stroke({
119 |             color: "pink",
120 |             // lineDash: [7, 10],
121 |             width: 3,
122 |           }),
123 |           fill: new Fill({
124 |             color: "rgba(0,37,41,.8)",
125 |           }),
126 |         }),
127 |       });
128 |     },
129 |     // 改变鼠标样式
130 |     changeCursor() {
131 |       const _this = this
132 |       return new Pointer({
133 |         handleMoveEvent(e) {
134 |           let feature = _this.map.forEachFeatureAtPixel(
135 |             e.pixel,
136 |             (feature) => {
137 |               return feature;
138 |             },
139 |             {
140 |               hitTolerance: 0,
141 |             }
142 |           );
143 |           if (feature) {
144 |             _this.map.getTargetElement().style.cursor = "pointer";
145 |           } else {
146 |             _this.map.getTargetElement().style.cursor = "auto";
147 |           }
148 |         },
149 |       });
150 |     },
151 |   },
152 | };
153 | </script>
154 | 
155 | <style>
156 | </style>


--------------------------------------------------------------------------------
/src/pages/WebGL/IconPoints.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="map" ref="map" class="map-container"></div>
  3 | </template>
  4 | 
  5 | <script>
  6 | import resizeMixin from '@/mixins/resizeMixin' // 监听地图容器大小变化,调用 map.updateSize() 方法使地图撑满容器
  7 | import 'ol/ol.css'
  8 | import Map from 'ol/Map'
  9 | import OSM from 'ol/source/OSM'
 10 | import TileLayer from 'ol/layer/Tile'
 11 | import View from 'ol/View'
 12 | import VectorSource from 'ol/source/Vector'
 13 | import Feature from 'ol/Feature'
 14 | import { Point } from 'ol/geom'
 15 | import WebGLPointsLayer from 'ol/layer/WebGLPoints'
 16 | export default {
 17 |   name: 'IconPoints', // 海量图标
 18 |   mixins: [resizeMixin],
 19 |   data() {
 20 |     return {
 21 |       map: null,
 22 |       vectorSource: null,
 23 |       webGLPointsLayer: null,
 24 |       coordinates: [
 25 |         [13382758.600105051, 3529634.5145874037],
 26 |         [13383231.554217564, 3529644.0692159394],
 27 |         [13383393.98290267, 3529648.846530207],
 28 |         [13383475.197245223, 3529687.06504435],
 29 |         [13383532.525016438, 3529734.838187028],
 30 |         [13383575.520844849, 3529820.829843849],
 31 |         [13383651.957873134, 3529892.489557866],
 32 |         [13383752.281472757, 3529949.81732908],
 33 |         [13383905.155529328, 3530007.145100294],
 34 |         [13384024.588386023, 3530016.69972883],
 35 |         [13384191.794385398, 3530026.2543573654],
 36 |         [13384411.550841717, 3530035.808985901],
 37 |         [13384636.084612304, 3530097.9140713825],
 38 |         [13384841.509125821, 3530193.460356739],
 39 |         [13384960.941982517, 3530284.2293278277],
 40 |         [13385118.593353355, 3530379.775613184],
 41 |         [13385261.91278139, 3530503.9857841474],
 42 |         [13385419.564152228, 3530585.2001267006],
 43 |         [13385591.54746587, 3530661.6371549857],
 44 |         [13385878.186321938, 3530742.851497539],
 45 |         [13386174.379806545, 3530809.7338972883],
 46 |         [13386461.018662613, 3530881.393611306],
 47 |         [13386699.884376004, 3530723.7422404676],
 48 |         [13386852.758432575, 3530609.08669804],
 49 |         [13386967.413975002, 3530403.6621845234],
 50 |         [13387005.632489145, 3530226.901556614],
 51 |         [13387010.409803413, 3530083.5821285793],
 52 |         [13386981.745917806, 3529964.1492718835],
 53 |         [13386890.976946717, 3529844.716415188],
 54 |         [13386790.653347094, 3529706.1743014213],
 55 |         [13386633.001976255, 3529591.518758993],
 56 |         [13386451.464034079, 3529510.3044164404],
 57 |         [13386040.615007045, 3529639.2919016713],
 58 |         [13385796.971979385, 3529706.1743014213],
 59 |         [13385534.219694655, 3529782.6113297064],
 60 |         [13385333.572495406, 3529935.4853862766],
 61 |         [13385319.240552604, 3530193.460356739],
 62 |         [13385118.593353355, 3530437.103384398],
 63 |         [13384793.735983143, 3530599.5320695043],
 64 |         [13384363.777699038, 3530747.6288118064],
 65 |       ],
 66 |       style: {
 67 |         // variables: {
 68 |         //   filterShape: 'all',
 69 |         // },
 70 |         // filter: [
 71 |         //   'case',
 72 |         //   ['!=', ['var', 'filterShape'], 'all'],
 73 |         //   ['==', ['get', 'shape'], ['var', 'filterShape']],
 74 |         //   true,
 75 |         // ],
 76 |         symbol: {
 77 |           symbolType: 'image',
 78 |           src: require('@/assets/imgs/resource/boat.png'),
 79 |           size: 16,
 80 |           // color: 'red',
 81 |           rotateWithView: false,
 82 |           offset: [0, 0],
 83 |           rotation:['get','rotation']
 84 |         },
 85 |       },
 86 |     }
 87 |   },
 88 |   mounted() {
 89 |     this.initMap()
 90 |     this.initSource()
 91 |     this.initWebGLPointsLayer()
 92 |     this.map.addLayer(this.webGLPointsLayer)
 93 |     const features = this.coordinates.map(item => {
 94 |       return new Feature({
 95 |         geometry: new Point(item),
 96 |         rotation: Math.random() * 2 * Math.PI // 随机一个弧度
 97 |       })
 98 |     })
 99 |     this.vectorSource.addFeatures(features)
100 |   },
101 |   methods: {
102 |     initMap() {
103 |       this.map = new Map({
104 |         target: 'map',
105 |         layers: [
106 |           new TileLayer({
107 |             source: new OSM(),
108 |           }),
109 |         ],
110 |         view: new View({
111 |           center: [13384755.517469, 3529894.878215],
112 |           zoom: 15,
113 |         }),
114 |       })
115 |     },
116 |     initSource() {
117 |       this.vectorSource = new VectorSource()
118 |     },
119 |     initWebGLPointsLayer() {
120 |       this.webGLPointsLayer = new WebGLPointsLayer({
121 |         source: this.vectorSource,
122 |         style: this.style,
123 |       })
124 |     },
125 |   },
126 | }
127 | </script>
128 | 
129 | <style>
130 | </style>


--------------------------------------------------------------------------------
/src/pages/Animation/DefenceAlarm.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="map-box">
  3 |     <div id="map" ref="map" class="map-container"></div>
  4 |     <div class="button-box">
  5 |       <a-button type="primary" @click="handleAlarm"> 报警 </a-button>
  6 |       <a-button @click="handleCancel">取消</a-button>
  7 |     </div>
  8 |   </div>
  9 | </template>
 10 | 
 11 | <script>
 12 | import resizeMixin from '@/mixins/resizeMixin'
 13 | import 'ol/ol.css'
 14 | import Map from 'ol/Map'
 15 | import OSM from 'ol/source/OSM'
 16 | import TileLayer from 'ol/layer/Tile'
 17 | import View from 'ol/View'
 18 | import Feature from 'ol/Feature'
 19 | import { Polygon } from 'ol/geom'
 20 | import { Fill, Stroke, Style } from 'ol/style'
 21 | import VectorLayer from 'ol/layer/Vector'
 22 | import VectorSource from 'ol/source/Vector'
 23 | import { getVectorContext } from 'ol/render'
 24 | import { linear } from 'ol/easing'
 25 | export default {
 26 |   name: 'DefenceAlarm', // 防区报警
 27 |   mixins: [resizeMixin],
 28 |   data() {
 29 |     return {
 30 |       map: null,
 31 |       vectorLayer: null,
 32 |       vectorSource: null,
 33 |       polygonFeature: null,
 34 |       polygonGeom: null,
 35 |       polygonPoints: [
 36 |         [
 37 |           [13382858.923704674, 3530585.2001267006],
 38 |           [13382916.25147589, 3529605.850701797],
 39 |           [13383967.260614809, 3529677.510415814],
 40 |           [13383957.705986274, 3530599.5320695043],
 41 |           [13382858.923704674, 3530585.2001267006],
 42 |         ],
 43 |       ],
 44 |       alarmFeature: null,
 45 |       speed: 600, // 闪烁速度
 46 |       start: Date.now(),
 47 |       alarming: false,
 48 |     }
 49 |   },
 50 |   mounted() {
 51 |     this.initMap()
 52 |   },
 53 |   beforeDestroy() {
 54 |     this.handleCancel()
 55 |   },
 56 |   methods: {
 57 |     initMap() {
 58 |       this.map = new Map({
 59 |         target: 'map',
 60 |         layers: [
 61 |           new TileLayer({
 62 |             source: new OSM(),
 63 |           }),
 64 |         ],
 65 |         view: new View({
 66 |           center: [13384755.517469, 3529894.878215],
 67 |           zoom: 15,
 68 |         }),
 69 |       })
 70 | 
 71 |       this.vectorLayer = this.getPolygon()
 72 | 
 73 |       this.map.addLayer(this.vectorLayer)
 74 |     },
 75 |     getPolygon() {
 76 |       this.polygonGeom = new Polygon(this.polygonPoints)
 77 |       this.polygonFeature = new Feature({
 78 |         geometry: this.polygonGeom,
 79 |         style: this.getStyle(),
 80 |       })
 81 |       this.vectorSource = new VectorSource({ features: [this.polygonFeature] })
 82 |       return new VectorLayer({
 83 |         style: function (feature) {
 84 |           return feature.get('style')
 85 |         },
 86 |         source: this.vectorSource,
 87 |       })
 88 |     },
 89 |     getStyle() {
 90 |       return new Style({
 91 |         stroke: new Stroke({
 92 |           color: 'rgba(250,173,20,1)',
 93 |           // lineDash: [7, 10],
 94 |           width: 3,
 95 |         }),
 96 |         fill: new Fill({
 97 |           color: 'rgba(250,173,20,0.2)',
 98 |         }),
 99 |       })
100 |     },
101 |     getAlramStyle(opcatity) {
102 |       return new Style({
103 |         stroke: new Stroke({
104 |           color: `rgba(255,0,0,${opcatity})`,
105 |           // lineDash: [7, 10],
106 |           width: 4 * (opcatity + 0.2),
107 |         }),
108 |         fill: new Fill({
109 |           color: 'rgba(250,0,0,0.3)',
110 |         }),
111 |       })
112 |     },
113 |     animate(event) {
114 |       const vectorContext = getVectorContext(event)
115 |       const frameState = event.frameState
116 | 
117 |       const elapsed = frameState.time - this.start
118 |       let scale = 1
119 |       let opcatity = 1
120 |       let time = elapsed
121 |       if (elapsed > this.speed) {
122 |         scale = 1
123 |         opcatity = 1
124 |         this.start = Date.now()
125 |       } else {
126 |         opcatity = opcatity * linear(1 - elapsed / this.speed)
127 |         if (time < this.speed) {
128 |           time = this.speed * 1
129 |         }
130 |         scale = linear(time / this.speed) * 1.03
131 |       }
132 | 
133 |       const geom = this.polygonGeom.clone()
134 |       geom.scale(scale, scale)
135 | 
136 |       vectorContext.setStyle(this.getAlramStyle(opcatity))
137 |       vectorContext.drawGeometry(geom)
138 | 
139 |       this.map.render()
140 |     },
141 |     getAlarmFeature() {
142 |       const style = new Style({
143 |         stroke: new Stroke({
144 |           // color: 'rgb(255,0,0)',
145 |           color: 'rgba(255,0,0,0)',
146 |           // lineDash: [7, 10],
147 |           width: 3,
148 |         }),
149 |         fill: new Fill({
150 |           // color: 'rgba(255,0,0,0.2)',
151 |           color: 'rgba(255,0,0,0)',
152 |         }),
153 |       })
154 |       this.alarmFeature = this.polygonFeature.clone()
155 |       this.alarmFeature.setStyle(style)
156 |       return this.alarmFeature
157 |     },
158 |     handleAlarm() {
159 |       this.vectorSource.addFeature(this.getAlarmFeature())
160 |       this.vectorLayer.on('postrender', this.animate)
161 |     },
162 |     handleCancel() {
163 |       this.vectorLayer.un('postrender', this.animate)
164 |       this.vectorSource.removeFeature(this.alarmFeature)
165 |     },
166 |   },
167 | }
168 | </script>
169 | 
170 | <style>
171 | </style>


--------------------------------------------------------------------------------
/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/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <a-layout id="components-layout-demo-custom-trigger">
  4 |       <a-layout-sider :width="260" v-model="collapsed" :trigger="null" collapsible style="overflow: auto">
  5 |         <div class="logo">{{ collapsed ? 'Ol' : 'Openlayers 基础示例' }}</div>
  6 |         <a-menu
  7 |           v-if="$route.name"
  8 |           :defaultOpenKeys="defaultOpenKeys"
  9 |           :defaultSelectedKeys="defaultKeys"
 10 |           mode="inline"
 11 |           theme="dark"
 12 |           :inline-collapsed="collapsed"
 13 |         >
 14 |           <template v-for="item in menus">
 15 |             <a-sub-menu :key="item.name" v-if="item.children">
 16 |               <span slot="title">
 17 |                 <icon-font :type="`icon-${item.name}`" />
 18 |                 <!-- <span :class="`iconfont icon-${item.name}`"></span> -->
 19 |                 <span>{{ item.meta.label }}</span>
 20 |               </span>
 21 |               <a-menu-item :key="subItem.name" v-for="subItem in item.children">
 22 |                 <router-link :to="item.path + subItem.path">
 23 |                   <icon-font :type="`icon-${subItem.name}`" />
 24 |                   <span>{{ subItem.meta.label }}</span>
 25 |                 </router-link>
 26 |               </a-menu-item>
 27 |             </a-sub-menu>
 28 | 
 29 |             <a-menu-item v-else :key="item.name">
 30 |               <router-link :to="item.path">
 31 |                 <icon-font :type="`icon-${item.name}`" />
 32 |                 <span>{{ item.meta.label }}</span>
 33 |               </router-link>
 34 |             </a-menu-item>
 35 |           </template>
 36 |         </a-menu>
 37 |       </a-layout-sider>
 38 |       <a-layout>
 39 |         <a-layout-header>
 40 |           <div>
 41 |             <a-icon
 42 |               class="trigger"
 43 |               :type="collapsed ? 'menu-unfold' : 'menu-fold'"
 44 |               @click="() => (collapsed = !collapsed)"
 45 |             />
 46 |           </div>
 47 |           <div>
 48 |             <a v-if="currentHref" class="link" target="_black" :href="currentHref"> 当前示例代码 </a>
 49 |             <a class="link" target="_black" href="https://openlayers.org/"> Openlayers官网 </a>
 50 |             <a class="link" target="_black" href="https://github.com/wjr-dev/Openlayers6-Example"> GitHub </a>
 51 |           </div>
 52 |         </a-layout-header>
 53 |         <a-layout-content
 54 |           :style="{
 55 |             margin: '24px 16px',
 56 |             padding: '24px',
 57 |             background: '#fff',
 58 |             minHeight: '280px',
 59 |           }"
 60 |         >
 61 |           <router-view></router-view>
 62 |         </a-layout-content>
 63 |       </a-layout>
 64 |     </a-layout>
 65 |   </div>
 66 | </template>
 67 | 
 68 | <script>
 69 | import IconFont from '@/components/MyFont.js'
 70 | 
 71 | export default {
 72 |   name: "App",
 73 |   components: {
 74 |     IconFont,
 75 |   },
 76 |   data() {
 77 |     return {
 78 |       collapsed: false,
 79 |       openKeys: [],
 80 |       github:
 81 |         "https://github.com/wjr-dev/Openlayers6-Example/tree/master/src/pages/",
 82 |       currentHref: "",
 83 |     };
 84 |   },
 85 |   watch: {
 86 |     $route: {
 87 |       handler: function (newVal) {
 88 |         let route = "";
 89 |         if (newVal.meta.root) {
 90 |           route = `${newVal.meta.root}/${newVal.meta.current}.vue`;
 91 |         } else {
 92 |           route = `${newVal.meta.current}.vue`;
 93 |         }
 94 |         this.currentHref = this.github + route;
 95 |       },
 96 |     },
 97 |   },
 98 |   computed: {
 99 |     defaultKeys() {
100 |       return this.$route.meta.current ? [this.$route.meta.current] : [];
101 |     },
102 |     defaultOpenKeys() {
103 |       return this.$route.meta.root ? [this.$route.meta.root] : [];
104 |     },
105 |     menus() {
106 |       return this.$router.options.routes;
107 |     },
108 |   },
109 | };
110 | </script>
111 | 
112 | <style lang="scss">
113 | html,
114 | body {
115 |   width: 100%;
116 |   height: 100%;
117 |   margin: 0;
118 |   padding: 0;
119 | }
120 | #app {
121 |   height: 100%;
122 |   min-height: 100%;
123 | }
124 | #components-layout-demo-custom-trigger {
125 |   height: 100vh;
126 | }
127 | #components-layout-demo-custom-trigger .trigger {
128 |   font-size: 18px;
129 |   line-height: 64px;
130 |   padding: 0 24px;
131 |   cursor: pointer;
132 |   transition: color 0.3s;
133 | }
134 | 
135 | #components-layout-demo-custom-trigger .trigger:hover {
136 |   color: #1890ff;
137 | }
138 | 
139 | #components-layout-demo-custom-trigger .logo {
140 |   height: 32px;
141 |   background: rgba(255, 255, 255, 0.2);
142 |   margin: 16px;
143 |   text-align: center;
144 |   line-height: 32px;
145 |   color: #fff;
146 | 
147 |   overflow: hidden;
148 |   text-overflow: ellipsis;
149 |   white-space: nowrap;
150 | }
151 | .map-box {
152 |   width: 100%;
153 |   height: 100%;
154 |   display: flex;
155 |   flex-direction: column;
156 |   position: relative;
157 | }
158 | .button-box {
159 |   margin-top: 20px;
160 |   .ant-btn {
161 |     margin-right: 10px;
162 |   }
163 | }
164 | .map-container {
165 |   width: 100%;
166 |   height: 100%;
167 | }
168 | </style>
169 | <style lang="scss" scoped>
170 | ::v-deep.ant-layout-header {
171 |   background: #fff;
172 |   padding: 0;
173 |   display: flex;
174 |   justify-content: space-between;
175 |   padding-right: 24px;
176 | }
177 | .iconfont {
178 |   margin-right: 10px;
179 | }
180 | .link {
181 |   color: #2c3e50;
182 |   font-weight: 600;
183 |   margin-left: 20px;
184 |   &:hover {
185 |     color: #1890ff;
186 |   }
187 | }
188 | </style>


--------------------------------------------------------------------------------
/src/pages/Animation/RadarAnimation.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="map" ref="map" class="map-container"></div>
  3 | </template>
  4 | 
  5 | <script>
  6 | import resizeMixin from "@/mixins/resizeMixin";
  7 | import "ol/ol.css";
  8 | import Map from "ol/Map";
  9 | import OSM from "ol/source/OSM";
 10 | import TileLayer from "ol/layer/Tile";
 11 | import View from "ol/View";
 12 | import VectorLayer from "ol/layer/Vector";
 13 | import Feature from "ol/Feature";
 14 | import { Polygon, LineString } from "ol/geom";
 15 | import VectorSource from "ol/source/Vector";
 16 | import { Style, Fill, Stroke, Text } from "ol/style";
 17 | import { getVectorContext } from "ol/render";
 18 | import { easeOut } from "ol/easing";
 19 | export default {
 20 |   name: "RadarAnimation", // 雷达波
 21 |   mixins: [resizeMixin],
 22 |   data() {
 23 |     return {
 24 |       map: null,
 25 |       sectorLayer: null,
 26 |       center: [13384755.517469, 3529894.878215], // 圆心
 27 |       radius: 1500, // 半径
 28 |       direction: 45, // 方向
 29 |       viewRange: 90, // 夹角
 30 |       labelSpace: 400, // 标注间隔
 31 |       start: Date.now(),
 32 |       speed: 6000,
 33 |     };
 34 |   },
 35 |   mounted() {
 36 |     this.initMap();
 37 |   },
 38 |   beforeDestroy(){
 39 |     this.sectorLayer.un("postrender", this.animation);
 40 |   },
 41 |   methods: {
 42 |     initMap() {
 43 |       this.map = new Map({
 44 |         target: "map",
 45 |         layers: [
 46 |           new TileLayer({
 47 |             source: new OSM({
 48 |               wrapX: false,
 49 |             }),
 50 |           }),
 51 |         ],
 52 |         view: new View({
 53 |           center: [13384755.517469, 3529894.878215],
 54 |           zoom: 15,
 55 |         }),
 56 |       });
 57 | 
 58 |       this.sectorLayer = this.getSector();
 59 |       this.sectorLayer.on("postrender", this.animation);
 60 |       this.map.addLayer(this.sectorLayer);
 61 |     },
 62 |     getSector() {
 63 |       // 扇形 feature
 64 |       const sectorPoints = this.getPoints(
 65 |         this.center,
 66 |         this.radius,
 67 |         this.direction,
 68 |         this.viewRange,
 69 |         true
 70 |       );
 71 |       const feature = new Feature({
 72 |         geometry: new Polygon([sectorPoints]),
 73 |         style: new Style({
 74 |           fill: new Fill({
 75 |             color: "rgba(0,37,41,.4)",
 76 |           }),
 77 |         }),
 78 |       });
 79 | 
 80 |       // 雷达距离标注
 81 |       const lineNum = Math.ceil(this.radius / this.labelSpace); // 距离线条数
 82 |       const features = [];
 83 |       // 防止距离线条数lineNum不是整数
 84 |       const remainder = this.radius % this.labelSpace; // 余数
 85 | 
 86 |       for (let i = 0; i < lineNum; i++) {
 87 |         const points = this.getPoints(
 88 |           this.center,
 89 |           remainder === 0
 90 |             ? (i + 1) * this.labelSpace
 91 |             : i * this.labelSpace + remainder,
 92 |           this.direction,
 93 |           this.viewRange,
 94 |           false
 95 |         );
 96 |         const feature = new Feature({
 97 |           geometry: new LineString(points),
 98 |           style: new Style({
 99 |             stroke: new Stroke({
100 |               color: "rgba(0,0,0,0.4)",
101 |               width: 1,
102 |             }),
103 |             text: new Text({
104 |               text: `${
105 |                 remainder
106 |                   ? (i + 1) * this.labelSpace
107 |                   : i * this.labelSpace + remainder
108 |               }m`,
109 |               placement: "line",
110 |               textBaseline: "bottom",
111 |               rotateWithView: true,
112 |               fill: new Fill({
113 |                 color: "rgba(0, 0, 0, 0.4)",
114 |               }),
115 |             }),
116 |           }),
117 |         });
118 |         features.push(feature);
119 |       }
120 | 
121 |       // 扇形图层
122 |       return new VectorLayer({
123 |         style: function (feature) {
124 |           return feature.get("style");
125 |         },
126 |         source: new VectorSource({
127 |           features: [feature, ...features],
128 |           wrapX: false,
129 |         }),
130 |       });
131 |     },
132 |     // 计算几何图形所需点位
133 |     getPoints(center, radius, direction, viewRange, includeCenter) {
134 |       const points = [];
135 |       if (includeCenter) points.push(center);
136 | 
137 |       const sides = 5000;
138 |       // 起始点弧度 ，本系统以正东为起始方向 degree2meter
139 |       const startAngle = (direction - viewRange / 2) * (Math.PI / 180);
140 |       // 每个点之间的弧度间隔
141 |       const angle = (viewRange / sides) * (Math.PI / 180);
142 | 
143 |       for (var i = 0; i <= sides; i++) {
144 |         const rotation = startAngle + i * angle;
145 |         const x = center[0] + radius * Math.cos(rotation);
146 |         const y = center[1] + radius * Math.sin(rotation);
147 | 
148 |         points.push([x, y]);
149 |       }
150 | 
151 |       if (includeCenter) points.push(center);
152 | 
153 |       return points;
154 |     },
155 |     animation(event) {
156 |       const vectorContext = getVectorContext(event);
157 |       const frameState = event.frameState;
158 |       let elapsedTime = frameState.time - this.start;
159 |       let radius = 0;
160 |       let opcatity = 0.3;
161 | 
162 |       if (elapsedTime > this.speed) {
163 |         radius = this.radius;
164 |         opcatity = 0;
165 |         this.start = Date.now();
166 |       } else {
167 |         radius = easeOut(elapsedTime / this.speed) * this.radius;
168 |         opcatity = opcatity * easeOut(1 - elapsedTime / this.speed);
169 |       }
170 |       // 设置样式
171 |       vectorContext.setStyle(
172 |         new Style({
173 |           fill: new Fill({
174 |             color: `rgba(255,0,0,${opcatity})`,
175 |           }),
176 |         })
177 |       );
178 |       const points = this.getPoints(
179 |         this.center,
180 |         radius,
181 |         this.direction,
182 |         this.viewRange,
183 |         true
184 |       );
185 |       const gemo = new Polygon([points]);
186 |       vectorContext.drawGeometry(gemo);
187 |       this.map.render();
188 |     },
189 |   },
190 | };
191 | </script>
192 | 
193 | <style>
194 | </style>


--------------------------------------------------------------------------------
/src/pages/Animation/ResPointAlarm.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="map-box">
  3 |     <div id="map" ref="map" class="map-container"></div>
  4 |     <div id="resource" :class="{ resource: true, alarming }">
  5 |       <div class="res-bg"></div>
  6 |       <span class="iconfont icon-qiuji"></span>
  7 |     </div>
  8 |     <div class="button-box">
  9 |       <a-button type="primary" @click="handleAlarm"> 报警 </a-button>
 10 |       <a-button @click="handleCancel">取消</a-button>
 11 |     </div>
 12 |   </div>
 13 | </template>
 14 | 
 15 | <script>
 16 | import resizeMixin from '@/mixins/resizeMixin'
 17 | import 'ol/ol.css'
 18 | import Map from 'ol/Map'
 19 | import OSM from 'ol/source/OSM'
 20 | import TileLayer from 'ol/layer/Tile'
 21 | import View from 'ol/View'
 22 | import Feature from 'ol/Feature'
 23 | import { Point } from 'ol/geom'
 24 | import { Style, Circle, Fill } from 'ol/style'
 25 | import VectorLayer from 'ol/layer/Vector'
 26 | import VectorSource from 'ol/source/Vector'
 27 | import { getVectorContext } from 'ol/render'
 28 | import { linear } from 'ol/easing'
 29 | import Overlay from 'ol/Overlay'
 30 | //==================================
 31 | import IconFont from '@/components/MyFont.js'
 32 | export default {
 33 |   name: 'ResPointAlarm', // 资源点报警
 34 |   mixins: [resizeMixin],
 35 |   components: { IconFont },
 36 |   data() {
 37 |     return {
 38 |       map: null,
 39 |       pointLayer: null,
 40 |       point: [13384755.517469, 3529894.878215],
 41 |       resPoint: null,
 42 |       speed: 600, // 闪烁速度
 43 |       start: Date.now(),
 44 |       alarming: false,
 45 |     }
 46 |   },
 47 |   mounted() {
 48 |     this.initMap()
 49 |   },
 50 |   beforeDestroy() {
 51 |     // 销毁前取消动画
 52 |     this.pointLayer.un('postrender', this.animation)
 53 |   },
 54 |   methods: {
 55 |     initMap() {
 56 |       this.map = new Map({
 57 |         target: 'map',
 58 |         layers: [
 59 |           new TileLayer({
 60 |             source: new OSM(),
 61 |           }),
 62 |         ],
 63 |         view: new View({
 64 |           center: [13384755.517469, 3529894.878215],
 65 |           zoom: 15,
 66 |         }),
 67 |         controls: [],
 68 |       })
 69 |       this.getResourceOverlay()
 70 |       // this.pointLayer = this.initFeature()
 71 |       // this.map.addLayer(this.pointLayer)
 72 | 
 73 |       // 动画
 74 |       // this.pointLayer.on('postrender', this.animation)
 75 |     },
 76 |     getResourceOverlay() {
 77 |       const resPoint = new Overlay({
 78 |         element: document.getElementById('resource'),
 79 |         position: this.point,
 80 |         positioning: 'center-center',
 81 |         stopEvent: true,
 82 |       })
 83 | 
 84 |       this.map.addOverlay(resPoint)
 85 |     },
 86 |     // 点 Point
 87 |     initFeature() {
 88 |       const feature = new Feature({
 89 |         id: 2,
 90 |         geometry: new Point(this.point), // 注意自己的经纬度坐标系
 91 |         style: new Style({
 92 |           image: new Circle({
 93 |             radius: 18,
 94 |             fill: new Fill({
 95 |               color: 'transparent',
 96 |             }),
 97 |           }),
 98 |         }),
 99 |       })
100 |       const vectorLayer = new VectorLayer({
101 |         style: function (feature) {
102 |           return feature.get('style') // 注意与方法1的区别
103 |         },
104 |         source: new VectorSource({ features: [feature] }),
105 |       })
106 | 
107 |       return vectorLayer
108 |     },
109 |     // 动画
110 |     animation(event) {
111 |       const vectorContext = getVectorContext(event)
112 |       const frameState = event.frameState
113 | 
114 |       const elapsed = frameState.time - this.start
115 |       let radius = 18
116 |       let opcatity = 0.6
117 | 
118 |       if (elapsed > this.speed) {
119 |         radius = 18
120 |         opcatity = 0.6
121 |         this.start = Date.now()
122 |       } else {
123 |         radius = linear(elapsed / this.speed) * 30
124 |         opcatity = opcatity * linear(1 - elapsed / this.speed)
125 |       }
126 | 
127 |       const geom = new Point(this.point)
128 |       const geom2 = new Point(this.point)
129 |       const geom3 = new Point(this.point)
130 | 
131 |       vectorContext.setStyle(this.getPointStyle(radius, opcatity * 2.5))
132 |       vectorContext.drawGeometry(geom)
133 | 
134 |       vectorContext.setStyle(this.getPointStyle(radius * 1.5, opcatity * 1.5))
135 |       vectorContext.drawGeometry(geom2)
136 | 
137 |       vectorContext.setStyle(this.getPointStyle(radius * 2.5, opcatity))
138 |       vectorContext.drawGeometry(geom3)
139 |       this.map.render()
140 |     },
141 |     getPointStyle(radius, opcatity) {
142 |       return new Style({
143 |         image: new Circle({
144 |           radius: radius,
145 |           fill: new Fill({
146 |             color: `rgba(255,0,0,${opcatity})`,
147 |           }),
148 |         }),
149 |       })
150 |     },
151 |     handleAlarm() {
152 |       this.alarming = true
153 |       this.pointLayer = this.initFeature()
154 |       this.map.addLayer(this.pointLayer)
155 |       // 动画
156 |       this.pointLayer.on('postrender', this.animation)
157 |     },
158 |     handleCancel() {
159 |       if (this.alarming) {
160 |         this.alarming = false
161 |         this.map.removeLayer(this.pointLayer)
162 |         this.pointLayer.un('postrender', this.animation)
163 |       }
164 |     },
165 |   },
166 | }
167 | </script>
168 | 
169 | <style lang="scss" scoped>
170 | .resource {
171 |   width: 36px;
172 |   height: 36px;
173 |   border-radius: 50%;
174 |   background: url('../../assets/imgs/resource/res_bg.png') no-repeat;
175 |   background-size: 36px 36px;
176 |   cursor: pointer;
177 |   font-size: 18px;
178 |   text-align: center;
179 |   line-height: 36px;
180 |   color: #fff;
181 |   position: relative;
182 |   .res-bg{
183 |     position: absolute;
184 |     width: 42px;
185 |     height: 42px;
186 |     top: 0;
187 |     left: 0;
188 |     background: url('../../assets/imgs/resource/res_hover.png') no-repeat;
189 |     background-size: 42px 42px;
190 |     margin-top: -3px;
191 |     margin-left: -3px;
192 |     z-index: -1;
193 |     display: none;
194 |   }
195 |   .iconfont {
196 |     font-size: 18px;
197 |   }
198 |   &:hover {
199 |     .res-bg{
200 |       animation: hover 2s linear infinite;
201 |       display: block;
202 |     }
203 |   }
204 |   &.alarming {
205 |     animation: alarming 0.6s infinite;
206 |   }
207 | }
208 | @keyframes alarming {
209 |   0% {
210 |     color: rgb(255, 255, 255);
211 |   }
212 |   100% {
213 |     color: rgb(255, 0, 0);
214 |   }
215 | }
216 | @keyframes hover {
217 |   from {
218 |     transform: rotate(0deg);
219 |   }
220 |   to {
221 |     transform: rotate(360deg);
222 |   }
223 | }
224 | </style>


--------------------------------------------------------------------------------
/src/pages/Interaction/MeasureArea.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="map-box">
  3 |     <div id="map" ref="map" class="map-container"></div>
  4 |     <div :id="key" v-for="(item, key) in featureIds" :key="key" class="delete">
  5 |       <span class="delete-btn">
  6 |         <a-icon type="delete" @click="handleDelete(key)" />
  7 |       </span>
  8 |       <span class="text"> 面积: {{ item.area }} m<sup>2</sup> </span>
  9 |     </div>
 10 |   </div>
 11 | </template>
 12 | 
 13 | <script>
 14 | import resizeMixin from '@/mixins/resizeMixin' // 监听地图容器大小变化,调用 map.updateSize() 方法使地图撑满容器
 15 | import 'ol/ol.css'
 16 | import Map from 'ol/Map'
 17 | import OSM from 'ol/source/OSM'
 18 | import TileLayer from 'ol/layer/Tile'
 19 | import View from 'ol/View'
 20 | import VectorLayer from 'ol/layer/Vector'
 21 | import VectorSource from 'ol/source/Vector'
 22 | import { Fill, Stroke, Style } from 'ol/style'
 23 | import CircleStyle from 'ol/style/Circle'
 24 | import { Draw, Modify, Snap } from 'ol/interaction'
 25 | import Overlay from 'ol/Overlay'
 26 | import { MultiPoint } from 'ol/geom'
 27 | export default {
 28 |   name: 'MeasureArea', // 测面
 29 |   mixins: [resizeMixin],
 30 |   data() {
 31 |     return {
 32 |       map: null,
 33 |       vectorLayer: null,
 34 |       vectorSource: null,
 35 |       drawPolygon: null,
 36 |       snap: null,
 37 |       modify: null,
 38 |       featureIds: {},
 39 |     }
 40 |   },
 41 |   mounted() {
 42 |     this.initMap()
 43 |   },
 44 |   beforeDestroy() {
 45 |     // 卸载监听
 46 |     this.drawPolygon && this.drawPolygon.un('drawend', this.drawPolygonEnd)
 47 |     this.modify && this.modify.un('modifyend', this.modifyEnd)
 48 |   },
 49 |   methods: {
 50 |     initMap() {
 51 |       // 先准备一个绘制的矢量图层
 52 |       const { vectorLayer, vectorSource } = this.getVectorLayer()
 53 |       this.vectorLayer = vectorLayer
 54 |       this.vectorSource = vectorSource
 55 |       this.map = new Map({
 56 |         target: 'map',
 57 |         layers: [
 58 |           new TileLayer({
 59 |             source: new OSM(),
 60 |           }),
 61 |           vectorLayer,
 62 |         ],
 63 |         view: new View({
 64 |           center: [13384755.517469, 3529894.878215],
 65 |           zoom: 15,
 66 |         }),
 67 |         controls: [],
 68 |       })
 69 |       // 添加交互
 70 |       this.addInteractions(vectorSource)
 71 |     },
 72 |     getVectorLayer() {
 73 |       const vectorSource = new VectorSource()
 74 | 
 75 |       const styles = [
 76 |         /* We are using two different styles for the polygons:
 77 |          *  - The first style is for the polygons themselves.
 78 |          *  - The second style is to draw the vertices of the polygons.
 79 |          *    In a custom `geometry` function the vertices of a polygon are
 80 |          *    returned as `MultiPoint` geometry, which will be used to render
 81 |          *    the style.
 82 |          */
 83 |         new Style({
 84 |           stroke: new Stroke({
 85 |             color: 'blue',
 86 |             width: 2,
 87 |           }),
 88 |           fill: new Fill({
 89 |             color: 'rgba(0, 0, 255, 0.1)',
 90 |           }),
 91 |         }),
 92 |         new Style({
 93 |           image: new CircleStyle({
 94 |             radius: 5,
 95 |             fill: new Fill({
 96 |               color: '#fff',
 97 |             }),
 98 |             stroke: new Stroke({
 99 |               color: 'orange',
100 |               width: 2,
101 |             }),
102 |           }),
103 |           geometry: function (feature) {
104 |             // return the coordinates of the first ring of the polygon
105 |             const coordinates = feature.getGeometry().getCoordinates()[0]
106 |             return new MultiPoint(coordinates)
107 |           },
108 |         }),
109 |       ]
110 | 
111 |       const vectorLayer = new VectorLayer({
112 |         source: vectorSource,
113 |         style: styles,
114 |       })
115 | 
116 |       return {
117 |         vectorLayer,
118 |         vectorSource,
119 |       }
120 |     },
121 |     addInteractions(source) {
122 |       // 捕捉
123 |       this.snap = new Snap({ source })
124 |       // 修改
125 |       this.modify = new Modify({ source })
126 |       // 绘制多边形
127 |       this.drawPolygon = new Draw({
128 |         source,
129 |         type: 'Polygon',
130 |         id: 'draw-Polygon',
131 |       })
132 | 
133 |       this.map.addInteraction(this.modify)
134 |       this.map.addInteraction(this.snap)
135 |       this.map.addInteraction(this.drawPolygon)
136 | 
137 |       // setTimeout(() => {
138 |       //   // 移除交互
139 |       //   this.map.removeInteraction(this.modify);
140 |       //   this.map.removeInteraction(this.snap);
141 |       //   this.map.removeInteraction(this.drawPolygon);
142 | 
143 |       //   this.drawPolygon.un("drawend", this.drawPolygonEnd);
144 |       //   this.modify.un("modifyend", this.modifyEnd);
145 |       // }, 10000);
146 | 
147 |       this.drawPolygon.on('drawend', this.drawPolygonEnd)
148 |       this.modify.on('modifyend', this.modifyEnd)
149 |     },
150 |     // 绘制 Polygon 交互
151 |     drawPolygonEnd(e) {
152 |       // 添加多边形ID
153 |       const id = `polygon_${e.feature.ol_uid}`
154 |       e.feature.setId(id)
155 |       this.featureIds = {
156 |         ...this.featureIds,
157 |         ...{
158 |           [id]: {
159 |             area: Math.round(e.feature.getGeometry().getArea() * 100) / 100,
160 |           },
161 |         },
162 |       }
163 |       // 获取几何图形中心点
164 |       const flatCoordinates = e.feature.getGeometry().getInteriorPoint().flatCoordinates
165 |       const centerPoint = [flatCoordinates[0], flatCoordinates[1]] // 几何图形中心点
166 | 
167 |       this.$nextTick(() => {
168 |         this.getOverayDelete(id, centerPoint)
169 |       })
170 |     },
171 |     // 修改交互
172 |     modifyEnd(e) {
173 |       const feature = e.features.getArray()[0]
174 |       const id = feature.getId()
175 |       // 获取几何图形中心点
176 |       const flatCoordinates = feature.getGeometry().getInteriorPoint().flatCoordinates
177 |       const centerPoint = [flatCoordinates[0], flatCoordinates[1]] // 几何图形中心点
178 |       this.featureIds[id] = {
179 |         area: Math.round(feature.getGeometry().getArea() * 100) / 100,
180 |       }
181 |       // 重新设置overlay定位
182 |       this.map.getOverlayById(id).setPosition(centerPoint)
183 |     },
184 |     getOverayDelete(id, position) {
185 |       const overlay = new Overlay({
186 |         id,
187 |         element: document.getElementById(id),
188 |         position,
189 |         positioning: 'right-center',
190 |         stopEvent: true,
191 |       })
192 |       this.map.addOverlay(overlay)
193 |     },
194 |     // 删除多边形
195 |     handleDelete(id) {
196 |       // 清除多边形
197 |       const polygonFeature = this.vectorSource.getFeatureById(id)
198 |       this.vectorSource.removeFeature(polygonFeature)
199 |       // 清除Overlay
200 |       const overlay = this.map.getOverlayById(id)
201 |       this.map.removeOverlay(overlay)
202 |       // 删除该条线的 featureIds
203 |       const featureIds = { ...this.featureIds }
204 |       delete featureIds[id]
205 |       this.featureIds = featureIds
206 |     },
207 |   },
208 | }
209 | </script>
210 | <style lang="scss" scoped>
211 | .delete {
212 |   width: max-content;
213 |   min-width: 100px;
214 |   background: #fff;
215 |   color: #333;
216 |   position: absolute;
217 |   height: 22px;
218 |   line-height: 22px;
219 |   .delete-btn {
220 |     display: inline-block;
221 |     width: 30px;
222 |     text-align: center;
223 |     background: crimson;
224 |     color: #fff;
225 |   }
226 |   .text {
227 |     padding: 0 10px;
228 |   }
229 | }
230 | </style>


--------------------------------------------------------------------------------
/src/pages/Animation/TrackPlayback.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="map" ref="map" class="map-container"></div>
  3 | </template>
  4 | 
  5 | <script>
  6 | import resizeMixin from "@/mixins/resizeMixin";
  7 | import "ol/ol.css";
  8 | import Map from "ol/Map";
  9 | import OSM from "ol/source/OSM";
 10 | import TileLayer from "ol/layer/Tile";
 11 | import View from "ol/View";
 12 | import Feature from "ol/Feature";
 13 | import { LineString, Point } from "ol/geom";
 14 | import { Style, Stroke, Circle, Fill, Text } from "ol/style";
 15 | import VectorLayer from "ol/layer/Vector";
 16 | import VectorSource from "ol/source/Vector";
 17 | import { getVectorContext } from "ol/render";
 18 | export default {
 19 |   name: "TrackPlayback", // 轨迹回放
 20 |   mixins: [resizeMixin],
 21 |   data() {
 22 |     return {
 23 |       map: null,
 24 |       vectorLayer: null,
 25 |       moveFeature: null,
 26 |       trackObj: [
 27 |         { coordinate: [13382758.600105051, 3529634.5145874037], speed: 1.2 },
 28 |         { coordinate: [13383231.554217564, 3529644.0692159394], speed: 1.3 },
 29 |         { coordinate: [13383393.98290267, 3529648.846530207], speed: 1.1 },
 30 |         { coordinate: [13383475.197245223, 3529687.06504435], speed: 0.6 },
 31 |         { coordinate: [13383532.525016438, 3529734.838187028], speed: 1.4 },
 32 |         { coordinate: [13383575.520844849, 3529820.829843849], speed: 1.2 },
 33 |         { coordinate: [13383651.957873134, 3529892.489557866], speed: 1.3 },
 34 |         { coordinate: [13383752.281472757, 3529949.81732908], speed: 1.3 },
 35 |         { coordinate: [13383905.155529328, 3530007.145100294], speed: 1.2 },
 36 |         { coordinate: [13384024.588386023, 3530016.69972883], speed: 1.0 },
 37 |         { coordinate: [13384191.794385398, 3530026.2543573654], speed: 1.5 },
 38 |         { coordinate: [13384411.550841717, 3530035.808985901], speed: 1.8 },
 39 |         { coordinate: [13384636.084612304, 3530097.9140713825], speed: 1.6 },
 40 |         { coordinate: [13384841.509125821, 3530193.460356739], speed: 1.7 },
 41 |         { coordinate: [13384960.941982517, 3530284.2293278277], speed: 1.2 },
 42 |         { coordinate: [13385118.593353355, 3530379.775613184], speed: 1.4 },
 43 |         { coordinate: [13385261.91278139, 3530503.9857841474], speed: 1.8 },
 44 |         { coordinate: [13385419.564152228, 3530585.2001267006], speed: 1.1 },
 45 |         { coordinate: [13385591.54746587, 3530661.6371549857], speed: 1.0 },
 46 |         { coordinate: [13385878.186321938, 3530742.851497539], speed: 2.0 },
 47 |         { coordinate: [13386174.379806545, 3530809.7338972883], speed: 1.9 },
 48 |         { coordinate: [13386461.018662613, 3530881.393611306], speed: 1.6 },
 49 |         { coordinate: [13386699.884376004, 3530723.7422404676], speed: 1.7 },
 50 |         { coordinate: [13386852.758432575, 3530609.08669804], speed: 1.3 },
 51 |         { coordinate: [13386967.413975002, 3530403.6621845234], speed: 1.6 },
 52 |         { coordinate: [13387005.632489145, 3530226.901556614], speed: 1.8 },
 53 |         { coordinate: [13387010.409803413, 3530083.5821285793], speed: 1.5 },
 54 |         { coordinate: [13386981.745917806, 3529964.1492718835], speed: 1.7 },
 55 |         { coordinate: [13386890.976946717, 3529844.716415188], speed: 1.9 },
 56 |         { coordinate: [13386790.653347094, 3529706.1743014213], speed: 1.4 },
 57 |         { coordinate: [13386633.001976255, 3529591.518758993], speed: 1.2 },
 58 |         { coordinate: [13386451.464034079, 3529510.3044164404], speed: 1.4 },
 59 |         { coordinate: [13386040.615007045, 3529639.2919016713], speed: 1.6 },
 60 |         { coordinate: [13385796.971979385, 3529706.1743014213], speed: 1.5 },
 61 |         { coordinate: [13385534.219694655, 3529782.6113297064], speed: 1.7 },
 62 |         { coordinate: [13385333.572495406, 3529935.4853862766], speed: 1.9 },
 63 |         { coordinate: [13385319.240552604, 3530193.460356739], speed: 1.1 },
 64 |         { coordinate: [13385118.593353355, 3530437.103384398], speed: 1.8 },
 65 |         { coordinate: [13384793.735983143, 3530599.5320695043], speed: 1.3 },
 66 |         { coordinate: [13384363.777699038, 3530747.6288118064], speed: 1.7 },
 67 |       ],
 68 |       lastTime: Date.now(),
 69 |       speed: 100,
 70 |       distance: 0,
 71 |     };
 72 |   },
 73 |   mounted() {
 74 |     this.initMap();
 75 |   },
 76 |   beforeDestroy() {
 77 |     // 组件销毁时要清掉监听 不然会一直运行 导致内存泄漏
 78 |     this.vectorLayer.un("postrender", this.animation);
 79 |   },
 80 |   methods: {
 81 |     initMap() {
 82 |       this.map = new Map({
 83 |         target: "map",
 84 |         layers: [
 85 |           new TileLayer({
 86 |             source: new OSM(),
 87 |           }),
 88 |         ],
 89 |         view: new View({
 90 |           center: [13384755.517469, 3529894.878215],
 91 |           zoom: 15,
 92 |         }),
 93 |       });
 94 |       const points = this.trackObj.map((item) => item.coordinate);
 95 |       this.vectorLayer = this.getVector(points);
 96 |       this.map.addLayer(this.vectorLayer);
 97 | 
 98 |       this.vectorLayer.on("postrender", this.animation);
 99 |     },
100 |     getVector(linePoints) {
101 |       const lineFeature = new Feature({
102 |         geometry: new LineString(linePoints),
103 |         style: new Style({
104 |           stroke: new Stroke({
105 |             color: "red",
106 |             // lineDash: [7, 10],
107 |             width: 5,
108 |           }),
109 |         }),
110 |       });
111 |       const moveGeom = new Point(linePoints[0]);
112 |       this.moveFeature = new Feature({
113 |         geometry: moveGeom,
114 |         style: new Style({
115 |           image: new Circle({
116 |             radius: 5,
117 |             fill: new Fill({
118 |               color: "blue",
119 |             }),
120 |           }),
121 |           text: new Text({
122 |             text: `targetId: 12`,
123 |             fill: new Fill({
124 |               color: "#fff",
125 |             }),
126 |             backgroundFill: new Fill({
127 |               color: "rgba(43,91,87,0.60)",
128 |             }),
129 |             backgroundStroke: new Stroke({
130 |               color: "#7bb0b5",
131 |             }),
132 |             padding: [5, 6, 5, 6],
133 |             offsetX: 6,
134 |             offsetY: -18,
135 |             textAlign: "start",
136 |             placement: "point",
137 |           }),
138 |         }),
139 |       });
140 | 
141 |       const vectorLayer = new VectorLayer({
142 |         style: function (feature) {
143 |           return feature.get("style");
144 |         },
145 |         source: new VectorSource({ features: [lineFeature, this.moveFeature] }),
146 |       });
147 |       return vectorLayer;
148 |     },
149 |     animation(event) {
150 |       const time = event.frameState.time;
151 |       const elapsedTime = time - this.lastTime;
152 | 
153 |       this.distance = (this.distance + (this.speed * elapsedTime) / 1e6) % 2;
154 |       this.lastTime = time;
155 |       const currentCoordinate = new LineString(
156 |         this.trackObj.map((item) => item.coordinate)
157 |       ).getCoordinateAt(this.distance > 1 ? this.distance - 1 : this.distance);
158 | 
159 |       // const position = this.moveFeature.getGeometry().clone();
160 |       this.moveFeature.getGeometry().setCoordinates(currentCoordinate);
161 | 
162 |       const vectorContext = getVectorContext(event);
163 |       vectorContext.setStyle(
164 |         new Style({
165 |           image: new Circle({
166 |             radius: 5,
167 |             fill: new Fill({
168 |               color: "black",
169 |             }),
170 |           }),
171 |           text: new Text({
172 |             text: `targetId: 12`,
173 |             fill: new Fill({
174 |               color: "black",
175 |             }),
176 |             backgroundFill: new Fill({
177 |               color: "red",
178 |             }),
179 |             // backgroundStroke: new Stroke({
180 |             //   color: "#7bb0b5",
181 |             // }),
182 |             padding: [5, 6, 5, 6],
183 |             offsetX: -18,
184 |             offsetY: -18,
185 |             textAlign: "start",
186 |             placement: "point",
187 |           }),
188 |         })
189 |       );
190 |       // vectorContext.drawGeometry(position);
191 |       this.map.render();
192 |     },
193 |   },
194 | };
195 | </script>
196 | 
197 | <style>
198 | </style>


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/src/pages/Animation/TrackLine.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="map" ref="map" class="map-container"></div>
  3 | </template>
  4 | 
  5 | <script>
  6 | import resizeMixin from "@/mixins/resizeMixin";
  7 | import "ol/ol.css";
  8 | import Map from "ol/Map";
  9 | import OSM from "ol/source/OSM";
 10 | import TileLayer from "ol/layer/Tile";
 11 | import View from "ol/View";
 12 | import Feature from "ol/Feature";
 13 | import { LineString, Polygon, Point } from "ol/geom";
 14 | import { Style, Stroke, Fill, Circle, Text } from "ol/style";
 15 | import VectorLayer from "ol/layer/Vector";
 16 | import VectorSource from "ol/source/Vector";
 17 | import { getVectorContext } from "ol/render";
 18 | import { easeOut } from "ol/easing";
 19 | export default {
 20 |   name: "TrackLine", // 轨迹线
 21 |   mixins: [resizeMixin],
 22 |   data() {
 23 |     return {
 24 |       map: null,
 25 |       speed: 300,
 26 |       trackObj: [
 27 |         { coordinate: [13382758.600105051, 3529634.5145874037], speed: 1.2 },
 28 |         { coordinate: [13383231.554217564, 3529644.0692159394], speed: 1.3 },
 29 |         { coordinate: [13383393.98290267, 3529648.846530207], speed: 1.1 },
 30 |         { coordinate: [13383475.197245223, 3529687.06504435], speed: 0.6 },
 31 |         { coordinate: [13383532.525016438, 3529734.838187028], speed: 1.4 },
 32 |         { coordinate: [13383575.520844849, 3529820.829843849], speed: 1.2 },
 33 |         { coordinate: [13383651.957873134, 3529892.489557866], speed: 1.3 },
 34 |         { coordinate: [13383752.281472757, 3529949.81732908], speed: 1.3 },
 35 |         { coordinate: [13383905.155529328, 3530007.145100294], speed: 1.2 },
 36 |         { coordinate: [13384024.588386023, 3530016.69972883], speed: 1.0 },
 37 |         { coordinate: [13384191.794385398, 3530026.2543573654], speed: 1.5 },
 38 |         { coordinate: [13384411.550841717, 3530035.808985901], speed: 1.8 },
 39 |         { coordinate: [13384636.084612304, 3530097.9140713825], speed: 1.6 },
 40 |         { coordinate: [13384841.509125821, 3530193.460356739], speed: 1.7 },
 41 |         { coordinate: [13384960.941982517, 3530284.2293278277], speed: 1.2 },
 42 |         { coordinate: [13385118.593353355, 3530379.775613184], speed: 1.4 },
 43 |         { coordinate: [13385261.91278139, 3530503.9857841474], speed: 1.8 },
 44 |         { coordinate: [13385419.564152228, 3530585.2001267006], speed: 1.1 },
 45 |         { coordinate: [13385591.54746587, 3530661.6371549857], speed: 1.0 },
 46 |         { coordinate: [13385878.186321938, 3530742.851497539], speed: 2.0 },
 47 |         { coordinate: [13386174.379806545, 3530809.7338972883], speed: 1.9 },
 48 |         { coordinate: [13386461.018662613, 3530881.393611306], speed: 1.6 },
 49 |         { coordinate: [13386699.884376004, 3530723.7422404676], speed: 1.7 },
 50 |         { coordinate: [13386852.758432575, 3530609.08669804], speed: 1.3 },
 51 |         { coordinate: [13386967.413975002, 3530403.6621845234], speed: 1.6 },
 52 |         { coordinate: [13387005.632489145, 3530226.901556614], speed: 1.8 },
 53 |         { coordinate: [13387010.409803413, 3530083.5821285793], speed: 1.5 },
 54 |         { coordinate: [13386981.745917806, 3529964.1492718835], speed: 1.7 },
 55 |         { coordinate: [13386890.976946717, 3529844.716415188], speed: 1.9 },
 56 |         { coordinate: [13386790.653347094, 3529706.1743014213], speed: 1.4 },
 57 |         { coordinate: [13386633.001976255, 3529591.518758993], speed: 1.2 },
 58 |         { coordinate: [13386451.464034079, 3529510.3044164404], speed: 1.4 },
 59 |         { coordinate: [13386040.615007045, 3529639.2919016713], speed: 1.6 },
 60 |         { coordinate: [13385796.971979385, 3529706.1743014213], speed: 1.5 },
 61 |         { coordinate: [13385534.219694655, 3529782.6113297064], speed: 1.7 },
 62 |         { coordinate: [13385333.572495406, 3529935.4853862766], speed: 1.9 },
 63 |         { coordinate: [13385319.240552604, 3530193.460356739], speed: 1.1 },
 64 |         { coordinate: [13385118.593353355, 3530437.103384398], speed: 1.8 },
 65 |         { coordinate: [13384793.735983143, 3530599.5320695043], speed: 1.3 },
 66 |         { coordinate: [13384363.777699038, 3530747.6288118064], speed: 1.7 },
 67 |       ],
 68 |       length: 10,
 69 |       trackLayer: null,
 70 |       start: Date.now(),
 71 |       timer: null,
 72 |     };
 73 |   },
 74 |   computed: {
 75 |     trackData() {
 76 |       return this.trackObj.slice(0, this.length);
 77 |     },
 78 |   },
 79 |   mounted() {
 80 |     this.initMap();
 81 |     this.timer = setInterval(() => {
 82 |       if (this.length < 40) {
 83 |         this.length++;
 84 |       } else {
 85 |         this.length = 2;
 86 |       }
 87 |     }, 500);
 88 |   },
 89 |   watch: {
 90 |     trackData(newValue) {
 91 |       if (this.trackLayer) {
 92 |         this.trackLayer.un("postrender", this.animation);
 93 |         this.map.removeLayer(this.trackLayer);
 94 |         this.trackLayer = null;
 95 |         this.trackLayer = this.drawTrack(newValue);
 96 |         this.map.addLayer(this.trackLayer);
 97 | 
 98 |         this.trackLayer.on("postrender", this.animation);
 99 |       }
100 |     },
101 |   },
102 |   beforeDestroy() {
103 |     if (this.trackLayer) {
104 |       // 及时取消监听
105 |       this.trackLayer.un("postrender", this.animation);
106 |     }
107 |     if (this.timer) {
108 |       clearInterval(this.timer);
109 |       this.timer = null;
110 |     }
111 |   },
112 |   methods: {
113 |     initMap() {
114 |       this.map = new Map({
115 |         target: "map",
116 |         layers: [
117 |           new TileLayer({
118 |             source: new OSM(),
119 |           }),
120 |         ],
121 |         view: new View({
122 |           center: [13384755.517469, 3529894.878215],
123 |           zoom: 15,
124 |         }),
125 |       });
126 |       this.trackLayer = this.drawTrack(this.trackData);
127 |       this.map.addLayer(this.trackLayer);
128 | 
129 |       this.trackLayer.on("postrender", this.animation);
130 | 
131 |       this.map.on("singleclick", (event) => {
132 |         const coordinate = event.coordinate; // 获取经纬度
133 |         console.log(coordinate);
134 |       });
135 |     },
136 |     drawTrack(trackObj) {
137 |       // 获取轨迹的点
138 |       const linePoints = trackObj.map((item) => item.coordinate);
139 |       const length = linePoints.length;
140 |       // 绘制轨迹线
141 |       const lineFeature = new Feature({
142 |         geometry: new LineString(linePoints),
143 |         style: new Style({
144 |           stroke: new Stroke({
145 |             color: "red",
146 |             lineDash: [7, 10],
147 |             width: 2,
148 |           }),
149 |         }),
150 |       });
151 | 
152 |       // 绘制轨迹箭头
153 |       const arrorPoints = this.getArrowPoints(linePoints);
154 |       const arrowFeature = new Feature({
155 |         geometry: new Polygon([arrorPoints]),
156 |         style: new Style({
157 |           fill: new Fill({
158 |             color: "red",
159 |           }),
160 |         }),
161 |       });
162 | 
163 |       // 绘制轨迹末端速度框
164 |       const textFeature = new Feature({
165 |         geometry: new Point(linePoints[length - 1]),
166 |         style: new Style({
167 |           text: new Text({
168 |             text: `${trackObj[length - 1].speed} m/s`,
169 |             fill: new Fill({
170 |               color: "#fff",
171 |             }),
172 |             backgroundFill: new Fill({
173 |               color: "rgba(43,91,87,0.60)",
174 |             }),
175 |             backgroundStroke: new Stroke({
176 |               color: "#7bb0b5",
177 |             }),
178 |             padding: [5, 6, 5, 6],
179 |             offsetX: -18,
180 |             offsetY: -18,
181 |             textAlign: "start",
182 |             placement: "point",
183 |           }),
184 |         }),
185 |       });
186 | 
187 |       return new VectorLayer({
188 |         style: function (feature) {
189 |           return feature.get("style"); // 注意与方法1的区别
190 |         },
191 |         source: new VectorSource({
192 |           features: [lineFeature, arrowFeature, textFeature],
193 |         }),
194 |       });
195 |     },
196 |     getArrowPoints(linePoints) {
197 |       const headlen = 66; // 箭头斜边大小
198 |       const theta = 20; // 箭头一边与直线的夹角
199 |       const lineLength = linePoints.length;
200 |       // 获取line的最后两个坐标点
201 |       const p1 = linePoints[lineLength - 2];
202 |       const p2 = linePoints[lineLength - 1];
203 |       // 计算角度
204 |       const angle = (Math.atan2(p2[1] - p1[1], p2[0] - p1[0]) * 180) / Math.PI;
205 | 
206 |       const p3 = []; // p3
207 |       const p4 = []; // p4
208 | 
209 |       p3[0] = p2[0] - Math.cos(((angle + theta) * Math.PI) / 180) * headlen; // P3对应的X坐标
210 |       p3[1] = p2[1] - Math.sin(((angle + theta) * Math.PI) / 180) * headlen; // P3对应的Y坐标
211 | 
212 |       p4[0] = p2[0] - Math.cos(((angle - theta) * Math.PI) / 180) * headlen; // P4对应的X坐标
213 |       p4[1] = p2[1] - Math.sin(((angle - theta) * Math.PI) / 180) * headlen; // P4对应的Y坐标
214 | 
215 |       return [p2, p3, p4, p2];
216 |     },
217 |     animation(event) {
218 |       const vectorContext = getVectorContext(event);
219 |       const frameState = event.frameState;
220 |       const elapsed = frameState.time - this.start;
221 |       let radius = 10;
222 |       let opcatity = 0.5;
223 | 
224 |       if (elapsed > this.speed) {
225 |         radius = 10;
226 |         opcatity = 0.5;
227 |         this.start = Date.now();
228 |       } else {
229 |         radius = easeOut(elapsed / this.speed) * 10;
230 |         opcatity = opcatity * easeOut(1 - elapsed / this.speed);
231 |       }
232 | 
233 |       vectorContext.setStyle(
234 |         new Style({
235 |           image: new Circle({
236 |             radius,
237 |             fill: new Fill({
238 |               color: `rgba(255,0,0,${opcatity})`,
239 |             }),
240 |           }),
241 |         })
242 |       );
243 | 
244 |       const geom = new Point(this.trackData[this.length - 1].coordinate);
245 | 
246 |       vectorContext.drawGeometry(geom);
247 |       this.map.render();
248 |     },
249 |   },
250 | };
251 | </script>
252 | 
253 | <style>
254 | </style>


--------------------------------------------------------------------------------
/src/pages/Interaction/MeasureDistance.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="map-box">
  3 |     <div id="map" ref="map" class="map-container"></div>
  4 |     <div :id="key" v-for="(item, key) in featureIds" :key="key" class="delete">
  5 |       <span class="delete-btn">
  6 |         <a-icon type="delete" @click="handleDelete(item, key)" />
  7 |       </span>
  8 |       <span class="text"> 总长: {{ item[item.length - 1].length }} m </span>
  9 |     </div>
 10 |   </div>
 11 | </template>
 12 | 
 13 | <script>
 14 | import resizeMixin from "@/mixins/resizeMixin"; // 监听地图容器大小变化,调用 map.updateSize() 方法使地图撑满容器
 15 | import "ol/ol.css";
 16 | import Map from "ol/Map";
 17 | import OSM from "ol/source/OSM";
 18 | import TileLayer from "ol/layer/Tile";
 19 | import View from "ol/View";
 20 | import VectorLayer from "ol/layer/Vector";
 21 | import VectorSource from "ol/source/Vector";
 22 | import { Fill, Stroke, Style, Text } from "ol/style";
 23 | import CircleStyle from "ol/style/Circle";
 24 | import { Draw, Modify, Snap } from "ol/interaction";
 25 | // import Feature from "ol/Feature";
 26 | import { LineString, Point } from "ol/geom";
 27 | import Overlay from "ol/Overlay";
 28 | import Feature from "ol/Feature";
 29 | export default {
 30 |   name: "MeasureDistance", // 测距
 31 |   mixins: [resizeMixin],
 32 |   data() {
 33 |     return {
 34 |       map: null,
 35 |       vectorLayer: null,
 36 |       vectorSource: null,
 37 |       drawLineString: null,
 38 |       drawPoint: null,
 39 |       snap: null,
 40 |       modify: null,
 41 |       featureIds: {},
 42 |       points: [],
 43 |       pointId: [],
 44 |     };
 45 |   },
 46 |   mounted() {
 47 |     this.initMap();
 48 |   },
 49 |   beforeDestroy() {
 50 |     // 卸载监听
 51 |     this.drawPoint && this.drawPoint.un("drawend", this.drawPointEnd);
 52 |     this.drawLineString &&
 53 |       this.drawLineString.un("drawend", this.drawLineStringEnd);
 54 |     this.modify && this.modify.un("modifyend", this.modifyEnd);
 55 |   },
 56 |   methods: {
 57 |     initMap() {
 58 |       // 先准备一个绘制的矢量图层
 59 |       const { vectorLayer, vectorSource } = this.getVectorLayer();
 60 |       this.vectorLayer = vectorLayer;
 61 |       this.vectorSource = vectorSource;
 62 |       this.map = new Map({
 63 |         target: "map",
 64 |         layers: [
 65 |           new TileLayer({
 66 |             source: new OSM(),
 67 |           }),
 68 |           vectorLayer,
 69 |         ],
 70 |         view: new View({
 71 |           center: [13384755.517469, 3529894.878215],
 72 |           zoom: 15,
 73 |         }),
 74 |         controls: [],
 75 |       });
 76 |       // 添加交互
 77 |       this.addInteractions(vectorSource);
 78 |     },
 79 |     getVectorLayer() {
 80 |       const vectorSource = new VectorSource();
 81 | 
 82 |       const vectorLayer = new VectorLayer({
 83 |         source: vectorSource,
 84 |         style: new Style({
 85 |           fill: new Fill({
 86 |             color: "rgba(255, 255, 255, 0.2)",
 87 |           }),
 88 |           stroke: new Stroke({
 89 |             color: "red",
 90 |             width: 2,
 91 |           }),
 92 |           image: new CircleStyle({
 93 |             radius: 5,
 94 |             fill: new Fill({
 95 |               color: "#fff",
 96 |             }),
 97 |             stroke: new Stroke({
 98 |               color: "red",
 99 |               width: 2,
100 |             }),
101 |           }),
102 |         }),
103 |       });
104 | 
105 |       return {
106 |         vectorLayer,
107 |         vectorSource,
108 |       };
109 |     },
110 |     addInteractions(source) {
111 |       // 捕捉
112 |       this.snap = new Snap({ source });
113 |       // 修改
114 |       this.modify = new Modify({ source });
115 |       // 绘制线
116 |       this.drawLineString = new Draw({
117 |         source,
118 |         type: "LineString",
119 |         id: "draw-LineString",
120 |       });
121 |       // 绘制点
122 |       this.drawPoint = new Draw({
123 |         source,
124 |         type: "Point",
125 |       });
126 | 
127 |       this.map.addInteraction(this.modify);
128 |       this.map.addInteraction(this.snap);
129 |       this.map.addInteraction(this.drawLineString);
130 |       this.map.addInteraction(this.drawPoint);
131 | 
132 |       // setTimeout(() => {
133 |       //   // 移除交互
134 |       //   this.map.removeInteraction(this.modify);
135 |       //   this.map.removeInteraction(this.snap);
136 |       //   this.map.removeInteraction(this.drawLineString);
137 |       //   this.map.removeInteraction(this.drawPoint);
138 | 
139 |       //   this.drawPoint.un("drawend", this.drawPointEnd);
140 |       //   this.drawLineString.un("drawend", this.drawLineStringEnd);
141 |       //   this.modify.un("modifyend", this.modifyEnd);
142 |       // }, 10000);
143 | 
144 |       this.drawPoint.on("drawend", this.drawPointEnd);
145 |       this.drawLineString.on("drawend", this.drawLineStringEnd);
146 |       this.modify.on("modifyend", this.modifyEnd);
147 |     },
148 |     // 绘制 point 交互
149 |     drawPointEnd(e) {
150 |       const point = e.feature.getGeometry().getCoordinates();
151 |       const index = this.points.findIndex(
152 |         (item) => item[0] === point[0] && item[1] === point[1]
153 |       );
154 |       if (index === -1) {
155 |         this.points.push(point);
156 |       }
157 |       // 线段长度
158 |       const length =
159 |         Math.round(new LineString(this.points).getLength() * 100) / 100;
160 |       // 添加点ID
161 |       const id = `point_${e.feature.ol_uid}`;
162 |       e.feature.setId(id);
163 | 
164 |       if (!this.pointId.includes(id)) {
165 |         this.pointId.push({
166 |           id,
167 |           length,
168 |         });
169 |       }
170 | 
171 |       e.feature.setStyle(this.getPointStyle(length));
172 |     },
173 |     // 绘制 lineString 交互
174 |     drawLineStringEnd(e) {
175 |       // 由于绘制线结束时需要点击两下,所以最后会绘制两个点,这里需要删除其中一个
176 |       const lastPointId = this.pointId.slice(-1)[0].id;
177 |       const lastPointFeature = this.vectorSource.getFeatureById(lastPointId);
178 |       this.vectorSource.removeFeature(lastPointFeature);
179 |       this.pointId.pop();
180 | 
181 |       // 添加线ID
182 |       const id = `line_${e.feature.ol_uid}`;
183 |       e.feature.setId(id);
184 | 
185 |       this.featureIds = { ...this.featureIds, ...{ [id]: this.pointId } };
186 |       this.points = []; // 用完要清空
187 |       this.pointId = []; // 用完要清空
188 |       this.$nextTick(() => {
189 |         this.getOverayDelete(id, e.feature.getGeometry().getLastCoordinate());
190 |       });
191 |     },
192 |     // 修改交互
193 |     modifyEnd(e) {
194 |       e.features.forEach((feature) => {
195 |         if (feature.getGeometry() instanceof LineString) {
196 |           const id = feature.getId();
197 |           this.featureIds[id].map((item) => {
198 |             // 清除线上的点
199 |             const feature = this.vectorSource.getFeatureById(item.id);
200 |             this.vectorSource.removeFeature(feature);
201 |           });
202 |           const pointFeatures = feature
203 |             .getGeometry()
204 |             .getCoordinates()
205 |             .map((item) => {
206 |               this.points.push(item);
207 |               const pointFeature = new Feature({
208 |                 geometry: new Point(item),
209 |               });
210 |               // 线段长度
211 |               const length =
212 |                 Math.round(new LineString(this.points).getLength() * 100) / 100;
213 |               // 添加点ID
214 |               const id = `point_${pointFeature.ol_uid}`;
215 |               pointFeature.setId(id);
216 |               this.pointId.push({
217 |                 id,
218 |                 length,
219 |               });
220 |               pointFeature.setStyle(this.getPointStyle(length));
221 | 
222 |               return pointFeature;
223 |             });
224 | 
225 |           this.vectorSource.addFeatures(pointFeatures);
226 |           this.featureIds[id] = [...this.pointId];
227 |           this.points = []; // 用完要清空
228 |           this.pointId = []; // 用完要清空
229 |         }
230 |       });
231 |     },
232 |     getOverayDelete(id, position) {
233 |       const overlay = new Overlay({
234 |         id,
235 |         element: document.getElementById(id),
236 |         position,
237 |         positioning: "right-center",
238 |         stopEvent: true,
239 |       });
240 |       this.map.addOverlay(overlay);
241 |     },
242 |     // 删除绘制的线
243 |     handleDelete(pointId, id) {
244 |       // 清除线
245 |       const lineFeature = this.vectorSource.getFeatureById(id);
246 |       this.vectorSource.removeFeature(lineFeature);
247 |       // 清除Overlay
248 |       const overlay = this.map.getOverlayById(id);
249 |       this.map.removeOverlay(overlay);
250 |       // 清除线上的点
251 |       pointId.map((item) => {
252 |         const feature = this.vectorSource.getFeatureById(item.id);
253 |         this.vectorSource.removeFeature(feature);
254 |       });
255 |       // 删除该条线的 featureIds
256 |       const featureIds = { ...this.featureIds };
257 |       delete featureIds[id];
258 |       this.featureIds = featureIds;
259 |     },
260 |     // 点样式
261 |     getPointStyle(length) {
262 |       return new Style({
263 |         image: new CircleStyle({
264 |           radius: 5,
265 |           fill: new Fill({
266 |             color: "#fff",
267 |           }),
268 |           stroke: new Stroke({
269 |             color: "red",
270 |             width: 2,
271 |           }),
272 |         }),
273 |         text: new Text({
274 |           text: length > 0 ? `${String(length)} m` : "起点",
275 |           color: "#333",
276 |           offsetY: -15,
277 |           backgroundFill: new Fill({
278 |             color: "rgba(255,255,255,0.8)",
279 |           }),
280 |         }),
281 |       });
282 |     },
283 |   },
284 | };
285 | </script>
286 | <style lang="scss" scoped>
287 | .delete {
288 |   width: max-content;
289 |   min-width: 100px;
290 |   background: #fff;
291 |   color: #333;
292 |   position: absolute;
293 |   height: 22px;
294 |   line-height: 22px;
295 |   .delete-btn {
296 |     display: inline-block;
297 |     width: 30px;
298 |     text-align: center;
299 |     background: crimson;
300 |     color: #fff;
301 |   }
302 |   .text {
303 |     padding: 0 10px;
304 |   }
305 | }
306 | </style>


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/src/pages/Interaction/ShowTrackInfo.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="map-box">
  3 |     <div id="map" ref="map" class="map-container"></div>
  4 |     <div id="popover" ref="popover">
  5 |       <a-icon class="popover-close" type="close" @click="handleClosePopover" />
  6 |       <p>目标轨迹：</p>
  7 |       <span>速度：{{ TrackSpeed }} m/s</span>
  8 |     </div>
  9 |   </div>
 10 | </template>
 11 | 
 12 | <script>
 13 | import resizeMixin from "@/mixins/resizeMixin";
 14 | import "ol/ol.css";
 15 | import Map from "ol/Map";
 16 | import OSM from "ol/source/OSM";
 17 | import TileLayer from "ol/layer/Tile";
 18 | import View from "ol/View";
 19 | import Feature from "ol/Feature";
 20 | import { LineString, Polygon, Point } from "ol/geom";
 21 | import { Style, Stroke, Fill, Circle } from "ol/style";
 22 | import VectorLayer from "ol/layer/Vector";
 23 | import VectorSource from "ol/source/Vector";
 24 | import { getVectorContext } from "ol/render";
 25 | import { easeOut } from "ol/easing";
 26 | import { Select, Pointer } from "ol/interaction";
 27 | import { singleClick } from "ol/events/condition";
 28 | import Overlay from "ol/Overlay";
 29 | export default {
 30 |   name: "ShowTrackInfo", // 点击轨迹显示轨迹信息
 31 |   mixins: [resizeMixin],
 32 |   data() {
 33 |     return {
 34 |       map: null,
 35 |       speed: 300,
 36 |       trackObj: [
 37 |         { coordinate: [13382758.600105051, 3529634.5145874037], speed: 1.2 },
 38 |         { coordinate: [13383231.554217564, 3529644.0692159394], speed: 1.3 },
 39 |         { coordinate: [13383393.98290267, 3529648.846530207], speed: 1.1 },
 40 |         { coordinate: [13383475.197245223, 3529687.06504435], speed: 0.6 },
 41 |         { coordinate: [13383532.525016438, 3529734.838187028], speed: 1.4 },
 42 |         { coordinate: [13383575.520844849, 3529820.829843849], speed: 1.2 },
 43 |         { coordinate: [13383651.957873134, 3529892.489557866], speed: 1.3 },
 44 |         { coordinate: [13383752.281472757, 3529949.81732908], speed: 1.3 },
 45 |         { coordinate: [13383905.155529328, 3530007.145100294], speed: 1.2 },
 46 |         { coordinate: [13384024.588386023, 3530016.69972883], speed: 1.0 },
 47 |         { coordinate: [13384191.794385398, 3530026.2543573654], speed: 1.5 },
 48 |         { coordinate: [13384411.550841717, 3530035.808985901], speed: 1.8 },
 49 |         { coordinate: [13384636.084612304, 3530097.9140713825], speed: 1.6 },
 50 |         { coordinate: [13384841.509125821, 3530193.460356739], speed: 1.7 },
 51 |         { coordinate: [13384960.941982517, 3530284.2293278277], speed: 1.2 },
 52 |         { coordinate: [13385118.593353355, 3530379.775613184], speed: 1.4 },
 53 |         { coordinate: [13385261.91278139, 3530503.9857841474], speed: 1.8 },
 54 |         { coordinate: [13385419.564152228, 3530585.2001267006], speed: 1.1 },
 55 |         { coordinate: [13385591.54746587, 3530661.6371549857], speed: 1.0 },
 56 |         { coordinate: [13385878.186321938, 3530742.851497539], speed: 2.0 },
 57 |         { coordinate: [13386174.379806545, 3530809.7338972883], speed: 1.9 },
 58 |         { coordinate: [13386461.018662613, 3530881.393611306], speed: 1.6 },
 59 |         { coordinate: [13386699.884376004, 3530723.7422404676], speed: 1.7 },
 60 |         { coordinate: [13386852.758432575, 3530609.08669804], speed: 1.3 },
 61 |         { coordinate: [13386967.413975002, 3530403.6621845234], speed: 1.6 },
 62 |         { coordinate: [13387005.632489145, 3530226.901556614], speed: 1.8 },
 63 |         { coordinate: [13387010.409803413, 3530083.5821285793], speed: 1.5 },
 64 |         { coordinate: [13386981.745917806, 3529964.1492718835], speed: 1.7 },
 65 |         { coordinate: [13386890.976946717, 3529844.716415188], speed: 1.9 },
 66 |         { coordinate: [13386790.653347094, 3529706.1743014213], speed: 1.4 },
 67 |         { coordinate: [13386633.001976255, 3529591.518758993], speed: 1.2 },
 68 |         { coordinate: [13386451.464034079, 3529510.3044164404], speed: 1.4 },
 69 |         { coordinate: [13386040.615007045, 3529639.2919016713], speed: 1.6 },
 70 |         { coordinate: [13385796.971979385, 3529706.1743014213], speed: 1.5 },
 71 |         { coordinate: [13385534.219694655, 3529782.6113297064], speed: 1.7 },
 72 |         { coordinate: [13385333.572495406, 3529935.4853862766], speed: 1.9 },
 73 |         { coordinate: [13385319.240552604, 3530193.460356739], speed: 1.1 },
 74 |         { coordinate: [13385118.593353355, 3530437.103384398], speed: 1.8 },
 75 |         { coordinate: [13384793.735983143, 3530599.5320695043], speed: 1.3 },
 76 |         { coordinate: [13384363.777699038, 3530747.6288118064], speed: 1.7 },
 77 |       ],
 78 |       length: 10,
 79 |       trackLayer: null,
 80 |       infoOverlay: null,
 81 |       start: Date.now(),
 82 |       timer: null,
 83 |       infoVisible: false,
 84 |       TrackSpeed: 0,
 85 |     };
 86 |   },
 87 |   computed: {
 88 |     trackData() {
 89 |       return this.trackObj.slice(0, this.length);
 90 |     },
 91 |   },
 92 |   mounted() {
 93 |     this.initMap();
 94 |     this.timer = setInterval(() => {
 95 |       if (this.length < 40) {
 96 |         this.length++;
 97 |       } else {
 98 |         this.length = 2;
 99 |       }
100 |     }, 500);
101 |   },
102 |   watch: {
103 |     trackData(newValue) {
104 |       if (this.trackLayer) {
105 |         this.trackLayer.un("postrender", this.animation);
106 |         this.map.removeLayer(this.trackLayer);
107 |         this.trackLayer = null;
108 |         this.trackLayer = this.drawTrack(newValue);
109 |         this.map.addLayer(this.trackLayer);
110 | 
111 |         if (this.infoVisible) {
112 |           this.infoOverlay.setPosition(this.trackData.slice(-1)[0].coordinate);
113 |           this.TrackSpeed = this.trackData.slice(-1)[0].speed;
114 |         }
115 | 
116 |         this.trackLayer.on("postrender", this.animation);
117 |       }
118 |     },
119 |   },
120 |   beforeDestroy() {
121 |     if (this.trackLayer) {
122 |       // 及时取消监听
123 |       this.trackLayer.un("postrender", this.animation);
124 |     }
125 |     if (this.timer) {
126 |       clearInterval(this.timer);
127 |       this.timer = null;
128 |     }
129 |   },
130 |   methods: {
131 |     initMap() {
132 |       this.map = new Map({
133 |         target: "map",
134 |         layers: [
135 |           new TileLayer({
136 |             source: new OSM(),
137 |           }),
138 |         ],
139 |         view: new View({
140 |           center: [13384755.517469, 3529894.878215],
141 |           zoom: 15,
142 |         }),
143 |       });
144 |       this.trackLayer = this.drawTrack(this.trackData);
145 |       this.infoOverlay = this.getInfoOverlay();
146 | 
147 |       this.map.addLayer(this.trackLayer);
148 |       this.map.addOverlay(this.infoOverlay);
149 |       // 鼠标样式交互
150 |       const pointerMove = this.changeCursor();
151 |       // 轨迹点击交互
152 |       const trackClick = this.trackLayerClick();
153 |       this.map.addInteraction(pointerMove);
154 |       this.map.addInteraction(trackClick);
155 | 
156 |       this.trackLayer.on("postrender", this.animation);
157 |     },
158 |     drawTrack(trackObj) {
159 |       // 获取轨迹的点
160 |       const linePoints = trackObj.map((item) => item.coordinate);
161 |       // 绘制轨迹线
162 |       const lineFeature = new Feature({
163 |         geometry: new LineString(linePoints),
164 |         style: new Style({
165 |           stroke: new Stroke({
166 |             color: "red",
167 |             lineDash: [7, 10],
168 |             width: 2,
169 |           }),
170 |         }),
171 |       });
172 | 
173 |       // 绘制轨迹箭头
174 |       const arrorPoints = this.getArrowPoints(linePoints);
175 |       const arrowFeature = new Feature({
176 |         geometry: new Polygon([arrorPoints]),
177 |         style: new Style({
178 |           fill: new Fill({
179 |             color: "red",
180 |           }),
181 |         }),
182 |       });
183 | 
184 |       return new VectorLayer({
185 |         style: function (feature) {
186 |           return feature.get("style"); // 注意与方法1的区别
187 |         },
188 |         source: new VectorSource({
189 |           features: [lineFeature, arrowFeature],
190 |         }),
191 |       });
192 |     },
193 |     getInfoOverlay() {
194 |       return new Overlay({
195 |         element: document.getElementById("popover"),
196 |         autoPan: true, // 边缘自动拖拽
197 |         autoPanAnimation: {
198 |           // 拖拽动画
199 |           duration: 250, // 动画时间
200 |         },
201 |       });
202 |     },
203 |     getArrowPoints(linePoints) {
204 |       const headlen = 66; // 箭头斜边大小
205 |       const theta = 20; // 箭头一边与直线的夹角
206 |       const lineLength = linePoints.length;
207 |       // 获取line的最后两个坐标点
208 |       const p1 = linePoints[lineLength - 2];
209 |       const p2 = linePoints[lineLength - 1];
210 |       // 计算角度
211 |       const angle = (Math.atan2(p2[1] - p1[1], p2[0] - p1[0]) * 180) / Math.PI;
212 | 
213 |       const p3 = []; // p3
214 |       const p4 = []; // p4
215 | 
216 |       p3[0] = p2[0] - Math.cos(((angle + theta) * Math.PI) / 180) * headlen; // P3对应的X坐标
217 |       p3[1] = p2[1] - Math.sin(((angle + theta) * Math.PI) / 180) * headlen; // P3对应的Y坐标
218 | 
219 |       p4[0] = p2[0] - Math.cos(((angle - theta) * Math.PI) / 180) * headlen; // P4对应的X坐标
220 |       p4[1] = p2[1] - Math.sin(((angle - theta) * Math.PI) / 180) * headlen; // P4对应的Y坐标
221 | 
222 |       return [p2, p3, p4, p2];
223 |     },
224 |     animation(event) {
225 |       const vectorContext = getVectorContext(event);
226 |       const frameState = event.frameState;
227 |       const elapsed = frameState.time - this.start;
228 |       let radius = 10;
229 |       let opcatity = 0.5;
230 | 
231 |       if (elapsed > this.speed) {
232 |         radius = 10;
233 |         opcatity = 0.5;
234 |         this.start = Date.now();
235 |       } else {
236 |         radius = easeOut(elapsed / this.speed) * 10;
237 |         opcatity = opcatity * easeOut(1 - elapsed / this.speed);
238 |       }
239 | 
240 |       vectorContext.setStyle(
241 |         new Style({
242 |           image: new Circle({
243 |             radius,
244 |             fill: new Fill({
245 |               color: `rgba(255,0,0,${opcatity})`,
246 |             }),
247 |           }),
248 |         })
249 |       );
250 | 
251 |       const geom = new Point(this.trackData[this.length - 1].coordinate);
252 | 
253 |       vectorContext.drawGeometry(geom);
254 |       this.map.render();
255 |     },
256 |     trackLayerClick() {
257 |       const _this = this;
258 |       return new Select({
259 |         layers: [_this.trackLayer],
260 |         condition: singleClick,
261 |         style: 'falsey',
262 |         toggleCondition: function (e) {
263 |           let feature = _this.map.forEachFeatureAtPixel(
264 |             e.pixel,
265 |             (feature) => {
266 |               return feature;
267 |             },
268 |             {
269 |               hitTolerance: 0,
270 |             }
271 |           );
272 |           if (feature) {
273 |             _this.infoVisible = true;
274 |             _this.TrackSpeed = _this.trackData.slice(-1)[0].speed;
275 |             _this.infoOverlay.setPosition(
276 |               _this.trackData.slice(-1)[0].coordinate
277 |             );
278 |           } else {
279 |             _this.infoVisible = false;
280 |             _this.TrackSpeed = 0;
281 |             _this.infoOverlay.setPosition(undefined);
282 |           }
283 |         },
284 |       });
285 |     },
286 |     // 改变鼠标样式
287 |     changeCursor() {
288 |       const _this = this;
289 |       return new Pointer({
290 |         handleMoveEvent(e) {
291 |           let feature = _this.map.forEachFeatureAtPixel(
292 |             e.pixel,
293 |             (feature) => {
294 |               return feature;
295 |             },
296 |             {
297 |               hitTolerance: 0,
298 |             }
299 |           );
300 |           if (feature) {
301 |             _this.map.getTargetElement().style.cursor = "pointer";
302 |           } else {
303 |             _this.map.getTargetElement().style.cursor = "auto";
304 |           }
305 |         },
306 |       });
307 |     },
308 |     handleClosePopover(){
309 |       this.infoVisible = false
310 |       this.infoOverlay.setPosition(undefined);
311 |     }
312 |   },
313 | };
314 | </script>
315 | 
316 | <style lang="scss" scoped>
317 | #popover {
318 |   position: absolute;
319 |   background-color: #fff;
320 |   -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
321 |   filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
322 |   padding: 15px;
323 |   border-radius: 10px;
324 |   border: 1px solid #ccc;
325 |   bottom: 12px;
326 |   left: -50px;
327 |   min-width: 280px;
328 |   .popover-close {
329 |     position: absolute;
330 |     right: 10px;
331 |     top: 6px;
332 |     cursor: pointer;
333 |   }
334 |   &::after,
335 |   &::before {
336 |     top: 100%;
337 |     border: solid transparent;
338 |     content: "";
339 |     width: 0;
340 |     height: 0;
341 |     position: absolute;
342 |     pointer-events: none;
343 |   }
344 |   &::after {
345 |     border-top-color: #fff;
346 |     border-width: 10px;
347 |     left: 48px;
348 |     margin-left: -10px;
349 |   }
350 |   &::before {
351 |     border-top-color: #ccc;
352 |     border-width: 11px;
353 |     left: 48px;
354 |     margin-left: -11px;
355 |   }
356 | }
357 | </style>


--------------------------------------------------------------------------------
/src/assets/icon/demo_index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <meta charset="utf-8"/>
  5 |   <title>iconfont Demo</title>
  6 |   <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
  7 |   <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
  8 |   <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  9 |   <link rel="stylesheet" href="demo.css">
 10 |   <link rel="stylesheet" href="iconfont.css">
 11 |   <script src="iconfont.js"></script>
 12 |   <!-- jQuery -->
 13 |   <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
 14 |   <!-- 代码高亮 -->
 15 |   <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
 16 |   <style>
 17 |     .main .logo {
 18 |       margin-top: 0;
 19 |       height: auto;
 20 |     }
 21 | 
 22 |     .main .logo a {
 23 |       display: flex;
 24 |       align-items: center;
 25 |     }
 26 | 
 27 |     .main .logo .sub-title {
 28 |       margin-left: 0.5em;
 29 |       font-size: 22px;
 30 |       color: #fff;
 31 |       background: linear-gradient(-45deg, #3967FF, #B500FE);
 32 |       -webkit-background-clip: text;
 33 |       -webkit-text-fill-color: transparent;
 34 |     }
 35 |   </style>
 36 | </head>
 37 | <body>
 38 |   <div class="main">
 39 |     <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
 40 |       <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
 41 |       
 42 |     </a></h1>
 43 |     <div class="nav-tabs">
 44 |       <ul id="tabs" class="dib-box">
 45 |         <li class="dib active"><span>Unicode</span></li>
 46 |         <li class="dib"><span>Font class</span></li>
 47 |         <li class="dib"><span>Symbol</span></li>
 48 |       </ul>
 49 |       
 50 |       <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2932920" target="_blank" class="nav-more">查看项目</a>
 51 |       
 52 |     </div>
 53 |     <div class="tab-container">
 54 |       <div class="content unicode" style="display: block;">
 55 |           <ul class="icon_lists dib-box">
 56 |           
 57 |             <li class="dib">
 58 |               <span class="icon iconfont">&#xe627;</span>
 59 |                 <div class="name">箭头</div>
 60 |                 <div class="code-name">&amp;#xe627;</div>
 61 |               </li>
 62 |           
 63 |             <li class="dib">
 64 |               <span class="icon iconfont">&#xe642;</span>
 65 |                 <div class="name">point</div>
 66 |                 <div class="code-name">&amp;#xe642;</div>
 67 |               </li>
 68 |           
 69 |             <li class="dib">
 70 |               <span class="icon iconfont">&#xe8b9;</span>
 71 |                 <div class="name">204首页</div>
 72 |                 <div class="code-name">&amp;#xe8b9;</div>
 73 |               </li>
 74 |           
 75 |             <li class="dib">
 76 |               <span class="icon iconfont">&#xe612;</span>
 77 |                 <div class="name">Polygon</div>
 78 |                 <div class="code-name">&amp;#xe612;</div>
 79 |               </li>
 80 |           
 81 |             <li class="dib">
 82 |               <span class="icon iconfont">&#xeb66;</span>
 83 |                 <div class="name">人机交互</div>
 84 |                 <div class="code-name">&amp;#xeb66;</div>
 85 |               </li>
 86 |           
 87 |             <li class="dib">
 88 |               <span class="icon iconfont">&#xe62a;</span>
 89 |                 <div class="name">雷达</div>
 90 |                 <div class="code-name">&amp;#xe62a;</div>
 91 |               </li>
 92 |           
 93 |             <li class="dib">
 94 |               <span class="icon iconfont">&#xe632;</span>
 95 |                 <div class="name">交互日志</div>
 96 |                 <div class="code-name">&amp;#xe632;</div>
 97 |               </li>
 98 |           
 99 |             <li class="dib">
100 |               <span class="icon iconfont">&#xe699;</span>
101 |                 <div class="name">轨迹回放</div>
102 |                 <div class="code-name">&amp;#xe699;</div>
103 |               </li>
104 |           
105 |             <li class="dib">
106 |               <span class="icon iconfont">&#xe60a;</span>
107 |                 <div class="name">闪烁点image_9</div>
108 |                 <div class="code-name">&amp;#xe60a;</div>
109 |               </li>
110 |           
111 |             <li class="dib">
112 |               <span class="icon iconfont">&#xe6b6;</span>
113 |                 <div class="name">Popover</div>
114 |                 <div class="code-name">&amp;#xe6b6;</div>
115 |               </li>
116 |           
117 |             <li class="dib">
118 |               <span class="icon iconfont">&#xe61d;</span>
119 |                 <div class="name">扇形</div>
120 |                 <div class="code-name">&amp;#xe61d;</div>
121 |               </li>
122 |           
123 |             <li class="dib">
124 |               <span class="icon iconfont">&#xe715;</span>
125 |                 <div class="name">overlay</div>
126 |                 <div class="code-name">&amp;#xe715;</div>
127 |               </li>
128 |           
129 |             <li class="dib">
130 |               <span class="icon iconfont">&#xe60b;</span>
131 |                 <div class="name">定位</div>
132 |                 <div class="code-name">&amp;#xe60b;</div>
133 |               </li>
134 |           
135 |             <li class="dib">
136 |               <span class="icon iconfont">&#xe600;</span>
137 |                 <div class="name">interaction</div>
138 |                 <div class="code-name">&amp;#xe600;</div>
139 |               </li>
140 |           
141 |             <li class="dib">
142 |               <span class="icon iconfont">&#xe629;</span>
143 |                 <div class="name">播放</div>
144 |                 <div class="code-name">&amp;#xe629;</div>
145 |               </li>
146 |           
147 |             <li class="dib">
148 |               <span class="icon iconfont">&#xe62f;</span>
149 |                 <div class="name">雷达</div>
150 |                 <div class="code-name">&amp;#xe62f;</div>
151 |               </li>
152 |           
153 |             <li class="dib">
154 |               <span class="icon iconfont">&#xe6e8;</span>
155 |                 <div class="name">基础地图</div>
156 |                 <div class="code-name">&amp;#xe6e8;</div>
157 |               </li>
158 |           
159 |             <li class="dib">
160 |               <span class="icon iconfont">&#xe653;</span>
161 |                 <div class="name">标记</div>
162 |                 <div class="code-name">&amp;#xe653;</div>
163 |               </li>
164 |           
165 |             <li class="dib">
166 |               <span class="icon iconfont">&#xed0c;</span>
167 |                 <div class="name">更多-面</div>
168 |                 <div class="code-name">&amp;#xed0c;</div>
169 |               </li>
170 |           
171 |             <li class="dib">
172 |               <span class="icon iconfont">&#xea05;</span>
173 |                 <div class="name">轨迹</div>
174 |                 <div class="code-name">&amp;#xea05;</div>
175 |               </li>
176 |           
177 |             <li class="dib">
178 |               <span class="icon iconfont">&#xe64e;</span>
179 |                 <div class="name">interaction</div>
180 |                 <div class="code-name">&amp;#xe64e;</div>
181 |               </li>
182 |           
183 |             <li class="dib">
184 |               <span class="icon iconfont">&#xe6b7;</span>
185 |                 <div class="name">矢量图层</div>
186 |                 <div class="code-name">&amp;#xe6b7;</div>
187 |               </li>
188 |           
189 |             <li class="dib">
190 |               <span class="icon iconfont">&#xe630;</span>
191 |                 <div class="name">vectorLayer</div>
192 |                 <div class="code-name">&amp;#xe630;</div>
193 |               </li>
194 |           
195 |             <li class="dib">
196 |               <span class="icon iconfont">&#xe601;</span>
197 |                 <div class="name">animation-play</div>
198 |                 <div class="code-name">&amp;#xe601;</div>
199 |               </li>
200 |           
201 |             <li class="dib">
202 |               <span class="icon iconfont">&#xe602;</span>
203 |                 <div class="name">lineString</div>
204 |                 <div class="code-name">&amp;#xe602;</div>
205 |               </li>
206 |           
207 |             <li class="dib">
208 |               <span class="icon iconfont">&#xe677;</span>
209 |                 <div class="name">更多</div>
210 |                 <div class="code-name">&amp;#xe677;</div>
211 |               </li>
212 |           
213 |             <li class="dib">
214 |               <span class="icon iconfont">&#xe60c;</span>
215 |                 <div class="name">multi-point</div>
216 |                 <div class="code-name">&amp;#xe60c;</div>
217 |               </li>
218 |           
219 |           </ul>
220 |           <div class="article markdown">
221 |           <h2 id="unicode-">Unicode 引用</h2>
222 |           <hr>
223 | 
224 |           <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
225 |           <ul>
226 |             <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
227 |             <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
228 |           </ul>
229 |           <blockquote>
230 |             <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
231 |           </blockquote>
232 |           <p>Unicode 使用步骤如下：</p>
233 |           <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
234 | <pre><code class="language-css"
235 | >@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 | </code></pre>
242 |           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
243 | <pre><code class="language-css"
244 | >.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 | </code></pre>
252 |           <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
253 | <pre>
254 | <code class="language-html"
255 | >&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
256 | </code></pre>
257 |           <blockquote>
258 |             <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
259 |           </blockquote>
260 |           </div>
261 |       </div>
262 |       <div class="content font-class">
263 |         <ul class="icon_lists dib-box">
264 |           
265 |           <li class="dib">
266 |             <span class="icon iconfont icon-Arrow"></span>
267 |             <div class="name">
268 |               箭头
269 |             </div>
270 |             <div class="code-name">.icon-Arrow
271 |             </div>
272 |           </li>
273 |           
274 |           <li class="dib">
275 |             <span class="icon iconfont icon-Point"></span>
276 |             <div class="name">
277 |               point
278 |             </div>
279 |             <div class="code-name">.icon-Point
280 |             </div>
281 |           </li>
282 |           
283 |           <li class="dib">
284 |             <span class="icon iconfont icon-Home"></span>
285 |             <div class="name">
286 |               204首页
287 |             </div>
288 |             <div class="code-name">.icon-Home
289 |             </div>
290 |           </li>
291 |           
292 |           <li class="dib">
293 |             <span class="icon iconfont icon-Polygon"></span>
294 |             <div class="name">
295 |               Polygon
296 |             </div>
297 |             <div class="code-name">.icon-Polygon
298 |             </div>
299 |           </li>
300 |           
301 |           <li class="dib">
302 |             <span class="icon iconfont icon-renjijiaohu"></span>
303 |             <div class="name">
304 |               人机交互
305 |             </div>
306 |             <div class="code-name">.icon-renjijiaohu
307 |             </div>
308 |           </li>
309 |           
310 |           <li class="dib">
311 |             <span class="icon iconfont icon-Radar"></span>
312 |             <div class="name">
313 |               雷达
314 |             </div>
315 |             <div class="code-name">.icon-Radar
316 |             </div>
317 |           </li>
318 |           
319 |           <li class="dib">
320 |             <span class="icon iconfont icon-jiaohurizhi"></span>
321 |             <div class="name">
322 |               交互日志
323 |             </div>
324 |             <div class="code-name">.icon-jiaohurizhi
325 |             </div>
326 |           </li>
327 |           
328 |           <li class="dib">
329 |             <span class="icon iconfont icon-TrackPlayback"></span>
330 |             <div class="name">
331 |               轨迹回放
332 |             </div>
333 |             <div class="code-name">.icon-TrackPlayback
334 |             </div>
335 |           </li>
336 |           
337 |           <li class="dib">
338 |             <span class="icon iconfont icon-TwinklePoint"></span>
339 |             <div class="name">
340 |               闪烁点image_9
341 |             </div>
342 |             <div class="code-name">.icon-TwinklePoint
343 |             </div>
344 |           </li>
345 |           
346 |           <li class="dib">
347 |             <span class="icon iconfont icon-Popover"></span>
348 |             <div class="name">
349 |               Popover
350 |             </div>
351 |             <div class="code-name">.icon-Popover
352 |             </div>
353 |           </li>
354 |           
355 |           <li class="dib">
356 |             <span class="icon iconfont icon-Sector"></span>
357 |             <div class="name">
358 |               扇形
359 |             </div>
360 |             <div class="code-name">.icon-Sector
361 |             </div>
362 |           </li>
363 |           
364 |           <li class="dib">
365 |             <span class="icon iconfont icon-Overlay"></span>
366 |             <div class="name">
367 |               overlay
368 |             </div>
369 |             <div class="code-name">.icon-Overlay
370 |             </div>
371 |           </li>
372 |           
373 |           <li class="dib">
374 |             <span class="icon iconfont icon-SetCenter"></span>
375 |             <div class="name">
376 |               定位
377 |             </div>
378 |             <div class="code-name">.icon-SetCenter
379 |             </div>
380 |           </li>
381 |           
382 |           <li class="dib">
383 |             <span class="icon iconfont icon-HoverAndClick"></span>
384 |             <div class="name">
385 |               interaction
386 |             </div>
387 |             <div class="code-name">.icon-HoverAndClick
388 |             </div>
389 |           </li>
390 |           
391 |           <li class="dib">
392 |             <span class="icon iconfont icon-TriangleCopyx"></span>
393 |             <div class="name">
394 |               播放
395 |             </div>
396 |             <div class="code-name">.icon-TriangleCopyx
397 |             </div>
398 |           </li>
399 |           
400 |           <li class="dib">
401 |             <span class="icon iconfont icon-RadarAnimation"></span>
402 |             <div class="name">
403 |               雷达
404 |             </div>
405 |             <div class="code-name">.icon-RadarAnimation
406 |             </div>
407 |           </li>
408 |           
409 |           <li class="dib">
410 |             <span class="icon iconfont icon-BaseMap"></span>
411 |             <div class="name">
412 |               基础地图
413 |             </div>
414 |             <div class="code-name">.icon-BaseMap
415 |             </div>
416 |           </li>
417 |           
418 |           <li class="dib">
419 |             <span class="icon iconfont icon-Marker"></span>
420 |             <div class="name">
421 |               标记
422 |             </div>
423 |             <div class="code-name">.icon-Marker
424 |             </div>
425 |           </li>
426 |           
427 |           <li class="dib">
428 |             <span class="icon iconfont icon-MultiPolygon"></span>
429 |             <div class="name">
430 |               更多-面
431 |             </div>
432 |             <div class="code-name">.icon-MultiPolygon
433 |             </div>
434 |           </li>
435 |           
436 |           <li class="dib">
437 |             <span class="icon iconfont icon-TrackLine"></span>
438 |             <div class="name">
439 |               轨迹
440 |             </div>
441 |             <div class="code-name">.icon-TrackLine
442 |             </div>
443 |           </li>
444 |           
445 |           <li class="dib">
446 |             <span class="icon iconfont icon-Interaction"></span>
447 |             <div class="name">
448 |               interaction
449 |             </div>
450 |             <div class="code-name">.icon-Interaction
451 |             </div>
452 |           </li>
453 |           
454 |           <li class="dib">
455 |             <span class="icon iconfont icon-shiliangtuceng"></span>
456 |             <div class="name">
457 |               矢量图层
458 |             </div>
459 |             <div class="code-name">.icon-shiliangtuceng
460 |             </div>
461 |           </li>
462 |           
463 |           <li class="dib">
464 |             <span class="icon iconfont icon-VectorLayer"></span>
465 |             <div class="name">
466 |               vectorLayer
467 |             </div>
468 |             <div class="code-name">.icon-VectorLayer
469 |             </div>
470 |           </li>
471 |           
472 |           <li class="dib">
473 |             <span class="icon iconfont icon-Animation"></span>
474 |             <div class="name">
475 |               animation-play
476 |             </div>
477 |             <div class="code-name">.icon-Animation
478 |             </div>
479 |           </li>
480 |           
481 |           <li class="dib">
482 |             <span class="icon iconfont icon-LineString"></span>
483 |             <div class="name">
484 |               lineString
485 |             </div>
486 |             <div class="code-name">.icon-LineString
487 |             </div>
488 |           </li>
489 |           
490 |           <li class="dib">
491 |             <span class="icon iconfont icon-MultiLineString"></span>
492 |             <div class="name">
493 |               更多
494 |             </div>
495 |             <div class="code-name">.icon-MultiLineString
496 |             </div>
497 |           </li>
498 |           
499 |           <li class="dib">
500 |             <span class="icon iconfont icon-MultiPoint"></span>
501 |             <div class="name">
502 |               multi-point
503 |             </div>
504 |             <div class="code-name">.icon-MultiPoint
505 |             </div>
506 |           </li>
507 |           
508 |         </ul>
509 |         <div class="article markdown">
510 |         <h2 id="font-class-">font-class 引用</h2>
511 |         <hr>
512 | 
513 |         <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
514 |         <p>与 Unicode 使用方式相比，具有如下特点：</p>
515 |         <ul>
516 |           <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
517 |           <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
518 |         </ul>
519 |         <p>使用步骤如下：</p>
520 |         <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
521 | <pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
522 | </code></pre>
523 |         <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
524 | <pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
525 | </code></pre>
526 |         <blockquote>
527 |           <p>"
528 |             iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
529 |         </blockquote>
530 |       </div>
531 |       </div>
532 |       <div class="content symbol">
533 |           <ul class="icon_lists dib-box">
534 |           
535 |             <li class="dib">
536 |                 <svg class="icon svg-icon" aria-hidden="true">
537 |                   <use xlink:href="#icon-Arrow"></use>
538 |                 </svg>
539 |                 <div class="name">箭头</div>
540 |                 <div class="code-name">#icon-Arrow</div>
541 |             </li>
542 |           
543 |             <li class="dib">
544 |                 <svg class="icon svg-icon" aria-hidden="true">
545 |                   <use xlink:href="#icon-Point"></use>
546 |                 </svg>
547 |                 <div class="name">point</div>
548 |                 <div class="code-name">#icon-Point</div>
549 |             </li>
550 |           
551 |             <li class="dib">
552 |                 <svg class="icon svg-icon" aria-hidden="true">
553 |                   <use xlink:href="#icon-Home"></use>
554 |                 </svg>
555 |                 <div class="name">204首页</div>
556 |                 <div class="code-name">#icon-Home</div>
557 |             </li>
558 |           
559 |             <li class="dib">
560 |                 <svg class="icon svg-icon" aria-hidden="true">
561 |                   <use xlink:href="#icon-Polygon"></use>
562 |                 </svg>
563 |                 <div class="name">Polygon</div>
564 |                 <div class="code-name">#icon-Polygon</div>
565 |             </li>
566 |           
567 |             <li class="dib">
568 |                 <svg class="icon svg-icon" aria-hidden="true">
569 |                   <use xlink:href="#icon-renjijiaohu"></use>
570 |                 </svg>
571 |                 <div class="name">人机交互</div>
572 |                 <div class="code-name">#icon-renjijiaohu</div>
573 |             </li>
574 |           
575 |             <li class="dib">
576 |                 <svg class="icon svg-icon" aria-hidden="true">
577 |                   <use xlink:href="#icon-Radar"></use>
578 |                 </svg>
579 |                 <div class="name">雷达</div>
580 |                 <div class="code-name">#icon-Radar</div>
581 |             </li>
582 |           
583 |             <li class="dib">
584 |                 <svg class="icon svg-icon" aria-hidden="true">
585 |                   <use xlink:href="#icon-jiaohurizhi"></use>
586 |                 </svg>
587 |                 <div class="name">交互日志</div>
588 |                 <div class="code-name">#icon-jiaohurizhi</div>
589 |             </li>
590 |           
591 |             <li class="dib">
592 |                 <svg class="icon svg-icon" aria-hidden="true">
593 |                   <use xlink:href="#icon-TrackPlayback"></use>
594 |                 </svg>
595 |                 <div class="name">轨迹回放</div>
596 |                 <div class="code-name">#icon-TrackPlayback</div>
597 |             </li>
598 |           
599 |             <li class="dib">
600 |                 <svg class="icon svg-icon" aria-hidden="true">
601 |                   <use xlink:href="#icon-TwinklePoint"></use>
602 |                 </svg>
603 |                 <div class="name">闪烁点image_9</div>
604 |                 <div class="code-name">#icon-TwinklePoint</div>
605 |             </li>
606 |           
607 |             <li class="dib">
608 |                 <svg class="icon svg-icon" aria-hidden="true">
609 |                   <use xlink:href="#icon-Popover"></use>
610 |                 </svg>
611 |                 <div class="name">Popover</div>
612 |                 <div class="code-name">#icon-Popover</div>
613 |             </li>
614 |           
615 |             <li class="dib">
616 |                 <svg class="icon svg-icon" aria-hidden="true">
617 |                   <use xlink:href="#icon-Sector"></use>
618 |                 </svg>
619 |                 <div class="name">扇形</div>
620 |                 <div class="code-name">#icon-Sector</div>
621 |             </li>
622 |           
623 |             <li class="dib">
624 |                 <svg class="icon svg-icon" aria-hidden="true">
625 |                   <use xlink:href="#icon-Overlay"></use>
626 |                 </svg>
627 |                 <div class="name">overlay</div>
628 |                 <div class="code-name">#icon-Overlay</div>
629 |             </li>
630 |           
631 |             <li class="dib">
632 |                 <svg class="icon svg-icon" aria-hidden="true">
633 |                   <use xlink:href="#icon-SetCenter"></use>
634 |                 </svg>
635 |                 <div class="name">定位</div>
636 |                 <div class="code-name">#icon-SetCenter</div>
637 |             </li>
638 |           
639 |             <li class="dib">
640 |                 <svg class="icon svg-icon" aria-hidden="true">
641 |                   <use xlink:href="#icon-HoverAndClick"></use>
642 |                 </svg>
643 |                 <div class="name">interaction</div>
644 |                 <div class="code-name">#icon-HoverAndClick</div>
645 |             </li>
646 |           
647 |             <li class="dib">
648 |                 <svg class="icon svg-icon" aria-hidden="true">
649 |                   <use xlink:href="#icon-TriangleCopyx"></use>
650 |                 </svg>
651 |                 <div class="name">播放</div>
652 |                 <div class="code-name">#icon-TriangleCopyx</div>
653 |             </li>
654 |           
655 |             <li class="dib">
656 |                 <svg class="icon svg-icon" aria-hidden="true">
657 |                   <use xlink:href="#icon-RadarAnimation"></use>
658 |                 </svg>
659 |                 <div class="name">雷达</div>
660 |                 <div class="code-name">#icon-RadarAnimation</div>
661 |             </li>
662 |           
663 |             <li class="dib">
664 |                 <svg class="icon svg-icon" aria-hidden="true">
665 |                   <use xlink:href="#icon-BaseMap"></use>
666 |                 </svg>
667 |                 <div class="name">基础地图</div>
668 |                 <div class="code-name">#icon-BaseMap</div>
669 |             </li>
670 |           
671 |             <li class="dib">
672 |                 <svg class="icon svg-icon" aria-hidden="true">
673 |                   <use xlink:href="#icon-Marker"></use>
674 |                 </svg>
675 |                 <div class="name">标记</div>
676 |                 <div class="code-name">#icon-Marker</div>
677 |             </li>
678 |           
679 |             <li class="dib">
680 |                 <svg class="icon svg-icon" aria-hidden="true">
681 |                   <use xlink:href="#icon-MultiPolygon"></use>
682 |                 </svg>
683 |                 <div class="name">更多-面</div>
684 |                 <div class="code-name">#icon-MultiPolygon</div>
685 |             </li>
686 |           
687 |             <li class="dib">
688 |                 <svg class="icon svg-icon" aria-hidden="true">
689 |                   <use xlink:href="#icon-TrackLine"></use>
690 |                 </svg>
691 |                 <div class="name">轨迹</div>
692 |                 <div class="code-name">#icon-TrackLine</div>
693 |             </li>
694 |           
695 |             <li class="dib">
696 |                 <svg class="icon svg-icon" aria-hidden="true">
697 |                   <use xlink:href="#icon-Interaction"></use>
698 |                 </svg>
699 |                 <div class="name">interaction</div>
700 |                 <div class="code-name">#icon-Interaction</div>
701 |             </li>
702 |           
703 |             <li class="dib">
704 |                 <svg class="icon svg-icon" aria-hidden="true">
705 |                   <use xlink:href="#icon-shiliangtuceng"></use>
706 |                 </svg>
707 |                 <div class="name">矢量图层</div>
708 |                 <div class="code-name">#icon-shiliangtuceng</div>
709 |             </li>
710 |           
711 |             <li class="dib">
712 |                 <svg class="icon svg-icon" aria-hidden="true">
713 |                   <use xlink:href="#icon-VectorLayer"></use>
714 |                 </svg>
715 |                 <div class="name">vectorLayer</div>
716 |                 <div class="code-name">#icon-VectorLayer</div>
717 |             </li>
718 |           
719 |             <li class="dib">
720 |                 <svg class="icon svg-icon" aria-hidden="true">
721 |                   <use xlink:href="#icon-Animation"></use>
722 |                 </svg>
723 |                 <div class="name">animation-play</div>
724 |                 <div class="code-name">#icon-Animation</div>
725 |             </li>
726 |           
727 |             <li class="dib">
728 |                 <svg class="icon svg-icon" aria-hidden="true">
729 |                   <use xlink:href="#icon-LineString"></use>
730 |                 </svg>
731 |                 <div class="name">lineString</div>
732 |                 <div class="code-name">#icon-LineString</div>
733 |             </li>
734 |           
735 |             <li class="dib">
736 |                 <svg class="icon svg-icon" aria-hidden="true">
737 |                   <use xlink:href="#icon-MultiLineString"></use>
738 |                 </svg>
739 |                 <div class="name">更多</div>
740 |                 <div class="code-name">#icon-MultiLineString</div>
741 |             </li>
742 |           
743 |             <li class="dib">
744 |                 <svg class="icon svg-icon" aria-hidden="true">
745 |                   <use xlink:href="#icon-MultiPoint"></use>
746 |                 </svg>
747 |                 <div class="name">multi-point</div>
748 |                 <div class="code-name">#icon-MultiPoint</div>
749 |             </li>
750 |           
751 |           </ul>
752 |           <div class="article markdown">
753 |           <h2 id="symbol-">Symbol 引用</h2>
754 |           <hr>
755 | 
756 |           <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
757 |             这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
758 |           <ul>
759 |             <li>支持多色图标了，不再受单色限制。</li>
760 |             <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
761 |             <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
762 |             <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
763 |           </ul>
764 |           <p>使用步骤如下：</p>
765 |           <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
766 | <pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
767 | </code></pre>
768 |           <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
769 | <pre><code class="language-html">&lt;style&gt;
770 | .icon {
771 |   width: 1em;
772 |   height: 1em;
773 |   vertical-align: -0.15em;
774 |   fill: currentColor;
775 |   overflow: hidden;
776 | }
777 | &lt;/style&gt;
778 | </code></pre>
779 |           <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
780 | <pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
781 |   &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
782 | &lt;/svg&gt;
783 | </code></pre>
784 |           </div>
785 |       </div>
786 | 
787 |     </div>
788 |   </div>
789 |   <script>
790 |   $(document).ready(function () {
791 |       $('.tab-container .content:first').show()
792 | 
793 |       $('#tabs li').click(function (e) {
794 |         var tabContent = $('.tab-container .content')
795 |         var index = $(this).index()
796 | 
797 |         if ($(this).hasClass('active')) {
798 |           return
799 |         } else {
800 |           $('#tabs li').removeClass('active')
801 |           $(this).addClass('active')
802 | 
803 |           tabContent.hide().eq(index).fadeIn()
804 |         }
805 |       })
806 |     })
807 |   </script>
808 | </body>
809 | </html>
810 | 


--------------------------------------------------------------------------------