Inicio Explorar Ayuda
Registro Iniciar sesión
ztpt-dev
/
social-management-screen
Seguir 2
Destacar 0
Fork 0
Archivos Incidencias 0 Pull Requests 0 Wiki
Explorar el Código

配置

caozhaorui hace 1 año
padre
9d640ef6d5
commit
39aeb13800
Se han modificado 35 ficheros con 228 adiciones y 2998 borrados
Dividir vista Mostrar estadísticas de diff
  1. 3 2
      index.html
  2. 7 4
      package.json
  3. 7 2
      src/App.vue
  4. 0 1
      src/assets/vue.svg
  5. 0 40
      src/components/HelloWorld.vue
  6. 0 55
      src/components/easyMap/func/location.ts
  7. 0 45
      src/components/easyMap/func/measure.scss
  8. 0 262
      src/components/easyMap/func/measure.ts
  9. BIN
      src/components/easyMap/images/bg-land.png
  10. BIN
      src/components/easyMap/images/bg-ocean.png
  11. BIN
      src/components/easyMap/images/bg-sky.png
  12. 0 12
      src/components/easyMap/images/bg-switch.svg
  13. 0 165
      src/components/easyMap/index.vue
  14. 0 88
      src/components/easyMap/initMapInfo.ts
  15. 0 296
      src/components/easyMap/ol-map.vue
  16. 1 1
      src/main.js
  17. 1 0
      src/out/config.js
  18. 1 1
      src/router/index.ts
  19. 0 2
      src/store/index.ts
  20. 0 38
      src/store/modules/easy-map.ts
  21. 0 391
      src/utils/easyMap.ts
  22. 6 208
      src/utils/util.ts
  23. BIN
      src/views/init-speed-track/button-del.png
  24. 0 256
      src/views/init-speed-track/drawTrack.ts
  25. BIN
      src/views/init-speed-track/edit.png
  26. 0 916
      src/views/init-speed-track/index.vue
  27. 0 18
      src/views/init-speed-track/ship-track-invisible.svg
  28. 0 18
      src/views/init-speed-track/ship-track-visible.svg
  29. 0 162
      src/views/init-speed-track/track-style.ts
  30. 36 0
      src/views/screen/index.vue
  31. 1 0
      src/vite-env.d.ts
  32. 24 0
      tsconfig.json
  33. 9 0
      tsconfig.node.json
  34. 3 10
      vite.config.js
  35. 129 5
      yarn.lock

+ 3 - 2
index.html
Ver fichero 

@@ -4,10 +4,11 @@
 
     <meta charset="UTF-8" />
 
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    <title>Vite + Vue</title>
 
+    <title>Vite + Vue + TS</title>
 
+    <script src="/config.js"></script>
 
   </head>
 
   <body>
 
     <div id="app"></div>
 
-    <script type="module" src="/src/main.js"></script>
 
+    <script type="module" src="/src/main.ts"></script>
 
   </body>
 
 </html>

+ 7 - 4
package.json
Ver fichero 

@@ -1,11 +1,11 @@
 
 {
 
-  "name": "yyy",
 
+  "name": "social-management-screen",
 
   "private": true,
 
   "version": "0.0.0",
 
   "type": "module",
 
   "scripts": {
 
     "dev": "vite",
 
-    "build": "vite build",
 
+    "build": "vue-tsc && vite build",
 
     "preview": "vite preview"
 
   },
 
   "dependencies": {
 
@@ -14,10 +14,13 @@
 
     "axios": "^1.3.4",
 
     "vuex": "^4.1.0",
 
     "vue-router": "^4.1.6",
 
-    "element-plus": "^2.3.1"
 
+    "element-plus": "^2.3.1",
 
+    "@types/node": "^20.1.0"
 
   },
 
   "devDependencies": {
 
     "@vitejs/plugin-vue": "^4.1.0",
 
-    "vite": "^4.3.9"
 
+    "typescript": "^4.9.3",
 
+    "vite": "^4.2.0",
 
+    "vue-tsc": "^1.2.0"
 
   }
 
 }

+ 7 - 2
src/App.vue
Ver fichero 

@@ -3,10 +3,15 @@
 
     <router-view/>
 
   </div>
 
 </template>
 
-<script>
 
+<script lang="ts">
 
 import {
 
   defineComponent,
 
   ref,
 
+  nextTick,
 
+  onMounted,
 
+  watch,
 
+  computed,
 
+  ComponentInternalInstance,
 
   getCurrentInstance
 
 } from 'vue'
 
 import {useStore} from 'vuex'
 
@@ -20,7 +25,7 @@ export default defineComponent({
 
   setup() {
 
     const store = useStore()
 
     const locale = ref(zhLocale)
 
-    const that = getCurrentInstance().appContext.config.globalProperties
 
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
 
     return {
 
       locale
 
     }

+ 0 - 1
src/assets/vue.svg
Ver fichero 

@@ -1 +0,0 @@
 
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

+ 0 - 40
src/components/HelloWorld.vue
Ver fichero 

@@ -1,40 +0,0 @@
 
-<script setup>
 
-import { ref } from 'vue'
 
-
 
-defineProps({
 
-  msg: String,
 
-})
 
-
 
-const count = ref(0)
 
-</script>
 
-
 
-<template>
 
-  <h1>{{ msg }}</h1>
 
-
 
-  <div class="card">
 
-    <button type="button" @click="count++">count is {{ count }}</button>
 
-    <p>
 
-      Edit
 
-      <code>components/HelloWorld.vue</code> to test HMR
 
-    </p>
 
-  </div>
 
-
 
-  <p>
 
-    Check out
 
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
 
-      >create-vue</a
 
-    >, the official Vue + Vite starter
 
-  </p>
 
-  <p>
 
-    Install
 
-    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
 
-    in your IDE for a better DX
 
-  </p>
 
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
 
-</template>
 
-
 
-<style scoped>
 
-.read-the-docs {
 
-  color: #888;
 
-}
 
-</style>

+ 0 - 55
src/components/easyMap/func/location.ts
Ver fichero 

@@ -1,55 +0,0 @@
 
-import * as ol from 'ol'
 
-import * as style from 'ol/style'
 
-import * as layer from 'ol/layer'
 
-import * as source from 'ol/source'
 
-import * as geom from 'ol/geom'
 
-import * as proj from 'ol/proj'
 
-import * as interaction from 'ol/interaction'
 
-import * as coordinate from 'ol/coordinate'
 
-import * as format from "ol/format";
 
-
 
-const layerFlag = ['layerName', 'positionLayer']
 
-export default function Location ({map, position = null, wkt = null, zoom = null, color = '#039ff3'}) {
 
-    let _source = null
 
-    const realLayer = map.getLayers().getArray().filter(v => v.get(layerFlag[0]) === layerFlag[1])
 
-    if (realLayer[0]) {
 
-        _source = realLayer[0].getSource()
 
-        _source.clear()
 
-    } else {
 
-        _source = new source.Vector(); //图层数据源
 
-        const _vector = new layer.Vector({
 
-            zIndex: 9999,
 
-            source: _source,
 
-        });
 
-        _vector.set(layerFlag[0], layerFlag[1])
 
-        map.addLayer(_vector);
 
-    }
 
-    const feat = new format.WKT().readFeature(position ? `POINT(${position[0]} ${position[1]})` : wkt)
 
-    const radius = 25
 
-    const longRadius = radius * Math.SQRT2
 
-    feat.setStyle([new style.Style({ //图层样式
 
-        image: new style.RegularShape({
 
-            stroke: new style.Stroke({
 
-                color: color,
 
-                width: 2,
 
-                lineDash: [
 
-                    (longRadius * 3) / 10,
 
-                    (longRadius * 4) / 10,
 
-                    (longRadius * 3) / 10,
 
-                    0
 
-                ]
 
-            }),
 
-            radius1: radius,
 
-            rotation: Math.PI / (180 / 45),
 
-            points: 4
 
-        })
 
-    })])
 
-    _source.addFeature(feat)
 
-    setTimeout(() => {
 
-        feat?.getGeometry().setCoordinates([0, 0])
 
-    }, 3000)
 
-    map.getView().setCenter(feat?.getGeometry().getCoordinates())
 
-    if (zoom) {
 
-        map.getView().setZoom(zoom)
 
-    }
 
-}

+ 0 - 45
src/components/easyMap/func/measure.scss
Ver fichero 

@@ -1,45 +0,0 @@
 
-.tooltip {
 
-  position: relative;
 
-  background: rgba(0, 0, 0, 0.5);
 
-  border-radius: 4px;
 
-  color: white;
 
-  padding: 4px 8px;
 
-  white-space: nowrap;
 
-}
 
-
 
-.tooltip-measure {
 
-  opacity: 1;
 
-  font-weight: bold;
 
-}
 
-
 
-.tooltip-static {
 
-  background-color: #ffcc33;
 
-  color: black;
 
-  border: 1px solid white;
 
-}
 
-
 
-.tooltip-measure:before,
 
-.tooltip-static:before {
 
-  border-top: 6px solid rgba(0, 0, 0, 0.5);
 
-  border-right: 6px solid transparent;
 
-  border-left: 6px solid transparent;
 
-  content: "";
 
-  position: absolute;
 
-  bottom: -6px;
 
-  margin-left: -7px;
 
-  left: 50%;
 
-}
 
-
 
-.tooltip-static:before {
 
-  border-top-color: #ffcc33;
 
-}
 
-.lineDel {
 
-  width: 16px;
 
-  height: 16px;
 
-  display: inline-block;
 
-  vertical-align: middle;
 
-  margin-left: 10px;
 
-  cursor: pointer;
 
-  //background: url('@/assets/images/map/lineDel.png') no-repeat;
 
-  background-size: 100% 100%;
 
-}

+ 0 - 262
src/components/easyMap/func/measure.ts
Ver fichero 

@@ -1,262 +0,0 @@
 
-import * as ol from 'ol'
 
-import * as style from 'ol/style'
 
-import * as layer from 'ol/layer'
 
-import * as source from 'ol/source'
 
-import * as geom from 'ol/geom'
 
-import * as proj from 'ol/proj'
 
-import * as interaction from 'ol/interaction'
 
-import * as coordinate from 'ol/coordinate'
 
-import * as control from 'ol/control'
 
-import * as sphere from 'ol/sphere'
 
-import { unByKey } from 'ol/Observable'
 
-import './measure.scss'
 
-import {createBox} from "ol/interaction/Draw";
 
-import {Circle, LineString, Polygon} from "ol/geom";
 
-
 
-const layerFlag = ['layerName', 'measureLayer']
 
-let measureTooltipElement;
 
-let helpTooltipElement;
 
-const typeMapper = new Map([
 
-    ['line', 'LineString'],
 
-    ['rectangle', 'LineString'],
 
-    ['polygon', 'Polygon'],
 
-    ['circle', 'Circle'],
 
-])
 
-/**
 
- *
 
- * @param map
 
- * @param typeSelect    line线，rectangle矩形，polygon多边形，circle圆形
 
- */
 
-export default function Measure (map, typeSelect) {
 
-    let _source = null
 
-    const realLayer = map.getLayers().getArray().filter(v => v.get(layerFlag[0]) === layerFlag[1])
 
-    if (realLayer[0]) {
 
-        _source = realLayer[0].getSource()
 
-    } else {
 
-        _source = new source.Vector(); //图层数据源
 
-        const _vector = new layer.Vector({
 
-            zIndex: 9999,
 
-            source: _source,
 
-            style: new style.Style({ //图层样式
 
-                fill: new style.Fill({
 
-                    color: 'rgba(255, 255, 255, 0.2)' //填充颜色
 
-                }),
 
-                stroke: new style.Stroke({
 
-                    color: '#f31a4a',  //边框颜色
 
-                    width: 2   // 边框宽度
 
-                }),
 
-                image: new style.Circle({
 
-                    radius: 7,
 
-                    fill: new style.Fill({
 
-                        color: '#ffcc33'
 
-                    })
 
-                })
 
-            })
 
-        });
 
-        _vector.set(layerFlag[0], layerFlag[1])
 
-        map.addLayer(_vector);
 
-    }
 
-    let sketch;
 
-    let helpTooltip;
 
-    let measureTooltip;
 
-    let continueMsg = '双击结束测量';
 
-    const geodesicCheckbox = true;//测地学方式对象
 
-    const createMeasureTooltip = () => {
 
-        const id = 'measureTooltipElementId'
 
-        if (measureTooltipElement) {
 
-            map.removeOverlay(map.getOverlayById(id))
 
-            measureTooltipElement.parentNode.removeChild(measureTooltipElement);
 
-        }
 
-        measureTooltipElement = document.createElement('div');
 
-        measureTooltipElement.className = 'tooltip tooltip-measure';
 
-        measureTooltip = new ol.Overlay({
 
-            id,
 
-            element: measureTooltipElement,
 
-            offset: [0, -15],
 
-            positioning: 'bottom-center'
 
-        });
 
-        map.addOverlay(measureTooltip);
 
-    }
 
-    const createHelpTooltip = () => {
 
-        const id = 'helpTooltipElementId'
 
-        if (helpTooltipElement) {
 
-            map.removeOverlay(map.getOverlayById(id))
 
-            helpTooltipElement.parentNode.removeChild(helpTooltipElement);
 
-        }
 
-        helpTooltipElement = document.createElement('div');
 
-        helpTooltipElement.className = 'tooltip hidden';
 
-        helpTooltip = new ol.Overlay({
 
-            id,
 
-            element: helpTooltipElement,
 
-            offset: [15, 0],
 
-            positioning: 'center-left'
 
-        });
 
-        map.addOverlay(helpTooltip);
 
-    }
 
-    const formatLength = (line) => {
 
-        // 获取投影坐标系
 
-        const sourceProj = map.getView().getProjection();
 
-        // ol/sphere里有getLength()和getArea()用来测量距离和区域面积，默认的投影坐标系是EPSG:3857, 其中有个options的参数，可以设置投影坐标系
 
-        const length = sphere.getLength(line, {projection: sourceProj});
 
-        // const length = getLength(line);
 
-        let output;
 
-        if (length > 100) {
 
-            const km = Math.round((length / 1000) * 100) / 100;
 
-            output = `${km} 千米 <br>${parseFloat(String(km * 0.53995)).toFixed(2)} 海里`;
 
-        } else {
 
-            output = `${Math.round(length * 100) / 100} m`;
 
-        }
 
-        return output;
 
-    };
 
-    //获取圆的面积
 
-    const getCircleArea = (circle, projection) => {
 
-        const P = 3.14
 
-        const radius = getCircleRadius(circle, projection)
 
-        return P * radius * radius
 
-    }
 
-//获取圆的半径
 
-    const getCircleRadius = (circle, projection) => {
 
-        return circle.getRadius() * projection.getMetersPerUnit()
 
-    }
 
-    const formatArea = (polygon, type= 'polygon') => {
 
-        let area
 
-        const sourceProj = map.getView().getProjection();
 
-        // 获取投影坐标系
 
-        if (type === 'polygon') {
 
-            area = sphere.getArea(polygon, {
 
-                projection: sourceProj,
 
-            });
 
-        } else if (type === 'circle') {
 
-            area = getCircleArea(polygon, sourceProj)
 
-        }
 
-        let output;
 
-        if (area > 10000) {
 
-            const km = Math.round((area / 1000000) * 100) / 100;
 
-            output = `${km} 平方公里<br>${parseFloat(String(km * 0.38610)).toFixed(
 
-                2
 
-            )} 平方英里`;
 
-        } else {
 
-            output = `${Math.round(area * 100) / 100} ` + " m<sup>2</sup>";
 
-        }
 
-        return output;
 
-    };
 
-    const addInteraction = () => {
 
-        const id = 'drawName'
 
-        const draw = new interaction.Draw({
 
-            source: _source,//测量绘制层数据源
 
-            type: typeMapper.get(typeSelect),  //几何图形类型
 
-            geometryFunction: typeSelect === 'rectangle' ? createBox() : null,
 
-            style: new style.Style({
 
-                fill: new style.Fill({
 
-                    color: "rgba(255, 255, 255, 0.2)",
 
-                }),
 
-                stroke: new style.Stroke({
 
-                    color: "#f3584a",
 
-                    width: 2,
 
-                }),
 
-                image: new style.Circle({
 
-                    radius: 5,
 
-                    stroke: new style.Stroke({
 
-                        color: "rgba(0, 0, 0, 0.7)",
 
-                    }),
 
-                    fill: new style.Fill({
 
-                        color: "rgba(255, 255, 255, 0.2)",
 
-                    }),
 
-                }),
 
-            }),
 
-        });
 
-        draw.set(id, id)
 
-        createMeasureTooltip(); //创建测量工具提示框
 
-        createHelpTooltip(); //创建帮助提示框
 
-        map.addInteraction(draw);
 
-        let listener;
 
-        //绑定交互绘制工具开始绘制的事件
 
-        const drawstartHandle = (evt) => {
 
-            sketch = evt.feature; //绘制的要素
 
-            let tooltipCoord = evt.coordinate;// 绘制的坐标
 
-            //绑定change事件，根据绘制几何类型得到测量长度值或面积值，并将其设置到测量工具提示框中显示
 
-            listener = sketch.getGeometry().on('change', function (evt) {
 
-                const geom = evt.target
 
-                let output;
 
-                if (geom.getType() === 'LineString') {
 
-                    output = formatLength(geom);//长度值
 
-                    tooltipCoord = geom.getLastCoordinate();//坐标
 
-                } else if (geom.getType() === 'Polygon') {
 
-                    output = formatArea(geom);//面积值
 
-                    tooltipCoord = geom.getInteriorPoint().getCoordinates();//坐标
 
-                } else if (geom.getType() === 'Circle') {
 
-                    output = formatArea(geom, 'circle');//面积值
 
-                    tooltipCoord = geom.getCenter()
 
-                }
 
-                measureTooltipElement.innerHTML = output;//将测量值设置到测量工具提示框中显示
 
-                measureTooltip.setPosition(tooltipCoord);//设置测量工具提示框的显示位置
 
-            });
 
-        }
 
-        draw.on('drawstart', drawstartHandle);
 
-        //绑定交互绘制工具结束绘制的事件
 
-        const copy = (value) => {
 
-            const str = document.createElement('input')
 
-            str.setAttribute('value', value)
 
-            document.body.appendChild(str)
 
-            str.select()
 
-            document.execCommand('copy')
 
-            document.body.removeChild(str)
 
-        }
 
-        const drawendHandle = (evt) => {
 
-            map.removeInteraction(map.getInteractions().getArray().filter(v => v.get(id) === id)[0]);
 
-            const del = document.createElement("div");
 
-            del.className = "lineDel";
 
-            measureTooltipElement.append(del);
 
-            del.onclick = () => {
 
-                _source.removeFeature(evt.feature)
 
-                const b = del.parentElement.parentElement
 
-                b.parentElement.removeChild(b);
 
-                const g = evt.feature.getGeometry()
 
-                if (g.getType() === 'LineString') {
 
-                    const w = `LINESTRING(${g.getCoordinates().map(v => v[0] + ' ' + v[1]).join(',')})`
 
-                    copy(w)
 
-                } else if (g.getType() === 'Polygon') {
 
-                    const w = `POLYGON(${g.getCoordinates().map(v => '(' + v.map(c => c[0] + ' ' + c[1]) + ')').join(',')})`
 
-                    copy(w)
 
-                }
 
-            };
 
-            measureTooltipElement.className = 'tooltip tooltip-static'; //设置测量提示框的样式
 
-            measureTooltip.setOffset([0, -7]);
 
-            sketch = null; //置空当前绘制的要素对象
 
-            measureTooltipElement = null; //置空测量工具提示框对象
 
-            helpTooltipElement.parentNode.removeChild(helpTooltipElement);
 
-            helpTooltipElement = null; //置空测量工具提示框对象
 
-            unByKey(listener);
 
-            draw.un('drawstart', drawstartHandle);
 
-            draw.un('drawend', drawendHandle);
 
-            map.removeInteraction(map.getInteractions().getArray().filter(v => v.get(id) === id)[0]);
 
-            map.un('pointermove', pointerMoveHandler)
 
-        }
 
-        draw.on('drawend', drawendHandle);
 
-    }
 
-    addInteraction(); //调用加载绘制交互控件方法，添加绘图进行测量
 
-    const pointerMoveHandler = (evt) => {
 
-        if (evt.dragging) {
 
-            return;
 
-        }
 
-        let helpMsg = '单击开始测量';//当前默认提示信息
 
-        //判断绘制几何类型设置相应的帮助提示信息
 
-        if (sketch) {
 
-            const geom = sketch.getGeometry()
 
-            helpMsg = continueMsg;
 
-            // if (geom.getType() === 'Polygon') {
 
-            //     helpMsg = continueMsg; //绘制多边形时提示相应内容
 
-            // } else if (geom.getType() === 'LineString') {
 
-            //     helpMsg = continueMsg; //绘制线时提示相应内容
 
-            // }
 
-        }
 
-        helpTooltipElement.innerHTML = helpMsg; //将提示信息设置到对话框中显示
 
-        helpTooltip.setPosition(evt.coordinate);//设置帮助提示框的位置
 
-        helpTooltipElement.classList.remove('hidden');//移除帮助提示框的隐藏样式进行显示
 
-    };
 
-    map.on('pointermove', pointerMoveHandler); //地图容器绑定鼠标移动事件，动态显示帮助提示框内容
 
-    //地图绑定鼠标移出事件，鼠标移出时为帮助提示框设置隐藏样式
 
-    map.getViewport().on('mouseout', () => {
 
-        helpTooltipElement.addClass('hidden');
 
-    });
 
-}

BIN
src/components/easyMap/images/bg-land.png
Ver fichero


BIN
src/components/easyMap/images/bg-ocean.png
Ver fichero


BIN
src/components/easyMap/images/bg-sky.png
Ver fichero


La diferencia del archivo ha sido suprimido porque es demasiado grande
+ 0 - 12
src/components/easyMap/images/bg-switch.svg


+ 0 - 165
src/components/easyMap/index.vue
Ver fichero 

@@ -1,165 +0,0 @@
 
-<template>
 
-  <div class="easy-map">
 
-    <OlMap
 
-      ref="ref_olMap"
 
-      :baseMapLayers="_baseMapLayers"
 
-      :baseMapView="_baseMapView"
 
-      @olZoomChange="(zoom) => $emit('zoomChange', zoom)"
 
-      @olMapLoad="(map) => handleOlMapLoad(map)"
 
-    />
 
-    <template v-if="showBaseSwitch">
 
-      <div class="base-switch">
 
-        <el-popover
 
-          placement="left"
 
-          trigger="hover"
 
-          popper-class="easy-map-base-switch"
 
-        >
 
-          <template #reference>
 
-            <img class="__hover" src="./images/bg-switch.svg" />
 
-          </template>
 
-          <div class="base-switch-item">
 
-            <template v-for="item in _baseMapLayers">
 
-              <div
 
-                class="base-item __hover"
 
-                :class="{
 
-                  active: judgeBaseLayerActive(
 
-                    item.get('_easyMapOl_layerName')
 
-                  ),
 
-                }"
 
-                @click="
 
-                  ref_olMap.switchBaseLayer(item.get('_easyMapOl_layerName'))
 
-                "
 
-              >
 
-                <div class="label">{{ item.get("_label") }}</div>
 
-                <img :src="item.get('_img')" />
 
-              </div>
 
-            </template>
 
-          </div>
 
-        </el-popover>
 
-      </div>
 
-    </template>
 
-  </div>
 
-</template>
 
-
 
-<script lang="ts">
 
-import {
 
-  defineComponent,
 
-  onMounted,
 
-  ref,
 
-  toRefs,
 
-  reactive,
 
-  watch,
 
-  getCurrentInstance,
 
-  ComponentInternalInstance,
 
-  computed,
 
-  nextTick,
 
-} from "vue";
 
-import { useStore } from "vuex";
 
-import OlMap from "./ol-map.vue";
 
-import InitMapInfoClass from "./initMapInfo";
 
-import MeasureFunc from "./func/measure";
 
-import LocationFunc from "./func/location";
 
-
 
-export default defineComponent({
 
-  name: "EasyMap",
 
-  components: {
 
-    OlMap,
 
-  },
 
-  props: {
 
-    baseMapLayers: {},
 
-    baseMapView: {},
 
-    showBaseSwitch: {
 
-      default: false,
 
-    },
 
-  },
 
-  setup(props, { emit }) {
 
-    const store = useStore();
 
-    const that = (getCurrentInstance() as ComponentInternalInstance).appContext
 
-      .config.globalProperties;
 
-    const state = reactive({});
 
-    const ref_olMap = ref();
 
-    const _baseMapLayers = computed(
 
-      () => props.baseMapLayers || InitMapInfoClass.baseMapLayers
 
-    );
 
-    const _baseMapView = computed(
 
-      () => props.baseMapView || InitMapInfoClass.baseMapView
 
-    );
 
-    const easyMap = computed(() => ref_olMap.value?.easyMapOl);
 
-    const handleOlMapLoad = (map) => {
 
-      emit("easyMapLoad", map, {
 
-        getBBOX,
 
-        measure,
 
-        toLocation,
 
-        resetCenter,
 
-        baseLayer: {
 
-          switchMapper: _baseMapLayers.value,
 
-          switchLayer: ref_olMap.value.switchBaseLayer,
 
-          judgeActive: judgeBaseLayerActive,
 
-        },
 
-      });
 
-    };
 
-    const getBBOX = () => {
 
-      return easyMap.value.getView().calculateExtent(easyMap.value.getSize());
 
-    };
 
-    const judgeBaseLayerActive = (layerName) => {
 
-      return easyMap.value
 
-        ?.getLayers()
 
-        .getArray()
 
-        .filter((v) => v.get("_easyMapOl_layerGroupType") === "base")[0]
 
-        .getLayers()
 
-        .getArray()
 
-        .filter((v) => v.get("_easyMapOl_layerName") === layerName)[0]
 
-        ?.getVisible();
 
-    };
 
-    const measure = (type) => {
 
-      MeasureFunc(easyMap.value, type);
 
-    };
 
-    const toLocation = ({ position = null, zoom = null, wkt = null }) => {
 
-      LocationFunc({
 
-        map: easyMap.value,
 
-        position,
 
-        wkt,
 
-        zoom,
 
-      });
 
-    };
 
-    const resetCenter = () => {
 
-      easyMap.value.getView().setCenter(_baseMapView.value.center);
 
-      easyMap.value.getView().setZoom(_baseMapView.value.zoom);
 
-    };
 
-    onMounted(() => {
 
-      nextTick(() => {});
 
-    });
 
-    return {
 
-      ...toRefs(state),
 
-      ref_olMap,
 
-      _baseMapLayers,
 
-      _baseMapView,
 
-      easyMap,
 
-      getBBOX,
 
-      measure,
 
-      toLocation,
 
-      handleOlMapLoad,
 
-      judgeBaseLayerActive,
 
-    };
 
-  },
 
-});
 
-</script>
 
-<style scoped lang="scss">
 
-.easy-map {
 
-  width: 100%;
 
-  height: 100%;
 
-  position: relative;
 
-  .base-switch {
 
-    position: absolute;
 
-    z-index: 2;
 
-    right: 40px;
 
-    bottom: 70px;
 
-    width: 26px;
 
-    height: 26px;
 
-    background-color: #f2f8fd;
 
-    border-radius: 4px;
 
-    display: grid;
 
-    place-items: center;
 
-  }
 
-}
 
-</style>

+ 0 - 88
src/components/easyMap/initMapInfo.ts
Ver fichero 

@@ -1,88 +0,0 @@
 
-import * as layer from 'ol/layer'
 
-import * as source from 'ol/source'
 
-import HaituImg from './images/bg-ocean.png'
 
-import LutuImg from './images/bg-land.png'
 
-import WeixingImg from './images/bg-sky.png'
 
-// @ts-ignore
 
-import store from '@/store/index'
 
-
 
-const baseMapView = {
 
-  center: [109.6915958479584, 19.111636735969318],
 
-  projection: "EPSG:4326",
 
-  zoom: 9
 
-  // extent: [120.8953306326286,31.3667480047968,121.37735577911297,31.692561298253832]
 
-}
 
-const initBaseLayer = (obj: { key: any; name: any; label: any; maxZoom: any; minZoom: any; visible: any; img: any }) => {
 
-  const _layer = new layer.Tile({
 
-    source: new source.XYZ({
 
-      projection: "EPSG:4326",
 
-      url: `/${store.state.app.apiProxy.EzServer6Api}/EzServer6/Maps/${obj.key}/EzMap?Service=getImage&Type=RGB&ZoomOffset=0&Col={x}&Row={y}&Zoom={z}&V=0.3`,
 
-    }),
 
-    visible: obj.visible,
 
-  })
 
-  _layer.set('_maxZoom', obj.maxZoom)
 
-  _layer.set('_minZoom', obj.minZoom)
 
-  _layer.set('_easyMapOl_layerName', obj.name)
 
-  _layer.set('_label', obj.label)
 
-  _layer.set('_img', obj.img)
 
-  return _layer
 
-}
 
-const initLocalhost = (obj: { key?: string; name: any; label: any; maxZoom: any; minZoom: any; visible: any; img: any }) => {
 
-  const _layer = new layer.Tile({
 
-    source: new source.XYZ({
 
-      url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
 
-    }),
 
-    visible: obj.visible,
 
-  })
 
-  _layer.set('_maxZoom', obj.maxZoom)
 
-  _layer.set('_minZoom', obj.minZoom)
 
-  _layer.set('_easyMapOl_layerName', obj.name)
 
-  _layer.set('_label', obj.label)
 
-  _layer.set('_img', obj.img)
 
-  return _layer
 
-}
 
-
 
-const baseMapLayers = [
 
-  initBaseLayer({
 
-    key: 'sea',
 
-    name: 'base_haitu',
 
-    label: '海图',
 
-    maxZoom: 14,
 
-    minZoom: 5,
 
-    visible: false,
 
-    img: HaituImg
 
-  }),
 
-  !window.location.origin.includes('localhost')
 
-    ? initBaseLayer({
 
-      key: 'tdtsl',
 
-      name: 'base_tianditu',
 
-      label: '陆图',
 
-      maxZoom: 20,
 
-      minZoom: 8,
 
-      visible: true,
 
-      img: LutuImg
 
-    })
 
-  : initLocalhost({
 
-      key: 'tdtsl',
 
-      name: 'base_tianditu',
 
-      label: '陆图',
 
-      maxZoom: 20,
 
-      minZoom: 8,
 
-      visible: true,
 
-      img: LutuImg
 
-    }),
 
-  initBaseLayer({
 
-    key: 'hnimg',
 
-    name: 'base_weixingtu',
 
-    label: '卫星遥感图',
 
-    maxZoom: 19,
 
-    minZoom: 8,
 
-    visible: false,
 
-    img: WeixingImg
 
-  }),
 
-]
 
-
 
-export default {
 
-  baseMapView,
 
-  baseMapLayers,
 
-}

+ 0 - 296
src/components/easyMap/ol-map.vue
Ver fichero 

@@ -1,296 +0,0 @@
 
-<template>
 
-  <div class="easy-map-ol">
 
-    <div class="map" ref="ref_easyMapOl"/>
 
-    <div class="easy-map_ol-mouse-position" ref="ref_easyMap_olMousePosition" @click="controlMousePosition.format = !controlMousePosition.format">
 
-      <template v-if="controlMousePosition.format">
 
-        {{controlMousePosition.formatLongitude}}<br/>
 
-        {{controlMousePosition.formatLatitude}}
 
-      </template>
 
-      <template v-else>
 
-        {{controlMousePosition.longitude}}<br/>
 
-        {{controlMousePosition.latitude}}
 
-      </template>
 
-    </div>
 
-    <div class="easy-map_ol-zoom" ref="ref_easyMap_olZoom">
 
-      <div class="easy-map_ol-zoom-button" @click="zoomChange(true)">+</div>
 
-      <div class="easy-map_ol-zoom-num">{{Math.floor(interactionZoom)}}</div>
 
-      <div class="easy-map_ol-zoom-button" @click="zoomChange(false)">-</div>
 
-    </div>
 
-    <div class="easy-map_ol-scaleLine" ref="ref_easyMap_scaleLine"></div>
 
-  </div>
 
-</template>
 
-
 
-<script lang="ts">
 
-  import {
 
-    defineComponent,
 
-    onMounted,
 
-    ref,
 
-    toRefs,
 
-    reactive,
 
-    watch,
 
-    getCurrentInstance,
 
-    ComponentInternalInstance,
 
-    computed,
 
-    nextTick,
 
-  } from "vue";
 
-  import { useStore } from "vuex";
 
-  import * as ol from 'ol'
 
-  import * as style from 'ol/style'
 
-  import * as layer from 'ol/layer'
 
-  import * as source from 'ol/source'
 
-  import * as geom from 'ol/geom'
 
-  import * as proj from 'ol/proj'
 
-  import * as interaction from 'ol/interaction'
 
-  import * as coordinate from 'ol/coordinate'
 
-  import * as control from 'ol/control'
 
-
 
-  export default defineComponent({
 
-    name: "",
 
-    components: {
 
-    },
 
-    props: {
 
-      baseMapLayers: { default: () => [] },
 
-      baseMapView: {},
 
-    },
 
-    setup(props, { emit }) {
 
-      const store = useStore();
 
-      const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties;
 
-      const state = reactive({
 
-        controlMousePosition: {
 
-          longitude: <any>null,
 
-          latitude: <any>null,
 
-          format: false,
 
-          formatLongitude: <any>null,
 
-          formatLatitude: <any>null,
 
-        },
 
-        interactionZoom: props.baseMapView.zoom,
 
-      });
 
-      const easyMapOl = ref()
 
-      const ref_easyMapOl = ref()
 
-      const ref_easyMap_olMousePosition = ref()
 
-      const ref_easyMap_olZoom = ref()
 
-      const ref_easyMap_scaleLine = ref()
 
-      const initMap = () => {
 
-        easyMapOl.value = new ol.Map({
 
-          target: ref_easyMapOl.value,
 
-          layers: [
 
-            new layer.Group({
 
-              _easyMapOl_layerGroupType: 'base',
 
-              layers: props.baseMapLayers,
 
-              zIndex: 1
 
-            }),
 
-          ],
 
-          view: new ol.View(props.baseMapView),
 
-          controls: control.defaults({
 
-            attribution: false,
 
-            rotate: false,
 
-            zoom: false,
 
-          }).extend([
 
-            new control.MousePosition({
 
-              target: ref_easyMap_olMousePosition.value,
 
-              coordinateFormat: (e) => {
 
-                state.controlMousePosition.longitude = e[0]
 
-                state.controlMousePosition.latitude = e[1]
 
-                const f = coordinate.toStringHDMS(e, 0).split(' ')
 
-                state.controlMousePosition.formatLatitude = `${f[0]} ${f[1]} ${f[2]} ${f[3]}`
 
-                state.controlMousePosition.formatLongitude = `${f[4]} ${f[5]} ${f[6]} ${f[7]}`
 
-                return null
 
-              },
 
-              placeholder: ''
 
-            }),
 
-            new control.Zoom({
 
-              target: ref_easyMap_olZoom.value,
 
-            }),
 
-            new control.ScaleLine({
 
-              target: ref_easyMap_scaleLine.value,
 
-              bar: true
 
-            })
 
-          ]),
 
-          interactions: interaction.defaults({
 
-            doubleClickZoom: false
 
-          })
 
-        })
 
-        easyMapOl.value.getView().on('change:resolution', e => {
 
-          state.interactionZoom = e.target.getZoom()
 
-          emit('olZoomChange', state.interactionZoom)
 
-        })
 
-        const defaultBaseLayer = props.baseMapLayers.filter(v => v.getVisible())[0]
 
-        setLayerView(defaultBaseLayer)
 
-        emit('olMapLoad', easyMapOl.value)
 
-        easyMapOl.value.on('contextmenu', e => {
 
-          window.event.returnValue = false
 
-          if (window?.event?.shiftKey) {
 
-            const str = document.createElement('input')
 
-            str.setAttribute('value', `POINT(${e.coordinate[0]} ${e.coordinate[1]})`)
 
-            document.body.appendChild(str)
 
-            str.select()
 
-            document.execCommand('copy')
 
-            document.body.removeChild(str)
 
-          }
 
-        })
 
-      }
 
-      const zoomChange = (flag) => {
 
-        state.interactionZoom = flag ? state.interactionZoom + 1 : state.interactionZoom - 1
 
-        if (state.interactionZoom > easyMapOl.value.getView().getMaxZoom()) {
 
-          state.interactionZoom = easyMapOl.value.getView().getMaxZoom()
 
-        } else if (state.interactionZoom < easyMapOl.value.getView().getMinZoom()) {
 
-          state.interactionZoom = easyMapOl.value.getView().getMinZoom()
 
-        }
 
-        easyMapOl.value.getView().setZoom(state.interactionZoom)
 
-      }
 
-      const baseLayersMap = computed(() => {
 
-        const map = new Map()
 
-        easyMapOl.value?.getLayers().getArray().filter(v => v.get('_easyMapOl_layerGroupType') === 'base')[0].getLayers().getArray().forEach(v => {
 
-          map.set(v.get('_easyMapOl_layerName'), v)
 
-        })
 
-        return map
 
-      })
 
-      const switchBaseLayer = (layerName) => {
 
-        baseLayersMap.value.forEach(v => {
 
-          if (layerName === v.get('_easyMapOl_layerName')) {
 
-            setLayerView(v)
 
-            v.setVisible(true)
 
-          } else {
 
-            v.setVisible(false)
 
-          }
 
-        })
 
-      }
 
-      const setLayerView = (_layer) => {
 
-        easyMapOl.value.getView().setMaxZoom(_layer.get('_maxZoom'))
 
-        easyMapOl.value.getView().setMinZoom(_layer.get('_minZoom'))
 
-      }
 
-      onMounted(() => {
 
-        nextTick(() => {
 
-          initMap()
 
-          setTimeout(() => {
 
-            easyMapOl.value.updateSize();
 
-            easyMapOl.value.render()
 
-          })
 
-        })
 
-      })
 
-      return {
 
-        ...toRefs(state),
 
-        ref_easyMapOl,
 
-        ref_easyMap_olMousePosition,
 
-        ref_easyMap_olZoom,
 
-        ref_easyMap_scaleLine,
 
-        easyMapOl,
 
-        zoomChange,
 
-        switchBaseLayer,
 
-        baseLayersMap,
 
-      }
 
-    },
 
-  });
 
-</script>
 
-<style scoped lang="scss">
 
-.easy-map-ol {
 
-  width: 100%;
 
-  height: 100%;
 
-  position: relative;
 
-  .map {
 
-    width: 100%;
 
-    height: 100%;
 
-    background-color: #bfdbf3;
 
-  }
 
-  .easy-map_ol-mouse-position {
 
-    cursor: pointer;
 
-    position: absolute;
 
-    z-index: 1;
 
-    color: #000;
 
-    top: unset;
 
-    font-size: 14px;
 
-    right: 10px;
 
-    bottom: 10px;
 
-    height: 50px;
 
-    padding: 5px 10px;
 
-    background-color: #fff;
 
-    border-radius: 2px;
 
-    line-height: 22px;
 
-    opacity: .8;
 
-  }
 
-  .easy-map_ol-zoom {
 
-    position: absolute;
 
-    bottom: 70px;
 
-    right: 10px;
 
-    >div {
 
-      display: flex;
 
-      align-items: center;
 
-      justify-content: center;
 
-      margin: 0;
 
-      padding: 0;
 
-      color: #000;
 
-      font-size: 12px;
 
-      font-weight: 700;
 
-      height: 20px;
 
-      width: 20px;
 
-      background-color: #fff;
 
-    }
 
-    .easy-map_ol-zoom-num {
 
-      border-top: 1px solid rgba(153, 153, 153, 0.32);
 
-      border-bottom: 1px solid rgba(153, 153, 153, 0.32);
 
-    }
 
-    .easy-map_ol-zoom-button {
 
-      cursor: pointer;
 
-      &:hover {
 
-        opacity: 0.7;
 
-      }
 
-    }
 
-  }
 
-  .easy-map_ol-scaleLine {
 
-    position: absolute;
 
-    bottom: 20px;
 
-    left: 20px;
 
-  }
 
-  .easy-map_switchBaseLayer {
 
-    position: absolute;
 
-    left: 20px;
 
-    bottom: 40px;
 
-  }
 
-  ::v-deep(.ol-zoom) {
 
-    display: none;
 
-  }
 
-  ::v-deep(.ol-scale-bar-inner) {
 
-    position: absolute;
 
-    bottom: 1%;
 
-    left: 1%;
 
-
 
-    &>div>div:nth-child(2) {
 
-      .ol-scale-singlebar {
 
-        border-left: 2px solid #807A7A;
 
-      }
 
-    }
 
-
 
-    &>div>div:nth-child(5) {
 
-      .ol-scale-singlebar {
 
-        border-right: 2px solid #807A7A;
 
-      }
 
-    }
 
-
 
-    .ol-scale-step-text {
 
-      padding-bottom: 20px;
 
-      font-size: 12px;
 
-      transform: scale(0.8);
 
-      position: absolute;
 
-      bottom: -5px;
 
-      font-size: 12px;
 
-      z-index: 11;
 
-      color: #000000;
 
-      text-shadow: -2px 0 #ffffff,
 
-      0 2px #ffffff,
 
-      2px 0 #ffffff,
 
-      0 -2px #ffffff;
 
-    }
 
-
 
-    .ol-scale-singlebar {
 
-      border: 0;
 
-      background-color: transparent !important;
 
-      border-bottom: 2px solid #807A7A;
 
-      height: 10px;
 
-    }
 
-
 
-    .ol-scale-step-marker {
 
-      display: none;
 
-    }
 
-  }
 
-}
 
-</style>

+ 1 - 1
src/main.js
Ver fichero 

@@ -5,7 +5,7 @@ import store from "./store"
 
 import ElementPlus from 'element-plus'
 
 import 'element-plus/dist/index.css'
 
 import './style/cus-element.scss'
 
-import * as util from '@/utils/util.ts'
 
+import * as util from '@/utils/util'
 
 const app = createApp(App)
 
 app.use(router)
 
 app.use(store)

+ 1 - 0
src/out/config.js
Ver fichero 

@@ -1,3 +1,4 @@
 
+// @ts-ignore
 
 window.cusConfig = {
 
   trackSource: [
 
     ['TIANAO_RADAR', {

+ 1 - 1
src/router/index.ts
Ver fichero 

@@ -2,7 +2,7 @@ import { RouteRecordRaw, createRouter, createWebHistory } from 'vue-router'
 
 const routes = [
 
     {
 
         path: '/',
 
-        component: () => import('@/views/init-speed-track/index.vue'),
 
+        component: () => import('@/views/screen/index.vue'),
 
     }
 
 ]

+ 0 - 2
src/store/index.ts
Ver fichero 

@@ -1,6 +1,5 @@
 
 import { createStore } from "vuex";
 
 import app from "./modules/app";
 
-import easyMap from "./modules/easy-map";
 
 
 export default createStore({
 
   state: {},
 
@@ -8,6 +7,5 @@ export default createStore({
 
   actions: {},
 
   modules: {
 
     app,
 
-    easyMap
 
   },
 
 });

+ 0 - 38
src/store/modules/easy-map.ts
Ver fichero 

@@ -1,38 +0,0 @@
 
-const state = {
 
-	clickInfo: {
 
-		layerName: null,
 
-		value: null,
 
-		feature: null,
 
-		isClick: false,
 
-		e: null
 
-	},
 
-	hoverInfo: {
 
-		layerName: null,
 
-		value: null,
 
-		feature: null
 
-	},
 
-}
 
-
 
-const mutations = {
 
-	SET_INFO (state: { clickInfo: any; hoverInfo: any }, {data, type}: any) {
 
-		if (type === 'click') {
 
-			state.clickInfo = data
 
-		} else if (type === 'hover') {
 
-			state.hoverInfo = data
 
-		}
 
-	},
 
-}
 
-
 
-const actions = {
 
-	// @ts-ignore
 
-	LOAD_INFO ({ commit }, {data, type}) {
 
-		commit('SET_INFO', {data, type})
 
-	},
 
-}
 
-
 
-export default {
 
-	namespaced: true,
 
-	state,
 
-	mutations,
 
-	actions
 
-}

+ 0 - 391
src/utils/easyMap.ts
Ver fichero 

@@ -1,391 +0,0 @@
 
-import * as ol from 'ol'
 
-import * as style from 'ol/style'
 
-import * as layer from 'ol/layer'
 
-import * as source from 'ol/source'
 
-import * as geom from 'ol/geom'
 
-import * as proj from 'ol/proj'
 
-import * as format from 'ol/format'
 
-import * as extent from 'ol/extent'
 
-import store from '@/store/index'
 
-
 
-let hasPointClick = false
 
-let zIndex = 999
 
-let ctrlHideListGlobal = []
 
-const activeFeatureMap = new Map()
 
-const hoverFeatureMap = new Map()
 
-let moveFlag = false
 
-
 
-export const initShape = ({map, layerName, list, clickEl, hoverEl, hoverClick = false, clickHandle = (feature: any) => {}, layerZIndex}) => {
 
-  const _layers = map.getLayers().getArray().filter(v => v.get('easyMapLayerName') === layerName)
 
-  let realLayer = _layers.length > 0 ? _layers[0] : null
 
-  const features = []
 
-  const featuresMap = new Map()
 
-  list.forEach((v, i) => {
 
-    try {
 
-      const feat = new format.WKT().readFeature(v.easyMapParams.position)
 
-      feat.set('layerName', layerName)
 
-      feat.set('easyMap', v)
 
-      feat.set('_geom', feat.getGeometry())
 
-      feat.setStyle(v.easyMapParams.normalStyle)
 
-      feat.set('normalStyle', v.easyMapParams.normalStyle)
 
-      feat.set('activeStyle', v.easyMapParams.activeStyle ? v.easyMapParams.activeStyle : v.easyMapParams.normalStyle)
 
-      feat.set('hoverStyle', v.easyMapParams.hoverStyle ? v.easyMapParams.hoverStyle : (v.easyMapParams.activeStyle ? v.easyMapParams.activeStyle : v.easyMapParams.normalStyle))
 
-      feat.set('backStyle', v.easyMapParams.normalStyle)
 
-      feat.set('layerZ', realLayer ? realLayer.getZIndex() : layerZIndex ? layerZIndex : zIndex)
 
-      feat.set('featureZ', i)
 
-      feat.set('value', v.value)
 
-      feat.setId(v.easyMapParams.id)
 
-      v.easyMapParams.featureSetHandle?.(feat)
 
-      features.push(feat)
 
-      featuresMap.set(v.easyMapParams.id, feat)
 
-    } catch (e) {
 
-      console.log('v：\n%o  e：\n%o', v, e)
 
-    }
 
-  })
 
-  const vectorSource = new source.Vector({
 
-    features: features,
 
-    wrapX: false
 
-  });
 
-  let clickDialog = clickEl ? map.getOverlayById(clickEl.id) : null
 
-  let hoverDialog = hoverEl ? map.getOverlayById(hoverEl.id) : null
 
-  const clickClose = () => {
 
-    clickDialog?.setPosition(undefined)
 
-  }
 
-  const hoverClose = () => {
 
-    hoverDialog?.setPosition(undefined)
 
-  }
 
-  const setActive = (feature, isClick = false, e = null) => {
 
-    if (feature) {
 
-      feature.set('backStyle', feature.getStyle())
 
-      feature.setStyle(hoverFeatureMap.get(layerName)?.getId() === feature.getId() ? feature.get('hoverStyle') : feature.get('activeStyle'))
 
-      activeFeatureMap.set(layerName, feature)
 
-      store.dispatch('easyMap/LOAD_INFO', {
 
-        type: 'click',
 
-        data: {
 
-          layerName: layerName,
 
-          value: feature.get('easyMap'),
 
-          feature: feature,
 
-          isClick,
 
-          e
 
-        }
 
-      })
 
-    }
 
-  }
 
-  const setHover = (feature) => {
 
-    if (feature) {
 
-      if (hoverDialog && !(hoverClick || activeFeatureMap.get(layerName)?.getId() !== hoverFeatureMap.get(layerName)?.getId())) {
 
-        hoverClose()
 
-      }
 
-      feature.set('backStyle', feature.getStyle())
 
-      feature.setStyle(feature.get('hoverStyle'))
 
-      hoverFeatureMap.set(layerName, feature)
 
-      store.dispatch('easyMap/LOAD_INFO', {
 
-        type: 'hover',
 
-        data: {
 
-          layerName: layerName,
 
-          value: feature.get('easyMap'),
 
-          feature: feature
 
-        }
 
-      })
 
-    }
 
-  }
 
-  if (hoverFeatureMap.get(layerName)) {
 
-    hoverFeatureMap.set(layerName, vectorSource.getFeatureById(hoverFeatureMap.get(layerName).getId()))
 
-    setHover(hoverFeatureMap.get(layerName))
 
-  } else {
 
-    hoverFeatureMap.set(layerName, null)
 
-  }
 
-  if (activeFeatureMap.get(layerName)) {
 
-    activeFeatureMap.set(layerName, vectorSource.getFeatureById(activeFeatureMap.get(layerName).getId()))
 
-    setActive(activeFeatureMap.get(layerName))
 
-  } else {
 
-    activeFeatureMap.set(layerName, null)
 
-  }
 
-    if (realLayer) {
 
-    realLayer.setSource(vectorSource)
 
-  } else {
 
-    realLayer = new layer.VectorImage({
 
-      source: vectorSource,
 
-      easyMapLayerName: layerName,
 
-      layerType: 'easyMap',
 
-      zIndex: layerZIndex ? layerZIndex : zIndex--
 
-    })
 
-    map.addLayer(realLayer)
 
-    map.on('movestart', e => {
 
-      moveFlag = true
 
-      map.un('pointermove', mapPointerMove)
 
-      map.un('singleclick', mapSingleClick)
 
-      map.un('contextmenu', mapContextmenu)
 
-    })
 
-    map.on('moveend', e => {
 
-      map.on('singleclick', mapSingleClick)
 
-      map.on('pointermove', mapPointerMove)
 
-      map.on('contextmenu', mapContextmenu)
 
-      moveFlag = false
 
-    })
 
-    if (clickEl) {
 
-      clickDialog = setOverlay(clickEl)
 
-      map.addOverlay(clickDialog)
 
-    }
 
-    const mapSingleClick = e => {
 
-      let pointFlag = true
 
-      clickDialog?.setPosition(undefined)
 
-      // activeFeatureMap.get(layerName)?.setStyle(activeFeatureMap.get(layerName).get('normalStyle'))
 
-      let activeLayer = {
 
-        zIndex: 0,
 
-        layerName: null,
 
-      }
 
-      map.forEachFeatureAtPixel(e.pixel, (feature) => {
 
-        if (feature.get('layerZ') >= activeLayer.zIndex) {
 
-          activeLayer = {
 
-            zIndex: feature.get('layerZ'),
 
-            layerName: feature.get('layerName'),
 
-          }
 
-        }
 
-      }, {
 
-        hitTolerance: 0,
 
-      });
 
-      map.forEachFeatureAtPixel(e.pixel, (feature) => {
 
-        if (activeLayer.layerName === layerName && feature.get('layerName') === layerName && !hasPointClick) {
 
-          if (pointFlag) {
 
-            hasPointClick = true
 
-            if (activeFeatureMap.get(layerName)) {
 
-              activeFeatureMap.get(layerName).set('backStyle', activeFeatureMap.get(layerName).getStyle())
 
-              activeFeatureMap.get(layerName).setStyle(feature.get('normalStyle'))
 
-            }
 
-            pointFlag = false
 
-            if (!hoverClick) {
 
-              hoverClose()
 
-              hoverFeatureMap.delete(layerName)
 
-            }
 
-            setActive(feature, true, e)
 
-            clickHandle(feature)
 
-            if (clickDialog) {
 
-              if (feature.getGeometry().getType() !== 'Point') {
 
-                clickDialog.setPosition(e.coordinate)
 
-              } else {
 
-                clickDialog.setPosition(feature.getGeometry().getCoordinates())
 
-              }
 
-            }
 
-            setTimeout(() => {
 
-              hasPointClick = false
 
-            }, 100)
 
-          }
 
-        }
 
-      }, {
 
-        hitTolerance: 0,
 
-      });
 
-    }
 
-    map.on('singleclick', mapSingleClick)
 
-    if (hoverEl) {
 
-      hoverDialog = setOverlay(hoverEl)
 
-      map.addOverlay(hoverDialog)
 
-    }
 
-    let pointerMoveTime = null
 
-    const mapPointerMove = e => {
 
-      clearTimeout(pointerMoveTime)
 
-      pointerMoveTime = setTimeout(() => {
 
-        if (!moveFlag) {
 
-          let isFeature = false
 
-          let hoverLayer = {
 
-            zIndex: 0,
 
-            layerName: null
 
-          }
 
-          map.forEachFeatureAtPixel(e.pixel, (feature) => {
 
-            if (feature.get('layerZ') > hoverLayer.zIndex) {
 
-              hoverLayer = {
 
-                zIndex: feature.get('layerZ'),
 
-                layerName: feature.get('layerName')
 
-              }
 
-            }
 
-            isFeature = true
 
-          }, {
 
-            hitTolerance: 0,
 
-          });
 
-          const reset = () => {
 
-            hoverDialog?.setPosition(undefined)
 
-            hoverFeatureMap.get(layerName)?.setStyle(hoverFeatureMap.get(layerName).get('backStyle'))
 
-            hoverFeatureMap.delete(layerName)
 
-          }
 
-          if (layerName !== hoverLayer.layerName) {
 
-            reset()
 
-          }
 
-          if (!isFeature) {
 
-            reset()
 
-          }
 
-          let pointFlag = true
 
-          map.forEachFeatureAtPixel(e.pixel, (feature) => {
 
-            if (feature.get('layerName') === layerName) {
 
-              if (pointFlag) {
 
-                if (layerName !== hoverLayer.layerName) {
 
-                  hoverDialog?.setPosition(undefined)
 
-                } else {
 
-                  pointFlag = false
 
-                  if (hoverFeatureMap.get(layerName)?.getId() !== feature.getId()) {
 
-                    if (feature.getId() !== hoverFeatureMap.get(layerName)?.getId()) {
 
-                      reset()
 
-                    }
 
-                    setHover(feature)
 
-                    if (hoverDialog && (hoverClick || activeFeatureMap.get(layerName)?.getId() !== hoverFeatureMap.get(layerName)?.getId())) {
 
-                      if (feature.getGeometry().getType() !== 'Point') {
 
-                        hoverDialog.setPosition(e.coordinate)
 
-                      } else {
 
-                        hoverDialog.setPosition(feature.getGeometry().getCoordinates())
 
-                      }
 
-                    }
 
-                  }
 
-                }
 
-              }
 
-            }
 
-          }, {
 
-            hitTolerance: 0,
 
-          });
 
-        }
 
-      }, 10)
 
-    }
 
-    map.on('pointermove', mapPointerMove)
 
-    let ctrlHideList = []
 
-    const mapContextmenu = e => {
 
-      let isFeature = false
 
-      let hoverLayer = {
 
-        zIndex: 0,
 
-        layerName: null
 
-      }
 
-      map.forEachFeatureAtPixel(e.pixel, (feature) => {
 
-        if (feature.get('layerZ') > hoverLayer.zIndex) {
 
-          hoverLayer = {
 
-            zIndex: feature.get('layerZ'),
 
-            layerName: feature.get('layerName')
 
-          }
 
-        }
 
-        isFeature = true
 
-      }, {
 
-        hitTolerance: 0,
 
-      });
 
-      if (ctrlHideList.length > 0 && !window?.event?.ctrlKey && !window?.event.altKey) {
 
-        if (ctrlHideListGlobal[ctrlHideListGlobal.length - 1] === ctrlHideList[ctrlHideList.length - 1]) {
 
-          setTimeout(() => {
 
-            switchVisible([ctrlHideList.pop()], true)
 
-            ctrlHideListGlobal.pop()
 
-          }, 100)
 
-        }
 
-      } else if (ctrlHideList.length > 0 && window?.event.altKey) {
 
-        switchVisible(ctrlHideList, true)
 
-        ctrlHideList = []
 
-        ctrlHideListGlobal = []
 
-      }
 
-      let pointFlag = true
 
-      map.forEachFeatureAtPixel(e.pixel, (feature) => {
 
-        if (feature.get('layerName') === layerName) {
 
-          if (pointFlag) {
 
-            if (feature.get('layerName') === hoverLayer.layerName) {
 
-              pointFlag = false
 
-              if (window?.event?.ctrlKey) {
 
-                switchVisible([feature.get('easyMap').easyMapParams.id], false)
 
-                ctrlHideList.push(feature.get('easyMap').easyMapParams.id)
 
-                ctrlHideListGlobal.push(feature.get('easyMap').easyMapParams.id)
 
-              }
 
-            }
 
-          }
 
-        }
 
-      }, {
 
-        hitTolerance: 0,
 
-      });
 
-    }
 
-    map.on('contextmenu', mapContextmenu)
 
-  }
 
-  const switchVisible = (arr, show) => {
 
-    arr.forEach(v => {
 
-      const feat = featuresMap.get(v)
 
-      if (show) {
 
-        feat.setGeometry(feat.get('_geom'))
 
-      } else {
 
-        if (feat.getGeometry().getCoordinates().toString() !== [0, 0].toString()) {
 
-          feat.setGeometry(new geom.Point([0, 0]))
 
-        }
 
-      }
 
-    })
 
-  }
 
-  const removeRealLayer = () => {
 
-    map.removeOverlay(clickDialog)
 
-    map.removeOverlay(hoverDialog)
 
-    map.removeLayer(realLayer)
 
-  }
 
-  return {
 
-    clickDialog, hoverDialog, clickClose, hoverClose, switchVisible, features, realLayer, removeRealLayer, setActive
 
-  }
 
-}
 
-
 
-const setOverlay = (el) => {
 
-  const over = new ol.Overlay({
 
-    id: el.id,
 
-    element: el.element,
 
-    autoPan: false,
 
-    offset: el.offset,
 
-    positioning: el.positioning,
 
-    stopEvent: true,
 
-    autoPanAnimation: {
 
-      duration: 250
 
-    }
 
-  })
 
-  return over
 
-}
 
-
 
-/**
 
- *
 
- * @param map         地图实例，传了直接定位到中心点最大可视范围，不传返回中心点和最大分辨率
 
- * @param position    坐标数组
 
- * @param L           缩放比例系数，数值越小，要素边界越靠近中心
 
- */
 
-export const getShapeView = (map, position, L = 600) => {
 
-  const center = extent.getCenter(extent.boundingExtent(position))
 
-  let x = 0
 
-  let y = 0
 
-  position.forEach(v => {
 
-    if (Math.abs(v[0] - center[0]) > x) {
 
-      x = Math.abs(v[0] - center[0])
 
-    }
 
-    if (Math.abs(v[1] - center[1]) > y) {
 
-      y = Math.abs(v[1] - center[1])
 
-    }
 
-  })
 
-  const resolution = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)) / (L / document.body.clientWidth * document.body.clientHeight)
 
-  if (map) {
 
-    map.getView().animate({
 
-      center, resolution
 
-    })
 
-  }
 
-  return {
 
-    center, resolution
 
-  }
 
-}
 
-
 
-export const formatPosition = {
 
-  wptTwl: (arr) => {  // WKT POINT ARR TO WKT LINESTRING
 
-    const temp = arr.map(v => new format.WKT().readFeature(v).getGeometry().getCoordinates())
 
-    return new format.WKT().writeGeometry(new geom.LineString(proj.fromLonLat(temp, 'EPSG:4326')), {
 
-      dataProjection: 'EPSG:4326'
 
-    })
 
-  },
 
-  cptTwpt: (cpt) => {  // coordinates POINT TO WKT POINT
 
-    return `POINT(${cpt[0]} ${cpt[1]})`
 
-  },
 
-  wptTcpt: (wpt) => {  // WKT POINT TO coordinates POINT
 
-    return new format.WKT().readFeature(wpt).getGeometry().getCoordinates()
 
-  },
 
-  wpnTcpn: (wpn) => {  // WKT POLYGON TO coordinates POLYGON
 
-    return new format.WKT().readFeature(wpn).getGeometry().getCoordinates()
 
-  },
 
-  cpnTwpn: (cpn) => {  // coordinates POLYGON TO WKT POLYGON
 
-    return `POLYGON(${cpn.map(v => '(' + v.map(c => `${c[0]} ${c[1]}`).join(',') + ')')})`
 
-  },
 
-  cmpnTwmpn: (cmpt) => {  // coordinates MULTIPOLYGON TO WKT MULTIPOLYGON
 
-    return `MULTIPOLYGON(${cmpt.map(v1 => `(${v1.map(v => '(' + v.map(c => `${c[0]} ${c[1]}`).join(',') + ')')})`)})`
 
-  },
 
-  wmpnTcmpn: (wmpn) => {  // WKT MULTIPOLYGON TO coordinates MULTIPOLYGON
 
-    return new format.WKT().readFeature(wmpn).getGeometry().getCoordinates()
 
-  },
 
-  wlTcl: (wl) => {  // WKT LINESTRING TO coordinates LINESTRING
 
-    return new format.WKT().readFeature(wl).getGeometry().getCoordinates()
 
-  }
 
-}

+ 6 - 208
src/utils/util.ts
Ver fichero 

@@ -5,35 +5,6 @@ export const isValue = (val: any) => {
 
   return true
 
 }
 
 
-export const structureParams = (array: Array<any>, attribute: string) => {
 
-  const endArray: any[] = []
 
-  array.forEach(v => {
 
-    endArray.push(v[attribute])
 
-  })
 
-  return endArray
 
-}
 
-
 
-export const replaceParams = (array: Array<any>, reArray: Array<any>, attribute: string, reAttribute: string) => {
 
-  const endArray: any[] = []
 
-  const endAllArray: any[] = []
 
-  array.forEach(v => {
 
-    reArray.forEach(rv => {
 
-      if (v === rv[attribute]) {
 
-        endArray.push(rv[reAttribute])
 
-        endAllArray.push(rv)
 
-      }
 
-    })
 
-  })
 
-  return {
 
-    replace: endArray,
 
-    all: endAllArray
 
-  }
 
-}
 
-
 
-export const copyObject = (ob: Object) => {
 
-  return JSON.parse(JSON.stringify(ob))
 
-}
 
-
 
 export const arrayToMap = (array: Array<any>, key: any) => {
 
   const map = new Map()
 
   array.forEach((v: any) => {
 
@@ -42,49 +13,7 @@ export const arrayToMap = (array: Array<any>, key: any) => {
 
   return map
 
 }
 
 
-/**
 
- * 通过某个字段在一个多级数组中查找数据
 
- * @param data 目标数组，不能包含函数
 
- * @param current 目标数据
 
- * @param key 查找的字段
 
- * @param children 子集集合字段
 
- */
 
-export const findInListData = (data: Array<any>, current:any, key = "id", children = 'children') => {
 
-
 
-  for(let item of data){
 
-
 
-    if(item[key] && JSON.parse(JSON.stringify(item[key])) == JSON.parse(JSON.stringify(current))) return item
 
-
 
-    if(!!item[children] && Array.isArray(item[children]) && item[children].length > 0){
 
-
 
-      const findChildData = findInListData(item[children], current, key, children)
 
-
 
-      if(findChildData) return findChildData
 
-
 
-    }
 
-
 
-  }
 
-
 
-  return null
 
-}
 
-
 
-export const formatGetParam = (params: Object) => {
 
-  let paramUrl = ''
 
-  Object.keys(params).forEach((v, i) => {
 
-    paramUrl += i === 0 ? `${v}=${encodeURIComponent(params[v])}` : `&${v}=${encodeURIComponent(params[v])}`
 
-  })
 
-  return paramUrl
 
-}
 
-
 
-export const formatTableHeadFilters = (arr, text = 'dictLabel', value = 'dictValue') => {
 
-  return arr.map(v => {
 
-    v.value = v[value]
 
-    v.text = v[text]
 
-    return v
 
-  })
 
-}
 
-
 
-export const YMDHms = (date) => {
 
+export const YMDHms = (date: string | number | Date) => {
 
   const _date = new Date(date)
 
   const Y = `${_date.getFullYear()}`;
 
   const M = `${_date.getMonth() + 1 < 10 ? `0${_date.getMonth() + 1}` : _date.getMonth() + 1}`;
 
@@ -95,7 +24,7 @@ export const YMDHms = (date) => {
 
   return `${Y}-${M}-${D} ${H}:${m}:${s}`;
 
 }
 
 
-export const YMD = (date) => {
 
+export const YMD = (date: string | number | Date) => {
 
   const _date = new Date(date)
 
   const Y = `${_date.getFullYear()}`;
 
   const M = `${_date.getMonth() + 1 < 10 ? `0${_date.getMonth() + 1}` : _date.getMonth() + 1}`;
 
@@ -103,19 +32,7 @@ export const YMD = (date) => {
 
   return `${Y}-${M}-${D}`;
 
 }
 
 
-//防抖
 
-export const debounce = function (cb, ms = 0) {
 
-  let timer = null
 
-  return function () {
 
-    if (timer) clearTimeout(timer)
 
-    timer = setTimeout(() => {
 
-      cb.apply(this, arguments)
 
-      timer = null
 
-    }, ms)
 
-  }
 
-}
 
-
 
-export const comTime = (time) => {
 
+export const comTime = (time: any) => {
 
   const sAll = time
 
   const d = Math.floor(sAll / (1000 * 60 * 60 * 24))
 
   const h = Math.floor((sAll - d * (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
 
@@ -126,7 +43,7 @@ export const comTime = (time) => {
 
   }
 
 }
 
 
-export const comTimeByArea = (start, end) => {
 
+export const comTimeByArea = (start: string | number | Date, end: string | number | Date) => {
 
   const sAll = new Date(end).getTime() - new Date(start).getTime()
 
   const d = Math.floor(sAll / (1000 * 60 * 60 * 24))
 
   const h = Math.floor((sAll - d * (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
 
@@ -137,7 +54,7 @@ export const comTimeByArea = (start, end) => {
 
   }
 
 }
 
 
-export const deepAssign = (...obj) => {
 
+export const deepAssign = (...obj: Object[]) => {
 
   const result = Object.assign({}, ...obj)
 
   for (let item of obj) {
 
     for (let [idx, val] of Object.entries(item)) {
 
@@ -151,7 +68,7 @@ export const deepAssign = (...obj) => {
 
   return result
 
 }
 
 
-export const copy = (value) => {
 
+export const copy = (value: string) => {
 
   const str = document.createElement('input')
 
   str.setAttribute('value', value)
 
   document.body.appendChild(str)
 
@@ -160,122 +77,3 @@ export const copy = (value) => {
 
   document.body.removeChild(str)
 
   console.log(value)
 
 }
 
-
 
-/**
 
- *
 
- * @param precision 精度  1、0.1 、0.01……
 
- * @param colorArr
 
- * [
 
- *    [20.1, '#111111'],
 
- *    [20.3, '#dddddd'],
 
- *    [20.7, '#eeeeee'],
 
- * ]
 
- * @return colorMap
 
- * new Map([
 
- *    [20.1, '#111111']
 
- *    ……
 
- *    [20.3, '#dddddd']
 
- *    ……
 
- *    [20.7, '#eeeeee']
 
- * ])
 
- */
 
-export const getGradientColorArray = (precision, colorArr) => {
 
-  // 将hex表示方式转换为rgb表示方式(这里返回rgb数组模式)
 
-  const colorRgb = (sColor) => {
 
-    const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
 
-    let _sColor = sColor.toLowerCase();
 
-    if (_sColor && reg.test(_sColor)) {
 
-      if (_sColor.length === 4) {
 
-        let sColorNew = "#";
 
-        for (let i = 1; i < 4; i += 1) {
 
-          sColorNew += _sColor.slice(i, i + 1).concat(_sColor.slice(i, i + 1));
 
-        }
 
-        _sColor = sColorNew;
 
-      }
 
-      //处理六位的颜色值
 
-      const sColorChange = [];
 
-      for (let i = 1; i < 7; i += 2) {
 
-        sColorChange.push(parseInt("0x" + _sColor.slice(i, i + 2)));
 
-      }
 
-      return sColorChange;
 
-    } else {
 
-      return _sColor;
 
-    }
 
-  };
 
-  // 将rgb表示方式转换为hex表示方式
 
-  const colorHex = (rgb) => {
 
-    const _this = rgb;
 
-    const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
 
-    if (/^(rgb|RGB)/.test(_this)) {
 
-      const aColor = _this.replace(/(?:(|)|rgb|RGB)*/g, "").split(",");
 
-      let strHex = "#";
 
-      for (let i = 0; i < aColor.length; i++) {
 
-        let hex = Number(aColor[i]).toString(16);
 
-        hex = hex < 10 ? 0 + '' + hex : hex;// 保证每个rgb的值为2位
 
-        if (hex === "0") {
 
-          hex += hex;
 
-        }
 
-        strHex += hex;
 
-      }
 
-      if (strHex.length !== 7) {
 
-        strHex = _this;
 
-      }
 
-      return strHex;
 
-    } else if (reg.test(_this)) {
 
-      const aNum = _this.replace(/#/, "").split("");
 
-      if (aNum.length === 6) {
 
-        return _this;
 
-      } else if (aNum.length === 3) {
 
-        let numHex = "#";
 
-        for (let i = 0; i < aNum.length; i += 1) {
 
-          numHex += (aNum[i] + aNum[i]);
 
-        }
 
-        return numHex;
 
-      }
 
-    } else {
 
-      return _this;
 
-    }
 
-  }
 
-  const rgb2hex = (sRGB) => {
 
-    const reg = /^(RGB|rgb)\((\d+),\s*(\d+),\s*(\d+)\)$/
 
-    if (!reg.test(sRGB)) return sRGB
 
-    const rgbArr = sRGB.match(/\d+/g)
 
-    const resultRgbArr = rgbArr.map(v => {
 
-      if (+v > 16) return (+v).toString(16)
 
-      return '0' + (+v).toString(16)
 
-    })
 
-    return '#' + resultRgbArr.join('')
 
-  }
 
-  const gradientColor = (startColor, endColor, step) => {
 
-    const startRGB = colorRgb(startColor);//转换为rgb数组模式
 
-    const startR = startRGB[0];
 
-    const startG = startRGB[1];
 
-    const startB = startRGB[2];
 
-    const endRGB = colorRgb(endColor);
 
-    const endR = endRGB[0];
 
-    const endG = endRGB[1];
 
-    const endB = endRGB[2];
 
-    const sR = (endR - startR) / step;//总差值
 
-    const sG = (endG - startG) / step;
 
-    const sB = (endB - startB) / step;
 
-    const colorArr = [];
 
-    for (let i = 0; i <= step; i++) {
 
-      //计算每一步的hex值
 
-      const hex = colorHex('rgb(' + parseInt((sR * i + startR)) + ',' + parseInt((sG * i + startG)) + ',' + parseInt((sB * i + startB)) + ')');
 
-      colorArr.push(rgb2hex(hex));
 
-    }
 
-    return colorArr;
 
-  }
 
-  const colorMap = new Map()
 
-  colorArr.forEach((v, i) => {
 
-    if (i < colorArr.length - 1) {
 
-      const _arr = gradientColor(v[1], colorArr[i + 1][1], (Number(colorArr[i + 1][0]) - Number(v[0])) / precision)
 
-      _arr.forEach((cV, cI) => {
 
-        colorMap.set((Number(v[0]) + cI * precision).toFixed(String(precision).split('').filter(p => p === '0').length), cV)
 
-      })
 
-    } else {
 
-      colorMap.set(Number(v[0]).toFixed(String(precision).split('').filter(p => p === '0').length), v[1])
 
-    }
 
-  })
 
-  return colorMap
 
-}

BIN
src/views/init-speed-track/button-del.png
Ver fichero


+ 0 - 256
src/views/init-speed-track/drawTrack.ts
Ver fichero 

@@ -1,256 +0,0 @@
 
-import * as ol from 'ol'
 
-import * as style from 'ol/style'
 
-import * as layer from 'ol/layer'
 
-import * as source from 'ol/source'
 
-import * as geom from 'ol/geom'
 
-import * as proj from 'ol/proj'
 
-import * as interaction from 'ol/interaction'
 
-import * as coordinate from 'ol/coordinate'
 
-import * as control from 'ol/control'
 
-import * as sphere from 'ol/sphere'
 
-import { unByKey } from 'ol/Observable'
 
-import './measure.scss'
 
-import {createBox} from "ol/interaction/Draw";
 
-import {Circle, LineString, Polygon} from "ol/geom";
 
-
 
-const layerFlag = ['layerName', 'measureLayer']
 
-let measureTooltipElement;
 
-let helpTooltipElement;
 
-/**
 
- *
 
- * @param map
 
- * @param typeSelect    line线，rectangle矩形，polygon多边形，circle圆形
 
- */
 
-export default function Measure (map, typeSelect) {
 
-    let _source = null
 
-    const realLayer = map.getLayers().getArray().filter(v => v.get(layerFlag[0]) === layerFlag[1])
 
-    if (realLayer[0]) {
 
-        _source = realLayer[0].getSource()
 
-    } else {
 
-        _source = new source.Vector(); //图层数据源
 
-        const _vector = new layer.Vector({
 
-            zIndex: 9999,
 
-            source: _source,
 
-            style: new style.Style({ //图层样式
 
-                fill: new style.Fill({
 
-                    color: 'rgba(255, 255, 255, 0.2)' //填充颜色
 
-                }),
 
-                stroke: new style.Stroke({
 
-                    color: '#f31a4a',  //边框颜色
 
-                    width: 2   // 边框宽度
 
-                }),
 
-                image: new style.Circle({
 
-                    radius: 7,
 
-                    fill: new style.Fill({
 
-                        color: '#ffcc33'
 
-                    })
 
-                })
 
-            })
 
-        });
 
-        _vector.set(layerFlag[0], layerFlag[1])
 
-        map.addLayer(_vector);
 
-    }
 
-    let sketch;
 
-    let helpTooltip;
 
-    let measureTooltip;
 
-    let continueMsg = '双击结束测量';
 
-    const geodesicCheckbox = true;//测地学方式对象
 
-    const createMeasureTooltip = () => {
 
-        const id = 'measureTooltipElementId'
 
-        if (measureTooltipElement) {
 
-            map.removeOverlay(map.getOverlayById(id))
 
-            measureTooltipElement.parentNode.removeChild(measureTooltipElement);
 
-        }
 
-        measureTooltipElement = document.createElement('div');
 
-        measureTooltipElement.className = 'tooltip tooltip-measure';
 
-        measureTooltip = new ol.Overlay({
 
-            id,
 
-            element: measureTooltipElement,
 
-            offset: [0, -15],
 
-            positioning: 'bottom-center'
 
-        });
 
-        map.addOverlay(measureTooltip);
 
-    }
 
-    const createHelpTooltip = () => {
 
-        const id = 'helpTooltipElementId'
 
-        if (helpTooltipElement) {
 
-            map.removeOverlay(map.getOverlayById(id))
 
-            helpTooltipElement.parentNode.removeChild(helpTooltipElement);
 
-        }
 
-        helpTooltipElement = document.createElement('div');
 
-        helpTooltipElement.className = 'tooltip hidden';
 
-        helpTooltip = new ol.Overlay({
 
-            id,
 
-            element: helpTooltipElement,
 
-            offset: [15, 0],
 
-            positioning: 'center-left'
 
-        });
 
-        map.addOverlay(helpTooltip);
 
-    }
 
-    const formatLength = (line) => {
 
-        // 获取投影坐标系
 
-        const sourceProj = map.getView().getProjection();
 
-        // ol/sphere里有getLength()和getArea()用来测量距离和区域面积，默认的投影坐标系是EPSG:3857, 其中有个options的参数，可以设置投影坐标系
 
-        const length = sphere.getLength(line, {projection: sourceProj});
 
-        // const length = getLength(line);
 
-        let output;
 
-        if (length > 100) {
 
-            const km = Math.round((length / 1000) * 100) / 100;
 
-            output = `${km} 千米 <br>${parseFloat(String(km * 0.53995)).toFixed(2)} 海里`;
 
-        } else {
 
-            output = `${Math.round(length * 100) / 100} m`;
 
-        }
 
-        return output;
 
-    };
 
-    //获取圆的面积
 
-    const getCircleArea = (circle, projection) => {
 
-        const P = 3.14
 
-        const radius = getCircleRadius(circle, projection)
 
-        return P * radius * radius
 
-    }
 
-//获取圆的半径
 
-    const getCircleRadius = (circle, projection) => {
 
-        return circle.getRadius() * projection.getMetersPerUnit()
 
-    }
 
-    const formatArea = (polygon, type= 'polygon') => {
 
-        let area
 
-        const sourceProj = map.getView().getProjection();
 
-        // 获取投影坐标系
 
-        if (type === 'polygon') {
 
-            area = sphere.getArea(polygon, {
 
-                projection: sourceProj,
 
-            });
 
-        } else if (type === 'circle') {
 
-            area = getCircleArea(polygon, sourceProj)
 
-        }
 
-        let output;
 
-        if (area > 10000) {
 
-            const km = Math.round((area / 1000000) * 100) / 100;
 
-            output = `${km} 平方公里<br>${parseFloat(String(km * 0.38610)).toFixed(
 
-                2
 
-            )} 平方英里`;
 
-        } else {
 
-            output = `${Math.round(area * 100) / 100} ` + " m<sup>2</sup>";
 
-        }
 
-        return output;
 
-    };
 
-    const addInteraction = () => {
 
-        const id = 'drawName'
 
-        const draw = new interaction.Draw({
 
-            source: _source,//测量绘制层数据源
 
-            type: 'LineString',  //几何图形类型
 
-            geometryFunction: typeSelect === 'rectangle' ? createBox() : null,
 
-            style: new style.Style({
 
-                fill: new style.Fill({
 
-                    color: "rgba(255, 255, 255, 0.2)",
 
-                }),
 
-                stroke: new style.Stroke({
 
-                    color: "#f3584a",
 
-                    width: 2,
 
-                }),
 
-                image: new style.Circle({
 
-                    radius: 5,
 
-                    stroke: new style.Stroke({
 
-                        color: "rgba(0, 0, 0, 0.7)",
 
-                    }),
 
-                    fill: new style.Fill({
 
-                        color: "rgba(255, 255, 255, 0.2)",
 
-                    }),
 
-                }),
 
-            }),
 
-        });
 
-        draw.set(id, id)
 
-        createMeasureTooltip(); //创建测量工具提示框
 
-        createHelpTooltip(); //创建帮助提示框
 
-        map.addInteraction(draw);
 
-        let listener;
 
-        //绑定交互绘制工具开始绘制的事件
 
-        const drawstartHandle = (evt) => {
 
-            sketch = evt.feature; //绘制的要素
 
-            let tooltipCoord = evt.coordinate;// 绘制的坐标
 
-            //绑定change事件，根据绘制几何类型得到测量长度值或面积值，并将其设置到测量工具提示框中显示
 
-            listener = sketch.getGeometry().on('change', function (evt) {
 
-                const geom = evt.target
 
-                let output;
 
-                if (geom.getType() === 'LineString') {
 
-                    output = formatLength(geom);//长度值
 
-                    tooltipCoord = geom.getLastCoordinate();//坐标
 
-                } else if (geom.getType() === 'Polygon') {
 
-                    output = formatArea(geom);//面积值
 
-                    tooltipCoord = geom.getInteriorPoint().getCoordinates();//坐标
 
-                } else if (geom.getType() === 'Circle') {
 
-                    output = formatArea(geom, 'circle');//面积值
 
-                    tooltipCoord = geom.getCenter()
 
-                }
 
-                measureTooltipElement.innerHTML = output;//将测量值设置到测量工具提示框中显示
 
-                measureTooltip.setPosition(tooltipCoord);//设置测量工具提示框的显示位置
 
-            });
 
-        }
 
-        draw.on('drawstart', drawstartHandle);
 
-        //绑定交互绘制工具结束绘制的事件
 
-        const copy = (value) => {
 
-            const str = document.createElement('input')
 
-            str.setAttribute('value', value)
 
-            document.body.appendChild(str)
 
-            str.select()
 
-            document.execCommand('copy')
 
-            document.body.removeChild(str)
 
-        }
 
-        const drawendHandle = (evt) => {
 
-            map.removeInteraction(map.getInteractions().getArray().filter(v => v.get(id) === id)[0]);
 
-            const del = document.createElement("div");
 
-            del.className = "lineDel";
 
-            measureTooltipElement.append(del);
 
-            del.onclick = () => {
 
-                _source.removeFeature(evt.feature)
 
-                const b = del.parentElement.parentElement
 
-                b.parentElement.removeChild(b);
 
-                const g = evt.feature.getGeometry()
 
-                if (g.getType() === 'LineString') {
 
-                    const w = `LINESTRING(${g.getCoordinates().map(v => v[0] + ' ' + v[1]).join(',')})`
 
-                    copy(w)
 
-                } else if (g.getType() === 'Polygon') {
 
-                    const w = `POLYGON(${g.getCoordinates().map(v => '(' + v.map(c => c[0] + ' ' + c[1]) + ')').join(',')})`
 
-                    copy(w)
 
-                }
 
-            };
 
-            measureTooltipElement.className = 'tooltip tooltip-static'; //设置测量提示框的样式
 
-            measureTooltip.setOffset([0, -7]);
 
-            sketch = null; //置空当前绘制的要素对象
 
-            measureTooltipElement = null; //置空测量工具提示框对象
 
-            helpTooltipElement.parentNode.removeChild(helpTooltipElement);
 
-            helpTooltipElement = null; //置空测量工具提示框对象
 
-            unByKey(listener);
 
-            draw.un('drawstart', drawstartHandle);
 
-            draw.un('drawend', drawendHandle);
 
-            map.removeInteraction(map.getInteractions().getArray().filter(v => v.get(id) === id)[0]);
 
-            map.un('pointermove', pointerMoveHandler)
 
-        }
 
-        draw.on('drawend', drawendHandle);
 
-    }
 
-    addInteraction(); //调用加载绘制交互控件方法，添加绘图进行测量
 
-    const pointerMoveHandler = (evt) => {
 
-        if (evt.dragging) {
 
-            return;
 
-        }
 
-        let helpMsg = '单击开始测量';//当前默认提示信息
 
-        //判断绘制几何类型设置相应的帮助提示信息
 
-        if (sketch) {
 
-            const geom = sketch.getGeometry()
 
-            helpMsg = continueMsg;
 
-            // if (geom.getType() === 'Polygon') {
 
-            //     helpMsg = continueMsg; //绘制多边形时提示相应内容
 
-            // } else if (geom.getType() === 'LineString') {
 
-            //     helpMsg = continueMsg; //绘制线时提示相应内容
 
-            // }
 
-        }
 
-        helpTooltipElement.innerHTML = helpMsg; //将提示信息设置到对话框中显示
 
-        helpTooltip.setPosition(evt.coordinate);//设置帮助提示框的位置
 
-        helpTooltipElement.classList.remove('hidden');//移除帮助提示框的隐藏样式进行显示
 
-    };
 
-    map.on('pointermove', pointerMoveHandler); //地图容器绑定鼠标移动事件，动态显示帮助提示框内容
 
-    //地图绑定鼠标移出事件，鼠标移出时为帮助提示框设置隐藏样式
 
-    map.getViewport().on('mouseout', () => {
 
-        helpTooltipElement.addClass('hidden');
 
-    });
 
-}

BIN
src/views/init-speed-track/edit.png
Ver fichero


+ 0 - 916
src/views/init-speed-track/index.vue
Ver fichero 

@@ -1,916 +0,0 @@
 
-<template>
 
-  <div class="init-speed-track" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)">
 
-    <EasyMapComponent
 
-        class="map"
 
-        :showBaseSwitch="true"
 
-        @easyMapLoad="mapLoad"
 
-    />
 
-    <div class="track">
 
-      <el-card shadow="always">
 
-        <template #header>
 
-          <div class="card-header">
 
-            <span>轨迹列表</span>
 
-            <el-button-group>
 
-              <template v-for="[key, value] in SourceMap">
 
-                <el-button :color="value.color" size="small" @click="drawTrack(key)" style="color: white">{{value.label}}</el-button>
 
-              </template>
 
-            </el-button-group>
 
-            <el-cascader
 
-                v-model="ddd"
 
-                :options="options"
 
-                :props="{
 
-                  // props.
 
-                  multiple: true,
 
-                  checkStrictly: true,
 
-                  emitPath: false
 
-                }"
 
-            />
 
-          </div>
 
-        </template>
 
-        <div class="track-line">
 
-          <el-button v-if="trackList.length > 0" type="primary" size="small" @click="onSubmit" style="color: white">保存</el-button>
 
-          <template v-for="(item, index) in trackList">
 
-            <div class="line">
 
-              <div class="label" :style="`color: ${SourceMap.get(item.type).color};`">{{item.ID}}、{{SourceMap.get(item.type).label}}</div>
 
-              <el-tooltip :enterable="false" placement="top" content="隐藏" v-if="item.show">
 
-                <img class="__hover" src="./ship-track-visible.svg" @click="handleShow(false, item)"/>
 
-              </el-tooltip>
 
-              <el-tooltip :enterable="false" placement="top" content="显示" v-else>
 
-                <img class="__hover" src="./ship-track-invisible.svg" @click="handleShow(true, item)"/>
 
-              </el-tooltip>
 
-              <el-tooltip :enterable="false" placement="top" content="编辑">
 
-                <img class="__hover" src="./edit.png" @click="handleEdit(item)"/>
 
-              </el-tooltip>
 
-              <el-tooltip :enterable="false" placement="top" content="删除">
 
-                <img class="__hover" src="./button-del.png" @click="handleDelete(item, index)"/>
 
-              </el-tooltip>
 
-            </div>
 
-          </template>
 
-        </div>
 
-      </el-card>
 
-      <el-card shadow="always" v-if="isForm">
 
-        <template #header>
 
-          <div class="card-header">
 
-            <span>轨迹点列表</span>
 
-            <el-button v-if="trackPointList.length > 0" type="primary" size="small" @click="onTemp" style="color: white">暂存</el-button>
 
-          </div>
 
-        </template>
 
-        <div class="track-point">
 
-          <div v-if="form.ID" class="label" :style="`color: ${SourceMap.get(form.type).color};`">{{form.ID}}、{{SourceMap.get(form.type).label}}</div>
 
-          <template v-for="item in formParams">
 
-            <div class="item">
 
-              <span>{{item.label}}：</span><el-input v-model="form[item.value]" clearable/>
 
-            </div>
 
-          </template>
 
-          <template v-for="(item, index) in trackPointList">
 
-            <div class="point">
 
-              <div class="position">
 
-                <span>{{item.position[0]}}</span><br/>
 
-                <span>{{item.position[1]}}</span>
 
-              </div>
 
-              <div class="speed">
 
-                <el-input-number v-model="item.speed" :precision="2" :step="0.1" :max="100" :min="0" @focus="onPointFocus(trackPointList[index - 1], item, trackPointList[index + 1])"/>
 
-              </div>
 
-            </div>
 
-          </template>
 
-        </div>
 
-      </el-card>
 
-    </div>
 
-  </div>
 
-</template>
 
-
 
-<script lang="ts">
 
-import {
 
-  defineComponent,
 
-  ref,
 
-  nextTick,
 
-  onMounted,
 
-  watch,
 
-  computed,
 
-  ComponentInternalInstance,
 
-  reactive,
 
-  toRefs,
 
-  getCurrentInstance
 
-} from 'vue'
 
-import {useStore} from 'vuex'
 
-import * as source from "ol/source";
 
-import * as layer from "ol/layer";
 
-import * as style from "ol/style";
 
-import * as ol from "ol";
 
-import * as sphere from "ol/sphere";
 
-import * as interaction from "ol/interaction";
 
-import {createBox} from "ol/interaction/Draw";
 
-import {unByKey} from "ol/Observable";
 
-import { Geometry } from 'ol/geom';
 
-import { EventsKey } from 'ol/events';
 
-import { Coordinate } from 'ol/coordinate';
 
-import TrackStyle from './track-style'
 
-import axios from "axios";
 
-import {ElMessage, ElMessageBox} from "element-plus";
 
-
 
-export default defineComponent({
 
-  name: 'App',
 
-  components: {},
 
-  setup() {
 
-    const store = useStore()
 
-    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
 
-    const SourceMap = new Map(window.cusConfig.trackSource)
 
-    const formParams = window.cusConfig.trackParams
 
-    const options = [
 
-      {
 
-        value: 'guide',
 
-        label: 'Guide',
 
-        children: [
 
-          {
 
-            value: 'disciplines',
 
-            label: 'Disciplines',
 
-            children: [
 
-              {
 
-                value: 'consistency',
 
-                label: 'Consistency',
 
-              },
 
-              {
 
-                value: 'feedback',
 
-                label: 'Feedback',
 
-              },
 
-              {
 
-                value: 'efficiency',
 
-                label: 'Efficiency',
 
-              },
 
-              {
 
-                value: 'controllability',
 
-                label: 'Controllability',
 
-              },
 
-            ],
 
-          },
 
-          {
 
-            value: 'navigation',
 
-            label: 'Navigation',
 
-            children: [
 
-              {
 
-                value: 'side nav',
 
-                label: 'Side Navigation',
 
-              },
 
-              {
 
-                value: 'top nav',
 
-                label: 'Top Navigation',
 
-              },
 
-            ],
 
-          },
 
-        ],
 
-      },
 
-      {
 
-        value: 'component',
 
-        label: 'Component',
 
-        children: [
 
-          {
 
-            value: 'basic',
 
-            label: 'Basic',
 
-            children: [
 
-              {
 
-                value: 'layout',
 
-                label: 'Layout',
 
-              },
 
-              {
 
-                value: 'color',
 
-                label: 'Color',
 
-              },
 
-              {
 
-                value: 'typography',
 
-                label: 'Typography',
 
-              },
 
-              {
 
-                value: 'icon',
 
-                label: 'Icon',
 
-              },
 
-              {
 
-                value: 'button',
 
-                label: 'Button',
 
-              },
 
-            ],
 
-          },
 
-          {
 
-            value: 'form',
 
-            label: 'Form',
 
-            children: [
 
-              {
 
-                value: 'radio',
 
-                label: 'Radio',
 
-              },
 
-              {
 
-                value: 'checkbox',
 
-                label: 'Checkbox',
 
-              },
 
-              {
 
-                value: 'input',
 
-                label: 'Input',
 
-              },
 
-              {
 
-                value: 'input-number',
 
-                label: 'InputNumber',
 
-              },
 
-              {
 
-                value: 'select',
 
-                label: 'Select',
 
-              },
 
-              {
 
-                value: 'cascader',
 
-                label: 'Cascader',
 
-              },
 
-              {
 
-                value: 'switch',
 
-                label: 'Switch',
 
-              },
 
-              {
 
-                value: 'slider',
 
-                label: 'Slider',
 
-              },
 
-              {
 
-                value: 'time-picker',
 
-                label: 'TimePicker',
 
-              },
 
-              {
 
-                value: 'date-picker',
 
-                label: 'DatePicker',
 
-              },
 
-              {
 
-                value: 'datetime-picker',
 
-                label: 'DateTimePicker',
 
-              },
 
-              {
 
-                value: 'upload',
 
-                label: 'Upload',
 
-              },
 
-              {
 
-                value: 'rate',
 
-                label: 'Rate',
 
-              },
 
-              {
 
-                value: 'form',
 
-                label: 'Form',
 
-              },
 
-            ],
 
-          },
 
-          {
 
-            value: 'data',
 
-            label: 'Data',
 
-            children: [
 
-              {
 
-                value: 'table',
 
-                label: 'Table',
 
-              },
 
-              {
 
-                value: 'tag',
 
-                label: 'Tag',
 
-              },
 
-              {
 
-                value: 'progress',
 
-                label: 'Progress',
 
-              },
 
-              {
 
-                value: 'tree',
 
-                label: 'Tree',
 
-              },
 
-              {
 
-                value: 'pagination',
 
-                label: 'Pagination',
 
-              },
 
-              {
 
-                value: 'badge',
 
-                label: 'Badge',
 
-              },
 
-            ],
 
-          },
 
-          {
 
-            value: 'notice',
 
-            label: 'Notice',
 
-            children: [
 
-              {
 
-                value: 'alert',
 
-                label: 'Alert',
 
-              },
 
-              {
 
-                value: 'loading',
 
-                label: 'Loading',
 
-              },
 
-              {
 
-                value: 'message',
 
-                label: 'Message',
 
-              },
 
-              {
 
-                value: 'message-box',
 
-                label: 'MessageBox',
 
-              },
 
-              {
 
-                value: 'notification',
 
-                label: 'Notification',
 
-              },
 
-            ],
 
-          },
 
-          {
 
-            value: 'navigation',
 
-            label: 'Navigation',
 
-            children: [
 
-              {
 
-                value: 'menu',
 
-                label: 'Menu',
 
-              },
 
-              {
 
-                value: 'tabs',
 
-                label: 'Tabs',
 
-              },
 
-              {
 
-                value: 'breadcrumb',
 
-                label: 'Breadcrumb',
 
-              },
 
-              {
 
-                value: 'dropdown',
 
-                label: 'Dropdown',
 
-              },
 
-              {
 
-                value: 'steps',
 
-                label: 'Steps',
 
-              },
 
-            ],
 
-          },
 
-          {
 
-            value: 'others',
 
-            label: 'Others',
 
-            children: [
 
-              {
 
-                value: 'dialog',
 
-                label: 'Dialog',
 
-              },
 
-              {
 
-                value: 'tooltip',
 
-                label: 'Tooltip',
 
-              },
 
-              {
 
-                value: 'popover',
 
-                label: 'Popover',
 
-              },
 
-              {
 
-                value: 'card',
 
-                label: 'Card',
 
-              },
 
-              {
 
-                value: 'carousel',
 
-                label: 'Carousel',
 
-              },
 
-              {
 
-                value: 'collapse',
 
-                label: 'Collapse',
 
-              },
 
-            ],
 
-          },
 
-        ],
 
-      },
 
-      {
 
-        value: 'resource',
 
-        label: 'Resource',
 
-        children: [
 
-          {
 
-            value: 'axure',
 
-            label: 'Axure Components',
 
-          },
 
-          {
 
-            value: 'sketch',
 
-            label: 'Sketch Templates',
 
-          },
 
-          {
 
-            value: 'docs',
 
-            label: 'Design Documentation',
 
-          },
 
-        ],
 
-      },
 
-    ]
 
-    const state = reactive({
 
-      map: <any>null,
 
-      mapFunc: null,
 
-      trackPointList: [],
 
-      trackList: <any>[],
 
-      formTrackPointStartCount: 0,
 
-      formTrackPointEndCount: 0,
 
-      formTrackPointList: [],
 
-      initTrackPointStartCount: 0,
 
-      initTrackPointEndCount: 0,
 
-      initTrackPointList: [],
 
-      loading: false,
 
-      form: <any>{},
 
-      idNum: 1,
 
-      isForm: false,
 
-      ddd: null
 
-    });
 
-    formParams.forEach((v: { value: string | number; init: any; }) => {
 
-      state.form[v.value] = v.init
 
-    })
 
-    const mapLoad = (map: null, func: null) => {
 
-      state.map = map
 
-      state.mapFunc = func
 
-    }
 
-    const startDraw = (cb: { (evt: any): void; (arg0: { feature: { getGeometry: () => any; }; }): void; }) => {
 
-      let measureTooltipElement: HTMLDivElement | null;
 
-      let helpTooltipElement: HTMLDivElement | null;
 
-      const realLayer = state.map.getLayers().getArray().filter((v: { get: (arg0: string) => string; }) => v.get('layerName') === 'measureLayer')
 
-      let sketch: { getGeometry: () => { (): any; new(): any; on: { (arg0: string, arg1: (evt: any) => void): any; new(): any; }; }; } | null;
 
-      let helpTooltip: ol.Overlay;
 
-      let measureTooltip: ol.Overlay;
 
-      let continueMsg = '双击结束标绘';
 
-      const createMeasureTooltip = () => {
 
-        const id = 'measureTooltipElementId'
 
-        if (measureTooltipElement) {
 
-          state.map.removeOverlay(state.map.getOverlayById(id))
 
-          measureTooltipElement.parentNode?.removeChild(measureTooltipElement);
 
-        }
 
-        measureTooltipElement = document.createElement('div');
 
-        measureTooltipElement.className = 'tooltip tooltip-measure';
 
-        measureTooltip = new ol.Overlay({
 
-          id,
 
-          element: measureTooltipElement,
 
-          offset: [0, -15],
 
-          positioning: 'bottom-center'
 
-        });
 
-        state.map.addOverlay(measureTooltip);
 
-      }
 
-      const createHelpTooltip = () => {
 
-        const id = 'helpTooltipElementId'
 
-        if (helpTooltipElement) {
 
-          state.map.removeOverlay(state.map.getOverlayById(id))
 
-          helpTooltipElement.parentNode?.removeChild(helpTooltipElement);
 
-        }
 
-        helpTooltipElement = document.createElement('div');
 
-        helpTooltipElement.className = 'tooltip hidden';
 
-        helpTooltip = new ol.Overlay({
 
-          id,
 
-          element: helpTooltipElement,
 
-          offset: [15, 0],
 
-          positioning: 'center-left'
 
-        });
 
-        state.map.addOverlay(helpTooltip);
 
-      }
 
-      const formatLength = (line: Geometry) => {
 
-        // 获取投影坐标系
 
-        const sourceProj = state.map.getView().getProjection();
 
-        // ol/sphere里有getLength()和getArea()用来测量距离和区域面积，默认的投影坐标系是EPSG:3857, 其中有个options的参数，可以设置投影坐标系
 
-        const length = sphere.getLength(line, {projection: sourceProj});
 
-        // const length = getLength(line);
 
-        let output;
 
-        if (length > 100) {
 
-          const km = Math.round((length / 1000) * 100) / 100;
 
-          output = `${km} 千米 <br>${parseFloat(String(km * 0.53995)).toFixed(2)} 海里`;
 
-        } else {
 
-          output = `${Math.round(length * 100) / 100} m`;
 
-        }
 
-        return output;
 
-      };
 
-      const addInteraction = () => {
 
-        const id = 'drawName'
 
-        const draw = new interaction.Draw({
 
-          type: 'LineString',  //几何图形类型
 
-          style: new style.Style({
 
-            fill: new style.Fill({
 
-              color: "rgba(255, 255, 255, 0.2)",
 
-            }),
 
-            stroke: new style.Stroke({
 
-              color: "#f3584a",
 
-              width: 2,
 
-            }),
 
-            image: new style.Circle({
 
-              radius: 5,
 
-              stroke: new style.Stroke({
 
-                color: "rgba(0, 0, 0, 0.7)",
 
-              }),
 
-              fill: new style.Fill({
 
-                color: "rgba(255, 255, 255, 0.2)",
 
-              }),
 
-            }),
 
-          }),
 
-        });
 
-        draw.set(id, id)
 
-        createMeasureTooltip(); //创建测量工具提示框
 
-        createHelpTooltip(); //创建帮助提示框
 
-        state.map.addInteraction(draw);
 
-        let listener: EventsKey | EventsKey[];
 
-        //绑定交互绘制工具开始绘制的事件
 
-        const drawstartHandle = (evt: { feature: { getGeometry: () => { (): any; new(): any; on: { (arg0: string, arg1: (evt: any) => void): any; new(): any; }; }; } | null; coordinate: any; }) => {
 
-          sketch = evt.feature; //绘制的要素
 
-          let tooltipCoord = evt.coordinate;// 绘制的坐标
 
-          //绑定change事件，根据绘制几何类型得到测量长度值或面积值，并将其设置到测量工具提示框中显示
 
-          listener = sketch?.getGeometry().on('change', function (evt) {
 
-            const geom = evt.target
 
-            let output;
 
-            output = formatLength(geom);//长度值
 
-            tooltipCoord = geom.getLastCoordinate();//坐标
 
-            if (measureTooltipElement) measureTooltipElement.innerHTML = output;//将测量值设置到测量工具提示框中显示
 
-            measureTooltip.setPosition(tooltipCoord);//设置测量工具提示框的显示位置
 
-          });
 
-        }
 
-        draw.on('drawstart', drawstartHandle);
 
-        //绑定交互绘制工具结束绘制的事件
 
-        const copy = (value: string) => {
 
-          const str = document.createElement('input')
 
-          str.setAttribute('value', value)
 
-          document.body.appendChild(str)
 
-          str.select()
 
-          document.execCommand('copy')
 
-          document.body.removeChild(str)
 
-        }
 
-        const drawendHandle = (evt: { feature: { getGeometry: () => any; }; }) => {
 
-          state.map.removeInteraction(state.map.getInteractions().getArray().filter((v: { get: (arg0: string) => string; }) => v.get(id) === id)[0]);
 
-          sketch = null; //置空当前绘制的要素对象
 
-          measureTooltipElement?.parentNode?.removeChild(measureTooltipElement);
 
-          measureTooltipElement = null; //置空测量工具提示框对象
 
-          helpTooltipElement?.parentNode?.removeChild(helpTooltipElement);
 
-          helpTooltipElement = null; //置空测量工具提示框对象
 
-          unByKey(listener);
 
-          draw.un('drawstart', drawstartHandle);
 
-          draw.un('drawend', drawendHandle);
 
-          state.map.removeInteraction(state.map.getInteractions().getArray().filter((v: { get: (arg0: string) => string; }) => v.get(id) === id)[0]);
 
-          state.map.un('pointermove', pointerMoveHandler)
 
-          cb(evt)
 
-        }
 
-        draw.on('drawend', drawendHandle);
 
-      }
 
-      addInteraction(); //调用加载绘制交互控件方法，添加绘图进行测量
 
-      const pointerMoveHandler = (evt: { dragging: any; coordinate: Coordinate | undefined; }) => {
 
-        if (evt.dragging) {
 
-          return;
 
-        }
 
-        let helpMsg = '单击开始标绘';//当前默认提示信息
 
-        //判断绘制几何类型设置相应的帮助提示信息
 
-        if (sketch) {
 
-          const geom = sketch.getGeometry()
 
-          helpMsg = continueMsg;
 
-          // if (geom.getType() === 'Polygon') {
 
-          //     helpMsg = continueMsg; //绘制多边形时提示相应内容
 
-          // } else if (geom.getType() === 'LineString') {
 
-          //     helpMsg = continueMsg; //绘制线时提示相应内容
 
-          // }
 
-        }
 
-        if (helpTooltipElement)helpTooltipElement.innerHTML = helpMsg; //将提示信息设置到对话框中显示
 
-        helpTooltip.setPosition(evt.coordinate);//设置帮助提示框的位置
 
-        helpTooltipElement?.classList.remove('hidden');//移除帮助提示框的隐藏样式进行显示
 
-      };
 
-      state.map.on('pointermove', pointerMoveHandler); //地图容器绑定鼠标移动事件，动态显示帮助提示框内容
 
-      //地图绑定鼠标移出事件，鼠标移出时为帮助提示框设置隐藏样式
 
-      // state.map.getViewport().on('mouseout', () => {
 
-      //   helpTooltipElement?.addClass('hidden');
 
-      // });
 
-    }
 
-    const initDraw = (pMap, type) => {
 
-      that.$easyMap.initShape({
 
-        map: state.map,
 
-        layerName: "form-track-point-line",
 
-        layerZIndex: 9,
 
-        list: [
 
-          {
 
-            easyMapParams: {
 
-              id: new Date().getTime(),
 
-              position: that.$easyMap.formatPosition.wptTwl(state.trackPointList.map(v => that.$easyMap.formatPosition.cptTwpt(v.position))),
 
-              normalStyle: (f: any, r: any) => TrackStyle.trackLineStyle(f, r, state.map, SourceMap.get(type)?.color, pMap, (s, p) => {
 
-                state.formTrackPointStartCount++
 
-                setTimeout(() => {
 
-                  state.formTrackPointEndCount++
 
-                  state.formTrackPointList.push(...p)
 
-                  if (state.formTrackPointStartCount === state.formTrackPointEndCount) {
 
-                    that.$easyMap.initShape({
 
-                      map: state.map,
 
-                      layerName: 'form-track-point',
 
-                      layerZIndex: 10,
 
-                      list: state.formTrackPointList.map((v, i) => {
 
-                        return {
 
-                          easyMapParams: {
 
-                            id: `form-track-point-${i}`,
 
-                            position: that.$easyMap.formatPosition.cptTwpt(v.current.position),
 
-                            normalStyle: TrackStyle.trackPointStyle(SourceMap.get(v.current.source).color, v.current, v.next)
 
-                          }
 
-                        }
 
-                      })
 
-                    })
 
-                    state.formTrackPointStartCount = 0
 
-                    state.formTrackPointEndCount = 0
 
-                    state.formTrackPointList = []
 
-                  }
 
-                }, 10)
 
-                return s
 
-              }),
 
-            }
 
-          }
 
-        ]
 
-      });
 
-    }
 
-    const drawTrack = (trackSource: string) => {
 
-      state.isForm = false
 
-      state.form = {}
 
-      formParams.forEach((v: { value: string | number; init: any; }) => {
 
-        state.form[v.value] = v.init
 
-      })
 
-      startDraw((evt) => {
 
-        const geom = evt.feature.getGeometry()
 
-        const pMap = new Map()
 
-        state.trackPointList = geom.getCoordinates().map((v: any) => {
 
-          const obj = {
 
-            source: trackSource,
 
-            position: v,
 
-            speed: 0
 
-          }
 
-          pMap.set(`${v[0]}-${v[1]}`, obj)
 
-          return obj
 
-        })
 
-        initDraw(pMap, trackSource)
 
-        state.isForm = true
 
-      })
 
-    }
 
-    const onPointFocus = (p1: any, p2: any, p3: any) => {
 
-      that.$easyMap.getShapeView(state.map, [p1?.position, p2.position, p3?.position].filter(v => v))
 
-      const radius = 25
 
-      const longRadius = radius * Math.SQRT2
 
-      that.$easyMap.initShape({
 
-        map: state.map,
 
-        layerName: "focus",
 
-        layerZIndex: 20,
 
-        list: [
 
-          {
 
-            easyMapParams: {
 
-              id: 'focus',
 
-              position: that.$easyMap.formatPosition.cptTwpt(p2.position),
 
-              normalStyle: [new style.Style({ //图层样式
 
-                image: new style.RegularShape({
 
-                  stroke: new style.Stroke({
 
-                    color: '#9F2EFF',
 
-                    width: 2,
 
-                    lineDash: [
 
-                      (longRadius * 3) / 10,
 
-                      (longRadius * 4) / 10,
 
-                      (longRadius * 3) / 10,
 
-                      0
 
-                    ]
 
-                  }),
 
-                  radius1: radius,
 
-                  rotation: Math.PI / (180 / 45),
 
-                  points: 4
 
-                })
 
-              })]
 
-            }
 
-          }
 
-        ]
 
-      });
 
-    }
 
-    const onTemp = () => {
 
-      let index = 0
 
-      if (state.trackList.some((v: { ID: any; }, i: number) => {
 
-        index = i
 
-        return v.ID === state.form.ID
 
-      })) {
 
-        state.trackList[index] = Object.assign(state.form, {show: true, lines: state.trackPointList.map(v => {
 
-            return {
 
-              lon: v.position[0],
 
-              lat: v.position[1],
 
-              speed: v.speed
 
-            }
 
-          })})
 
-      } else {
 
-        const obj = {
 
-          type: state.trackPointList[0].source,
 
-          lines: state.trackPointList.map(v => {
 
-            return {
 
-              lon: v.position[0],
 
-              lat: v.position[1],
 
-              speed: v.speed
 
-            }
 
-          })
 
-        }
 
-        Object.assign(obj, state.form)
 
-        const result = JSON.parse(JSON.stringify(obj))
 
-        state.trackList.push(Object.assign(result, {show: true, ID: state.idNum.toString()}))
 
-      }
 
-      state.idNum++
 
-      state.trackPointList = []
 
-      that.$easyMap.initShape({
 
-        map: state.map,
 
-        layerName: "form-track-point-line",
 
-        layerZIndex: 9,
 
-        list: []
 
-      });
 
-      that.$easyMap.initShape({
 
-        map: state.map,
 
-        layerName: "form-track-point",
 
-        layerZIndex: 10,
 
-        list: []
 
-      });
 
-      initTrack()
 
-      state.isForm = false
 
-    }
 
-    const trackShowListCom = computed(() => {
 
-      return state.trackList.filter((v: { show: any; }) => v.show)
 
-    })
 
-    const initTrack = () => {
 
-      that.$easyMap.initShape({
 
-        map: state.map,
 
-        layerName: "track-point-line",
 
-        layerZIndex: 7,
 
-        list: []
 
-      });
 
-      that.$easyMap.initShape({
 
-        map: state.map,
 
-        layerName: "track-point",
 
-        layerZIndex: 8,
 
-        list: []
 
-      });
 
-      that.$easyMap.initShape({
 
-        map: state.map,
 
-        layerName: "track-point-line",
 
-        layerZIndex: 7,
 
-        list: trackShowListCom.value.map((v: any) => {
 
-          const pMap = new Map()
 
-          v.lines.forEach((p: {
 
-              speed: any; type: any; lon: any; lat: any;
 
-          }) => {
 
-            const obj = {
 
-              source: v.type,
 
-              position: [p.lon, p.lat],
 
-              speed: p.speed
 
-            }
 
-            pMap.set(`${p.lon}-${p.lat}`, obj)
 
-          })
 
-          return {
 
-            easyMapParams: {
 
-              id: v.ID,
 
-              position: that.$easyMap.formatPosition.wptTwl(v.lines.map((c: { lon: any; lat: any; }) => that.$easyMap.formatPosition.cptTwpt([c.lon, c.lat]))),
 
-              normalStyle: (f: any, r: any) => TrackStyle.trackLineStyle(f, r, state.map, SourceMap.get(v.type)?.color, pMap, (s, p) => {
 
-                state.initTrackPointStartCount++
 
-                setTimeout(() => {
 
-                  state.initTrackPointEndCount++
 
-                  state.initTrackPointList.push(...p)
 
-                  if (state.initTrackPointStartCount === state.initTrackPointEndCount) {
 
-                    that.$easyMap.initShape({
 
-                      map: state.map,
 
-                      layerName: 'track-point',
 
-                      layerZIndex: 8,
 
-                      list: state.initTrackPointList.map((c, i) => {
 
-                        return {
 
-                          easyMapParams: {
 
-                            id: `init-track-point-${v.ID}-${i}`,
 
-                            position: that.$easyMap.formatPosition.cptTwpt(c.current.position),
 
-                            normalStyle: TrackStyle.trackPointStyle(SourceMap.get(c.current.source).color, c.current, c.next)
 
-                          }
 
-                        }
 
-                      })
 
-                    })
 
-                    state.initTrackPointStartCount = 0
 
-                    state.initTrackPointEndCount = 0
 
-                    state.initTrackPointList = []
 
-                  }
 
-                }, 10)
 
-                return s
 
-              }),
 
-            }
 
-          }
 
-        })
 
-      });
 
-    }
 
-    const handleShow = (show: any, item: any) => {
 
-      item.show = show
 
-      initTrack()
 
-    }
 
-    const handleEdit = (item: any) => {
 
-      item.show = false
 
-      state.form = item
 
-      const pMap = new Map()
 
-      state.trackPointList = state.form.lines.map((v: { speed: any; lon: any; lat: any; }) => {
 
-        const obj = {
 
-          source: state.form.type,
 
-          position: [v.lon, v.lat],
 
-          speed: v.speed
 
-        }
 
-        pMap.set(`${v.lon}-${v.lat}`, obj)
 
-        return obj
 
-      })
 
-      initDraw(pMap, state.form.type)
 
-      state.isForm = true
 
-      initTrack()
 
-    }
 
-    const handleDelete = (item: any, index) => {
 
-      ElMessageBox.confirm(`是否删除：${item.ID}、${SourceMap.get(item.type).label}？`, "提示", {
 
-        confirmButtonText: "确定",
 
-        cancelButtonText: "取消",
 
-        type: "warning",
 
-      }).then(() => {
 
-        if (state.form.ID === item.ID) {
 
-          state.isForm = false
 
-          state.form = {}
 
-          formParams.forEach((v: { value: string | number; init: any; }) => {
 
-            state.form[v.value] = v.init
 
-          })
 
-          state.trackPointList = []
 
-          that.$easyMap.initShape({
 
-            map: state.map,
 
-            layerName: "form-track-point-line",
 
-            layerZIndex: 9,
 
-            list: []
 
-          });
 
-          that.$easyMap.initShape({
 
-            map: state.map,
 
-            layerName: "form-track-point",
 
-            layerZIndex: 10,
 
-            list: []
 
-          });
 
-        }
 
-        state.trackList.splice(index, 1)
 
-        initTrack()
 
-      }).catch(() => {})
 
-    }
 
-    const onSubmit = () => {
 
-      ElMessageBox.confirm(`是否保存？`, "提示", {
 
-        confirmButtonText: "确定",
 
-        cancelButtonText: "取消",
 
-        type: "success",
 
-      }).then(() => {
 
-        state.loading = true
 
-        const result = JSON.parse(JSON.stringify(state.trackList)).map(v => {
 
-          delete v.ID
 
-          delete v.show
 
-          return v
 
-        })
 
-        axios.post("/init-speed-track-api/hujie-track-server/mock", result, {
 
-          contentType: "application/json"
 
-        }).then(res => {
 
-          if (res.status === 200 && res.data) {
 
-            ElMessage.success('保存成功！')
 
-          } else {
 
-            ElMessage.error('保存失败！')
 
-          }
 
-          state.loading = false
 
-        })
 
-      }).catch(() => {})
 
-    }
 
-    return {
 
-      ...toRefs(state),
 
-      mapLoad,
 
-      drawTrack,
 
-      onPointFocus,
 
-      SourceMap,
 
-      onTemp,
 
-      handleShow,
 
-      formParams,
 
-      handleEdit,
 
-      handleDelete,
 
-      onSubmit,
 
-      options
 
-    }
 
-  }
 
-})
 
-</script>
 
-
 
-<style lang="scss" scoped>
 
-.init-speed-track {
 
-  width: 100%;
 
-  height: 100%;
 
-  position: relative;
 
-  .map {
 
-    width: 100%;
 
-    height: 100vh;
 
-  }
 
-  .track {
 
-    position: absolute;
 
-    z-index: 20;
 
-    top: 0;
 
-    left: 0;
 
-    .track-line {
 
-      overflow-y: auto;
 
-      max-height: 180px;
 
-      .line {
 
-        height: 22px;
 
-        display: flex;
 
-        align-items: center;
 
-        .label {
 
-          width: 160px;
 
-          white-space: nowrap;
 
-        }
 
-        img {
 
-          width: 16px;
 
-          height: 16px;
 
-          cursor: pointer;
 
-          margin-left: 6px;
 
-        }
 
-      }
 
-    }
 
-    .track-point {
 
-      overflow-y: auto;
 
-      max-height: 600px;
 
-      .item {
 
-        display: flex;
 
-        align-items: center;
 
-        white-space: nowrap;
 
-      }
 
-      .point {
 
-        display: flex;
 
-        .position {
 
-          font-size: 12px;
 
-        }
 
-        border-bottom: 1px solid black;
 
-      }
 
-    }
 
-  }
 
-}
 
-</style>

La diferencia del archivo ha sido suprimido porque es demasiado grande
+ 0 - 18
src/views/init-speed-track/ship-track-invisible.svg


La diferencia del archivo ha sido suprimido porque es demasiado grande
+ 0 - 18
src/views/init-speed-track/ship-track-visible.svg


+ 0 - 162
src/views/init-speed-track/track-style.ts
Ver fichero 

@@ -1,162 +0,0 @@
 
-import * as ol from 'ol'
 
-import * as style from 'ol/style'
 
-import * as layer from 'ol/layer'
 
-import * as source from 'ol/source'
 
-import * as geom from 'ol/geom'
 
-import * as proj from 'ol/proj'
 
-import * as interaction from 'ol/interaction'
 
-import * as extent from "ol/extent";
 
-import * as format from "ol/format";
 
-import { Coordinate } from 'ol/coordinate'
 
-import * as turf from '@turf/turf'
 
-const trackLineStyle = (feature: any, resolution: any, map: any, color: any, pMap: { get: (arg0: string) => any }, callback: (arg0: style.Style[], arg1: any[]) => void) => {
 
-    const _style = []
 
-    _style.push(new style.Style({
 
-        stroke: new style.Stroke({
 
-            color: color,
 
-            width: 2
 
-        })
 
-    }))
 
-    const geometry = feature.getGeometry();
 
-    const length = geometry.getLength();//获取线段长度
 
-    const radio = (200 * resolution) / length;
 
-    const dradio = 1;//投影坐标系，如3857等，在EPSG:4326下可以设置dradio=10000
 
-    const radius = 10
 
-    const longRadius = radius * Math.SQRT2;
 
-    const judgeIs = (p1: any[], p2: any[], p3: any[]) => {
 
-        const E = 0.00000001
 
-        const k1 = (ps: any[], pe: number[]) => {
 
-            return (pe[1] - ps[1]) / (pe[0] - ps[0])
 
-        }
 
-        const k2 = (ps: any[], pe: number[]) => {
 
-            return (pe[0] - ps[0]) / (pe[1] - ps[0])
 
-        }
 
-        const a = (ps: any[], pe: any[]) => {
 
-            return Math.abs(k1(p1, ps) - k1(p1, pe)) <= E && Math.abs(k1(p1, ps) - k1(p1, pe)) >= -E
 
-        }
 
-        const d = (ps: any[], pe: any[]) => {
 
-            return Math.abs(k2(p1, ps) - k2(p1, pe)) <= E && Math.abs(k2(p1, ps) - k2(p1, pe)) >= -E
 
-        }
 
-        const s = (p: any[]) => {
 
-            return p3[0] === p[0] && p3[1] === p[1]
 
-        }
 
-        return s(p1) || s(p2) || a(p2, p3) || d(p2, p3)
 
-    }
 
-    for (let i = 0; i <= 1; i += radio) {
 
-        const arrowLocation = geometry.getCoordinateAt(i);
 
-        if (extent.containsCoordinate(map.getView().calculateExtent(map.getSize()), arrowLocation)) {
 
-            geometry.forEachSegment((start: any[], end: any[]) => {
 
-                if (!judgeIs(start, end, arrowLocation)) {
 
-                    return
 
-                }
 
-                let rotation = 0;
 
-                const dx = end[0] - start[0];
 
-                const dy = end[1] - start[1];
 
-                rotation = Math.atan2(dy, dx);
 
-                const pushStyle = (position: Coordinate) => {
 
-                    _style.push(new style.Style({
 
-                        geometry: new geom.Point(position),
 
-                        image: new style.RegularShape({
 
-                            stroke: new style.Stroke({
 
-                                color,
 
-                                width: 2,
 
-                                lineDash: [
 
-                                    longRadius - (4 * (radius / 10)),
 
-                                    longRadius + (5.5 * (radius / 10)),
 
-                                    longRadius,
 
-                                    0
 
-                                ]
 
-                            }),
 
-                            radius: radius / Math.SQRT2,
 
-                            rotation: -rotation,
 
-                            angle: Math.PI / (180 / 90),
 
-                            points: 4
 
-                        })
 
-                    }));
 
-                }
 
-                if (map.getView().getZoom() < map.getView().getMaxZoom()) {
 
-                    const dx1 = end[0] - arrowLocation[0];
 
-                    const dy1 = end[1] - arrowLocation[1];
 
-                    const dx2 = arrowLocation[0] - start[0];
 
-                    const dy2 = arrowLocation[1] - start[1];
 
-                    if (dx1 != dx2 && dy1 != dy2) {
 
-                        if (Math.abs(dradio * dx1 * dy2 - dradio * dx2 * dy1) < 0.001) {
 
-                            pushStyle(arrowLocation)
 
-                        }
 
-                    }
 
-                } else {
 
-                    if (Math.sqrt(Math.pow(start[0] - end[0], 2) + Math.pow(start[1] - end[1], 2)) > resolution * 100) {
 
-                        pushStyle([(start[0] + end[0]) / 2, (start[1] + end[1]) / 2])
 
-                    }
 
-                }
 
-            });
 
-        }
 
-    }
 
-    const pList = []
 
-    let lC = 0
 
-    // pList.push(pMap.get(geometry.getFirstCoordinate().join('-')))
 
-    if (map.getView().getZoom() < map.getView().getMaxZoom()) {
 
-        geometry.forEachSegment((start: number | Coordinate, end: number | any[]) => {
 
-            // @ts-ignore
 
-            const l = new geom.LineString([start, end])
 
-            lC += l.getLength()
 
-            if (extent.containsCoordinate(map.getView().calculateExtent(map.getSize()), <any>start) && lC > 200 * resolution) {
 
-                // @ts-ignore
 
-                const current = pMap.get(`${start[0]}-${start[1]}`)
 
-                // @ts-ignore
 
-                const next = pMap.get(`${end[0]}-${end[1]}`)
 
-                pList.push({current, next})
 
-                lC = 0
 
-            }
 
-        });
 
-    } else {
 
-        geometry.forEachSegment((start: number | Coordinate, end: number | any[]) => {
 
-            // @ts-ignore
 
-            const l = new geom.LineString([start, end])
 
-            if (extent.containsCoordinate(map.getView().calculateExtent(map.getSize()), <any>start)) {
 
-                // @ts-ignore
 
-                const current = pMap.get(`${start[0]}-${start[1]}`)
 
-                // @ts-ignore
 
-                const next = pMap.get(`${end[0]}-${end[1]}`)
 
-                pList.push({current, next})
 
-            }
 
-        });
 
-    }
 
-    pList.push({
 
-        current: pMap.get(geometry.getLastCoordinate().join('-')),
 
-        next: null
 
-    })
 
-    callback(_style, pList)
 
-    return _style
 
-}
 
-
 
-const trackPointStyle = (color: any, current: any, next: any) => {
 
-    const _style = []
 
-    let _text = String(current.speed) + '节'
 
-    if (next) {
 
-        const dis = turf.distance(turf.point(current.position), turf.point(next.position), {units: 'meters'})
 
-        _text += dis > 1000 ? `\n${(dis / 1000).toFixed(1)}千米` : `\n${dis.toFixed(0)}米`
 
-        _text += `\n${(dis / 0.51444444).toFixed(0)}秒`
 
-    }
 
-    _style.push(new style.Style({
 
-        image: new style.Circle({
 
-            radius: 10,
 
-            fill: new style.Fill({
 
-                color: color,
 
-            }),
 
-        }),
 
-        text: new style.Text({
 
-            text: _text,
 
-            font: "12px Microsoft YaHei", // 设置字体大小
 
-            fill: new style.Fill({
 
-                // 设置字体颜色
 
-                color: "#000",
 
-            }),
 
-        })
 
-    }),)
 
-    return _style
 
-}
 
-export default {
 
-    trackLineStyle,
 
-    trackPointStyle
 
-}

+ 36 - 0
src/views/screen/index.vue
Ver fichero 

@@ -0,0 +1,36 @@
 
+<template>
 
+啊沙发沙发
 
+</template>
 
+
 
+<script lang="ts">
 
+import {
 
+  defineComponent,
 
+  ref,
 
+  nextTick,
 
+  onMounted,
 
+  watch,
 
+  computed,
 
+  ComponentInternalInstance,
 
+  reactive,
 
+  toRefs,
 
+  getCurrentInstance
 
+} from 'vue'
 
+import {useStore} from 'vuex'
 
+
 
+export default defineComponent({
 
+  name: 'App',
 
+  components: {},
 
+  setup() {
 
+    const store = useStore()
 
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
 
+    const state = reactive({
 
+    });
 
+    return {
 
+      ...toRefs(state),
 
+    }
 
+  }
 
+})
 
+</script>
 
+
 
+<style lang="scss" scoped>
 
+</style>

+ 1 - 0
src/vite-env.d.ts
Ver fichero 

@@ -0,0 +1 @@
 
+/// <reference types="vite/client" />

+ 24 - 0
tsconfig.json
Ver fichero 

@@ -0,0 +1,24 @@
 
+{
 
+  "compilerOptions": {
 
+    "target": "ESNext",
 
+    "useDefineForClassFields": true,
 
+    "module": "ESNext",
 
+    "moduleResolution": "Node",
 
+    "strict": true,
 
+    "jsx": "preserve",
 
+    "resolveJsonModule": true,
 
+    "isolatedModules": true,
 
+    "esModuleInterop": true,
 
+    "lib": ["ESNext", "DOM"],
 
+    "skipLibCheck": true,
 
+    "noEmit": true,
 
+    "baseUrl": ".",
 
+    "paths": {
 
+      "@/*": [
 
+        "src/*"
 
+      ]
 
+    }
 
+  },
 
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
 
+  "references": [{ "path": "./tsconfig.node.json" }]
 
+}

+ 9 - 0
tsconfig.node.json
Ver fichero 

@@ -0,0 +1,9 @@
 
+{
 
+  "compilerOptions": {
 
+    "composite": true,
 
+    "module": "ESNext",
 
+    "moduleResolution": "Node",
 
+    "allowSyntheticDefaultImports": true
 
+  },
 
+  "include": ["vite.config.ts"]
 
+}

+ 3 - 10
vite.config.js
Ver fichero 

@@ -12,10 +12,10 @@ export default defineConfig({
 
     },
 
   },
 
   server: {
 
-    port: 1006,
 
+    port: 6886,
 
     // open: true,
 
     https: false,
 
-    base: '/',
 
+    base: './',
 
     host: '0.0.0.0',
 
     strictPort: false,
 
     proxy: {
 
@@ -28,17 +28,10 @@ export default defineConfig({
 
           return path.replace(/^\/api/, '')
 
         }
 
       },
 
-      '/EzServer6-api': {
 
-        target: 'http://74.10.28.116:8090/',
 
-        changeOrigin: true,
 
-        rewrite: path => {
 
-          return path
 
-        }
 
-      },
 
     }
 
   },
 
   build: {
 
-    outDir: "seat-tools",
 
+    outDir: "social-management-screen",
 
   },
 
   publicDir: 'src/out',
 
   optimizeDeps: {

+ 129 - 5
yarn.lock
Ver fichero 

@@ -161,6 +161,11 @@
 
   resolved "https://registry.npmmirror.com/@types/lodash/-/lodash-4.14.195.tgz#bafc975b252eb6cea78882ce8a7b6bf22a6de632"
 
   integrity sha512-Hwx9EUgdwf2GLarOjQp5ZH8ZmblzcbTBC2wtQWNKARBSxM9ezRIAUpeDTgoQRAFB0+8CNWXVA9+MaSOzOF3nPg==
 
 
+"@types/node@^20.1.0":
 
+  version "20.2.5"
 
+  resolved "https://registry.npmmirror.com/@types/node/-/node-20.2.5.tgz#26d295f3570323b2837d322180dfbf1ba156fefb"
 
+  integrity sha512-JJulVEQXmiY9Px5axXHeYGLSjhkZEnD+MDPDGbCbIAbMslkKwmygtZFy1X6s/075Yo94sf8GuSlFfPzysQrWZQ==
 
+
 
 "@types/web-bluetooth@^0.0.16":
 
   version "0.0.16"
 
   resolved "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz#1d12873a8e49567371f2a75fe3e7f7edca6662d8"
 
@@ -171,6 +176,50 @@
 
   resolved "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-4.2.3.tgz#ee0b6dfcc62fe65364e6395bf38fa2ba10bb44b6"
 
   integrity sha512-R6JDUfiZbJA9cMiguQ7jxALsgiprjBeHL5ikpXfJCH62pPHtI+JdJ5xWj6Ev73yXSlYl86+blXn1kZHQ7uElxw==
 
 
+"@volar/language-core@1.4.1":
 
+  version "1.4.1"
 
+  resolved "https://registry.npmmirror.com/@volar/language-core/-/language-core-1.4.1.tgz#66b5758252e35c4e5e71197ca7fa0344d306442c"
 
+  integrity sha512-EIY+Swv+TjsWpxOxujjMf1ZXqOjg9MT2VMXZ+1dKva0wD8W0L6EtptFFcCJdBbcKmGMFkr57Qzz9VNMWhs3jXQ==
 
+  dependencies:
 
+    "@volar/source-map" "1.4.1"
 
+
 
+"@volar/source-map@1.4.1":
 
+  version "1.4.1"
 
+  resolved "https://registry.npmmirror.com/@volar/source-map/-/source-map-1.4.1.tgz#e3b561775c742508e5e1f28609a4787c98056715"
 
+  integrity sha512-bZ46ad72dsbzuOWPUtJjBXkzSQzzSejuR3CT81+GvTEI2E994D8JPXzM3tl98zyCNnjgs4OkRyliImL1dvJ5BA==
 
+  dependencies:
 
+    muggle-string "^0.2.2"
 
+
 
+"@volar/typescript@1.4.1-patch.2":
 
+  version "1.4.1-patch.2"
 
+  resolved "https://registry.npmmirror.com/@volar/typescript/-/typescript-1.4.1-patch.2.tgz#89f4bd199ca81a832d86d1449b01f49f2b72137c"
 
+  integrity sha512-lPFYaGt8OdMEzNGJJChF40uYqMO4Z/7Q9fHPQC/NRVtht43KotSXLrkPandVVMf9aPbiJ059eAT+fwHGX16k4w==
 
+  dependencies:
 
+    "@volar/language-core" "1.4.1"
 
+
 
+"@volar/vue-language-core@1.6.5":
 
+  version "1.6.5"
 
+  resolved "https://registry.npmmirror.com/@volar/vue-language-core/-/vue-language-core-1.6.5.tgz#db42520f1a29737c7e40fbb3e6aead8def85ba75"
 
+  integrity sha512-IF2b6hW4QAxfsLd5mePmLgtkXzNi+YnH6ltCd80gb7+cbdpFMjM1I+w+nSg2kfBTyfu+W8useCZvW89kPTBpzg==
 
+  dependencies:
 
+    "@volar/language-core" "1.4.1"
 
+    "@volar/source-map" "1.4.1"
 
+    "@vue/compiler-dom" "^3.3.0"
 
+    "@vue/compiler-sfc" "^3.3.0"
 
+    "@vue/reactivity" "^3.3.0"
 
+    "@vue/shared" "^3.3.0"
 
+    minimatch "^9.0.0"
 
+    muggle-string "^0.2.2"
 
+    vue-template-compiler "^2.7.14"
 
+
 
+"@volar/vue-typescript@1.6.5":
 
+  version "1.6.5"
 
+  resolved "https://registry.npmmirror.com/@volar/vue-typescript/-/vue-typescript-1.6.5.tgz#6ca9bfefa5dc64ff97fcdbc74249e5e7da44e533"
 
+  integrity sha512-er9rVClS4PHztMUmtPMDTl+7c7JyrxweKSAEe/o/Noeq2bQx6v3/jZHVHBe8ZNUti5ubJL/+Tg8L3bzmlalV8A==
 
+  dependencies:
 
+    "@volar/typescript" "1.4.1-patch.2"
 
+    "@volar/vue-language-core" "1.6.5"
 
+
 
 "@vue/compiler-core@3.3.4":
 
   version "3.3.4"
 
   resolved "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.3.4.tgz#7fbf591c1c19e1acd28ffd284526e98b4f581128"
 
@@ -181,7 +230,7 @@
 
     estree-walker "^2.0.2"
 
     source-map-js "^1.0.2"
 
 
-"@vue/compiler-dom@3.3.4":
 
+"@vue/compiler-dom@3.3.4", "@vue/compiler-dom@^3.3.0":
 
   version "3.3.4"
 
   resolved "https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.3.4.tgz#f56e09b5f4d7dc350f981784de9713d823341151"
 
   integrity sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==
 
@@ -189,7 +238,7 @@
 
     "@vue/compiler-core" "3.3.4"
 
     "@vue/shared" "3.3.4"
 
 
-"@vue/compiler-sfc@3.3.4":
 
+"@vue/compiler-sfc@3.3.4", "@vue/compiler-sfc@^3.3.0":
 
   version "3.3.4"
 
   resolved "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.3.4.tgz#b19d942c71938893535b46226d602720593001df"
 
   integrity sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==
 
@@ -229,7 +278,7 @@
 
     estree-walker "^2.0.2"
 
     magic-string "^0.30.0"
 
 
-"@vue/reactivity@3.3.4":
 
+"@vue/reactivity@3.3.4", "@vue/reactivity@^3.3.0":
 
   version "3.3.4"
 
   resolved "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.3.4.tgz#a27a29c6cd17faba5a0e99fbb86ee951653e2253"
 
   integrity sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==
 
@@ -261,7 +310,7 @@
 
     "@vue/compiler-ssr" "3.3.4"
 
     "@vue/shared" "3.3.4"
 
 
-"@vue/shared@3.3.4":
 
+"@vue/shared@3.3.4", "@vue/shared@^3.3.0":
 
   version "3.3.4"
 
   resolved "https://registry.npmmirror.com/@vue/shared/-/shared-3.3.4.tgz#06e83c5027f464eef861c329be81454bc8b70780"
 
   integrity sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==
 
@@ -315,11 +364,23 @@ axios@^1.3.4:
 
     form-data "^4.0.0"
 
     proxy-from-env "^1.1.0"
 
 
+balanced-match@^1.0.0:
 
+  version "1.0.2"
 
+  resolved "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
 
+  integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
+
 
 binary-extensions@^2.0.0:
 
   version "2.2.0"
 
   resolved "https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
 
   integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
 
 
+brace-expansion@^2.0.1:
 
+  version "2.0.1"
 
+  resolved "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-2.0.1.tgz#1edc459e0f0c548486ecf9fc99f2221364b9a0ae"
 
+  integrity sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==
 
+  dependencies:
 
+    balanced-match "^1.0.0"
 
+
 
 braces@~3.0.2:
 
   version "3.0.2"
 
   resolved "https://registry.npmmirror.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
 
@@ -359,6 +420,11 @@ dayjs@^1.11.3:
 
   resolved "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.7.tgz#4b296922642f70999544d1144a2c25730fce63e2"
 
   integrity sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==
 
 
+de-indent@^1.0.2:
 
+  version "1.0.2"
 
+  resolved "https://registry.npmmirror.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
 
+  integrity sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==
 
+
 
 delayed-stream@~1.0.0:
 
   version "1.0.0"
 
   resolved "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
 
@@ -456,6 +522,11 @@ glob-parent@~5.1.2:
 
   dependencies:
 
     is-glob "^4.0.1"
 
 
+he@^1.2.0:
 
+  version "1.2.0"
 
+  resolved "https://registry.npmmirror.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
 
+  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
+
 
 immutable@^4.0.0:
 
   version "4.3.0"
 
   resolved "https://registry.npmmirror.com/immutable/-/immutable-4.3.0.tgz#eb1738f14ffb39fd068b1dbe1296117484dd34be"
 
@@ -500,6 +571,13 @@ lodash@^4.17.21:
 
   resolved "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
 
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
 
+lru-cache@^6.0.0:
 
+  version "6.0.0"
 
+  resolved "https://registry.npmmirror.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
 
+  integrity sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==
 
+  dependencies:
 
+    yallist "^4.0.0"
 
+
 
 magic-string@^0.30.0:
 
   version "0.30.0"
 
   resolved "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.0.tgz#fd58a4748c5c4547338a424e90fa5dd17f4de529"
 
@@ -524,6 +602,18 @@ mime-types@^2.1.12:
 
   dependencies:
 
     mime-db "1.52.0"
 
 
+minimatch@^9.0.0:
 
+  version "9.0.1"
 
+  resolved "https://registry.npmmirror.com/minimatch/-/minimatch-9.0.1.tgz#8a555f541cf976c622daf078bb28f29fb927c253"
 
+  integrity sha512-0jWhJpD/MdhPXwPuiRkCbfYfSKp2qnn2eOc279qI7f+osl/l+prKSrvhg157zSYvx/1nmgn2NqdT6k2Z7zSH9w==
 
+  dependencies:
 
+    brace-expansion "^2.0.1"
 
+
 
+muggle-string@^0.2.2:
 
+  version "0.2.2"
 
+  resolved "https://registry.npmmirror.com/muggle-string/-/muggle-string-0.2.2.tgz#786aa53fea1652c61c6a59e1f839292b262bc72a"
 
+  integrity sha512-YVE1mIJ4VpUMqZObFndk9CJu6DBJR/GB13p3tXuNbwD4XExaI5EOuRl6BHeIDxIqXZVxSfAC+y6U1Z/IxCfKUg==
 
+
 
 nanoid@^3.3.6:
 
   version "3.3.6"
 
   resolved "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c"
 
@@ -586,6 +676,13 @@ sass@^1.60.0:
 
     immutable "^4.0.0"
 
     source-map-js ">=0.6.2 <2.0.0"
 
 
+semver@^7.3.8:
 
+  version "7.5.1"
 
+  resolved "https://registry.npmmirror.com/semver/-/semver-7.5.1.tgz#c90c4d631cf74720e46b21c1d37ea07edfab91ec"
 
+  integrity sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==
 
+  dependencies:
 
+    lru-cache "^6.0.0"
 
+
 
 "source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
 
   version "1.0.2"
 
   resolved "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
 
@@ -598,7 +695,12 @@ to-regex-range@^5.0.1:
 
   dependencies:
 
     is-number "^7.0.0"
 
 
-vite@^4.3.9:
 
+typescript@^4.9.3:
 
+  version "4.9.5"
 
+  resolved "https://registry.npmmirror.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"
 
+  integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
 
+
 
+vite@^4.2.0:
 
   version "4.3.9"
 
   resolved "https://registry.npmmirror.com/vite/-/vite-4.3.9.tgz#db896200c0b1aa13b37cdc35c9e99ee2fdd5f96d"
 
   integrity sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==
 
@@ -621,6 +723,23 @@ vue-router@^4.1.6:
 
   dependencies:
 
     "@vue/devtools-api" "^6.5.0"
 
 
+vue-template-compiler@^2.7.14:
 
+  version "2.7.14"
 
+  resolved "https://registry.npmmirror.com/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz#4545b7dfb88090744c1577ae5ac3f964e61634b1"
 
+  integrity sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==
 
+  dependencies:
 
+    de-indent "^1.0.2"
 
+    he "^1.2.0"
 
+
 
+vue-tsc@^1.2.0:
 
+  version "1.6.5"
 
+  resolved "https://registry.npmmirror.com/vue-tsc/-/vue-tsc-1.6.5.tgz#cd18804b12087c300b6c9ee2a1da41a63f11103e"
 
+  integrity sha512-Wtw3J7CC+JM2OR56huRd5iKlvFWpvDiU+fO1+rqyu4V2nMTotShz4zbOZpW5g9fUOcjnyZYfBo5q5q+D/q27JA==
 
+  dependencies:
 
+    "@volar/vue-language-core" "1.6.5"
 
+    "@volar/vue-typescript" "1.6.5"
 
+    semver "^7.3.8"
 
+
 
 vue@^3.2.47:
 
   version "3.3.4"
 
   resolved "https://registry.npmmirror.com/vue/-/vue-3.3.4.tgz#8ed945d3873667df1d0fcf3b2463ada028f88bd6"
 
@@ -638,3 +757,8 @@ vuex@^4.1.0:
 
   integrity sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==
 
   dependencies:
 
     "@vue/devtools-api" "^6.0.0-beta.11"
 
+
 
+yallist@^4.0.0:
 
+  version "4.0.0"
 
+  resolved "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
 
+  integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==