gis打点

.prettierrc.json

@@ -1,8 +1,8 @@
 {
   "$schema": "https://json.schemastore.org/prettierrc",
-  "semi": false,
+  "semi": true,
   "tabWidth": 2,
   "singleQuote": true,
   "printWidth": 100,
   "trailingComma": "none"
-}
+}

src/components/map/GisMap.vue

@@ -6,29 +6,33 @@
 </template>
 
 <script setup>
-import { onMounted } from 'vue'
-import { myBridge } from '@/utils/map/map.js'
-import { addPointSearch } from '@/utils/map/mapOperation.js'
-let bridge
-let listen
+import { nextTick, onMounted } from 'vue';
+import { myBridge } from '@/utils/map/map.js';
+import { addTrajectory, addPoint, playTrajectory } from '@/utils/map/mapOperation.js';
+let bridge;
+let listen;
 onMounted(() => {
   myBridge.bridgeContent = bridge = new CityGis.Bridge({
     id: 'map',
     url: 'http://10.1.161.53:9082/vmap/GIS.html?appKey=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBsaWNhdGlvbl9pZCI6MzMsImFwcGxpY2F0aW9uX25hbWUiOiLmjZ_ogJciLCJleHAiOjE3NTIyMTgwNDZ9.3ZomslkPrbBJ2xmI0QFyaRPuL21cjuFoijDrkPazb8s&debug=false&maptype=3d&code=city&devicetype=lg&themeid=Gis&mapthemeid=undefined',
-    onReady: function () {}
-  })
+    onReady: function () {
+      console.log('ready');
+      //默认加载
+      addPoint('newAdress');
+      addPoint('touch');
+    }
+  });
 
   listen = (arg) => {
-    console.log(arg)
+    console.log('listen', arg);
     switch (arg.action) {
       case 'ViewComplete':
-        addPointSearch()
-        break
+        break;
     }
-  }
+  };
   //鼠标操作地图监听
-  bridge.addEventListener(listen)
-})
+  bridge.addEventListener(listen);
+});
 </script>
 
 <style scoped lang="scss">

src/stores/mapStore.js

@@ -1,17 +1,74 @@
-import { ref } from 'vue'
-import { defineStore } from 'pinia'
+import { ref } from 'vue';
+import { defineStore } from 'pinia';
+import {
+  addTrajectory,
+  addImagePoint,
+  addPoint,
+  closePoint,
+  playTrajectory,
+  startBidding
+} from '@/utils/map/mapOperation.js';
 
 export const useMapStore = defineStore('mapStore', () => {
   //当前图例高亮图标列表
-  const currentToolSelectArray = ref(['newAdress', 'touch'])
+  const currentToolSelectArray = ref(['newAdress', 'touch']);
 
+  //点亮地图工具图标
   const setCurrentToolSelectArray = (value) => {
-    currentToolSelectArray.value.push(value)
-  }
+    currentToolSelectArray.value.push(value);
+    switch (value) {
+      case 'newAdress': {
+        //新址图标
+        addPoint(value);
+        break;
+      }
+      case 'touch': {
+        //密接图标
+        addImagePoint(value, {
+          imageUrl: new URL(`@/assets/image/mapTools/2.png`, import.meta.url).href
+        });
+        break;
+      }
+      case 'infectious': {
+        //传染病图标
+        addPoint(value);
+        break;
+      }
+      case 'feverClinic': {
+        //发热门诊图标
+        addPoint(value);
+        break;
+      }
+      case 'breathe': {
+        //呼吸图标
+        addPoint(value);
+        break;
+      }
+      case 'flowCar': {
+        //流调会商车图标
+        addTrajectory();
+        setTimeout(() => {
+          playTrajectory();
+        }, 1000);
+        break;
+      }
+      case 'Bidding': {
+        //标会工具
+        startBidding(false);
+        break;
+      }
+    }
+  };
 
+  //关闭地图工具图标
   const delCurrentToolSelectArray = (value) => {
-    currentToolSelectArray.value.filter((item) => item != value)
-  }
+    currentToolSelectArray.value = currentToolSelectArray.value.filter((item) => item != value);
+    if (value == 'Bidding') {
+      startBidding(false);
+    } else {
+      closePoint(value);
+    }
+  };
 
-  return { currentToolSelectArray, setCurrentToolSelectArray, delCurrentToolSelectArray }
-})
+  return { currentToolSelectArray, setCurrentToolSelectArray, delCurrentToolSelectArray };
+});

src/utils/map/mapOperation.js

@@ -1,36 +1,264 @@
-import { myBridge } from './map'
-
+import { myBridge } from './map';
+// import text from '@/utils/map/text.json';
 export function invokeParams(ActionName, params) {
-  console.log(ActionName, params)
+  console.log(ActionName, params);
   myBridge.bridgeContent.Invoke({
     ActionName: ActionName,
     Parameters: {
       ...params
     }
-  })
+  });
 }
 export function invokeParamsMap(mapId, ActionName, params) {
-  console.log(ActionName, params)
-  let map = mapId ? 'splitBridgeContent' + mapId : 'bridgeContent'
+  console.log(ActionName, params);
+  let map = mapId ? 'splitBridgeContent' + mapId : 'bridgeContent';
 
   myBridge[map].Invoke({
     ActionName: ActionName,
     Parameters: {
       ...params
     }
-  })
+  });
 }
 export function addPointSearchFun(mapId) {
   invokeParamsMap(mapId, 'MapClickAll', {
     status: true,
     is_draw: true,
     is_code: false
-  })
+  });
 }
 export function addPointSearch() {
   invokeParams('MapClickAll', {
     status: true,
     is_draw: true,
     is_code: false
-  })
+  });
+}
+
+/**
+ * 打点
+ * @param {*} name 打点方法name，关闭时可做标识用
+ * @param {*} param.imageUrl 打点图标，需要使用new URL(``, import.meta.url).href转为链接
+ * @param {*} param.url 数据源接口地址
+ */
+export function addPoint(name) {
+  invokeParams('ShowData', {
+    name: name,
+    data: {
+      url: './Data/area.json',
+      parsedata: 'function(d){return d}',
+      parsegeometry: 'function(item){return {x:Number(item.x),y:Number(item.y)}}'
+    },
+    legendVisible: false,
+    popupEnabled: false,
+    renderer: {
+      type: 'simple',
+      label: '测试车辆',
+      visualVariables: [],
+      symbol: {
+        type: 'simple-marker',
+        size: 30,
+        color: 'rgba(0,128,255,0.4)',
+        outline: {
+          width: 0.5,
+          color: '#0080FF'
+        }
+        // type: 'picture-marker',
+        // url: new URL(`@/assets/image/mapTools/2.png`, import.meta.url).href,
+        // width: '64px',
+        // height: '64px'
+      }
+    },
+    labels: [
+      {
+        fields: ['#.size'],
+        color: [255, 255, 255, 1],
+        size: 15,
+        labelPlacement: 'center-center'
+      }
+    ]
+  });
+}
+
+/**
+ * 带图标打点
+ * @param {*} name 打点方法name，关闭时可做标识用
+ * @param {*} param.imageUrl 打点图标，需要使用new URL(``, import.meta.url).href转为链接
+ * @param {*} param.url 数据源接口地址
+ */
+export function addImagePoint(name, params) {
+  invokeParams('ShowData', {
+    name: name,
+    data: {
+      url: new URL(`@/utils/map/test.json`, import.meta.url).href,
+      parsedata: 'function(d){return d}',
+      parsegeometry: 'function(item){return {x:Number(item.x),y:Number(item.y)}}'
+    },
+    legendVisible: false,
+    popupEnabled: false,
+    renderer: {
+      type: 'simple',
+      label: '测试车辆',
+      visualVariables: [],
+      symbol: {
+        type: 'picture-marker',
+        url: params.imageUrl,
+        width: '56px',
+        height: '56px'
+      }
+    },
+    labels: [
+      {
+        fields: ['#.size'],
+        color: [255, 255, 255, 1],
+        size: 15,
+        labelPlacement: 'center-center'
+      }
+    ]
+  });
+}
+
+//电线面隐藏
+export function closePoint(name) {
+  invokeParams('ShowData', {
+    name: name,
+    mode: 'visible',
+    visible: false
+  });
+}
+
+//轨迹
+export function addTrajectory() {
+  invokeParams('ShowData', {
+    name: 'car_layer1',
+    type: 'track',
+    isLocate: true,
+    data: {
+      isComputingRote: false,
+      url: './Data/1212/GPS模拟数据.json',
+      parsedata: 'function(d){return d.data}',
+      parsegeometry: 'function(item){return {x:Number(item.X),y:Number(item.Y)}}'
+    },
+    legendVisible: true,
+    popupEnabled: true,
+    renderer: {
+      type: 'unique-value',
+      uniqueValueInfos: [
+        {
+          value: 'line',
+          symbol: {
+            type: 'line-3d',
+            symbolLayers: [
+              {
+                type: 'line',
+                size: 2,
+                material: {
+                  color: 'black'
+                },
+                cap: 'round',
+                join: 'round'
+              }
+            ]
+          }
+        },
+        {
+          value: 'start',
+          symbol: {
+            type: 'simple-marker',
+            size: 20,
+            color: 'red',
+            outline: {
+              width: 0.5,
+              color: 'white'
+            }
+          }
+        },
+        {
+          value: 'end',
+          symbol: {
+            type: 'simple-marker',
+            size: 20,
+            color: 'orange',
+            outline: {
+              width: 0.5,
+              color: 'white'
+            }
+          }
+        }
+      ]
+    }
+  });
+}
+
+//轨迹播放
+export function playTrajectory() {
+  invokeParams('ShowData', {
+    name: 'car_layer1',
+    mode: 'player',
+    action: 'play',
+    speed: 20,
+    showline: true,
+    renderer: {
+      type: 'unique-value',
+      uniqueValueInfos: [
+        {
+          value: 'line',
+          symbol: {
+            type: 'line-3d',
+            symbolLayers: [
+              {
+                type: 'line',
+                size: 2,
+                material: {
+                  color: 'green'
+                },
+                cap: 'round',
+                join: 'round'
+              }
+            ]
+          }
+        },
+        {
+          value: 'flowlabel',
+          symbol: {
+            type: 'text',
+            color: 'black',
+            text: '{{FID}}\r\n{{DATETIME}}\r\n\r\n',
+            font: {
+              size: 10,
+              weight: 'bold'
+            }
+          }
+        },
+        {
+          value: 'marker',
+          symbol: {
+            type: 'simple-marker',
+            size: 20,
+            color: 'red',
+            outline: {
+              width: 0.5,
+              color: 'white'
+            }
+          }
+        }
+      ]
+    }
+  });
+}
+
+//标会
+export function startBidding(visible = true) {
+  invokeParams('userSketch', {
+    type: 'point',
+    visible: visible,
+    isTools: true,
+    position: 'top-right',
+    activeSymbol: {
+      type: 'picture-marker',
+      url: new URL(`@/assets/image/bidding.png`, import.meta.url).href,
+      width: '24px',
+      height: '24px'
+    }
+  });
 }

src/utils/map/test.json

@@ -0,0 +1,236 @@
+[
+  {
+    "id": 1,
+    "name": "浦东新区",
+    "from": null,
+    "x": 23636.12539541634,
+    "y": -15201.26019790169,
+    "size": 14,
+    "color": "#6762ce",
+    "linesize": 3
+  },
+  {
+    "id": 0,
+    "name": "上海",
+    "from": 1,
+    "x": 0,
+    "y": 0,
+    "size": 18,
+    "color": "#46bee9",
+    "linecolor": "#ffa022",
+    "linesize": 3
+  },
+  {
+    "id": 19,
+    "name": "宝山区",
+    "from": null,
+    "x": -6512.590934532753,
+    "y": 17156.473091914435,
+    "size": 10,
+    "color": "#f84f74",
+    "linesize": 3
+  },
+  {
+    "id": 20,
+    "name": "上海",
+    "from": 19,
+    "x": 0,
+    "y": 0,
+    "size": 18,
+    "color": "#46bee9",
+    "linecolor": "#ffa022",
+    "linesize": 3
+  },
+  {
+    "id": 21,
+    "name": "崇明区",
+    "from": null,
+    "x": 12091.584040170943,
+    "y": 41206.31387697806,
+    "size": 15,
+    "color": "#0f2bba",
+    "linesize": 3
+  },
+  {
+    "id": 22,
+    "name": "上海",
+    "from": 21,
+    "x": 0,
+    "y": 0,
+    "size": 18,
+    "color": "#46bee9",
+    "linecolor": "#ffa022",
+    "linesize": 3
+  },
+  {
+    "id": 2,
+    "name": "上海",
+    "from": null,
+    "x": 0,
+    "y": 0,
+    "size": 18,
+    "color": "#46bee9",
+    "linecolor": "#ffa022",
+    "linesize": 3
+  },
+  {
+    "id": 3,
+    "name": "浦东新区",
+    "from": 2,
+    "x": 23636.12539541634,
+    "y": -15201.26019790169,
+    "size": 14,
+    "color": "#6762ce",
+    "linesize": 3
+  },
+  {
+    "id": 4,
+    "name": "宝山区",
+    "from": 2,
+    "x": -6512.590934532753,
+    "y": 17156.473091914435,
+    "size": 10,
+    "color": "#f84f74",
+    "linesize": 3
+  },
+  {
+    "id": 5,
+    "name": "崇明区",
+    "from": 2,
+    "x": 12091.584040170943,
+    "y": 41206.31387697806,
+    "size": 15,
+    "color": "#0f2bba",
+    "linesize": 3
+  },
+  {
+    "id": 6,
+    "name": "奉贤区",
+    "from": 2,
+    "x": 8185.239628484123,
+    "y": -36086.48274500668,
+    "size": 20,
+    "color": "#8a927a",
+    "linesize": 3
+  },
+  {
+    "id": 7,
+    "name": "虹口区",
+    "from": 2,
+    "x": 1309.1347281323397,
+    "y": 4798.249141994689,
+    "size": 17,
+    "color": "#053854",
+    "linesize": 3
+  },
+  {
+    "id": 8,
+    "name": "黄浦区",
+    "from": 2,
+    "x": 1122.311294799787,
+    "y": -1947.8252514236956,
+    "size": 20,
+    "color": "#54b985",
+    "linesize": 3
+  },
+  {
+    "id": 9,
+    "name": "嘉定区",
+    "from": 2,
+    "x": -21624.033372356265,
+    "y": 13871.776452233491,
+    "size": 18,
+    "color": "#bc0077",
+    "linesize": 3
+  },
+  {
+    "id": 10,
+    "name": "金山区",
+    "from": 2,
+    "x": -23793.388775273517,
+    "y": -42053.50616423838,
+    "size": 19,
+    "color": "#4595b7",
+    "linesize": 3
+  },
+  {
+    "id": 11,
+    "name": "静安区",
+    "from": 2,
+    "x": -2012.303712988214,
+    "y": 4119.31731046905,
+    "size": 15,
+    "color": "#b8f5d3",
+    "linesize": 3
+  },
+  {
+    "id": 12,
+    "name": "闵行区",
+    "from": 2,
+    "x": -5022.996485790296,
+    "y": -16222.021441038873,
+    "size": 23,
+    "color": "#079daf",
+    "linesize": 3
+  },
+  {
+    "id": 13,
+    "name": "普陀区",
+    "from": 2,
+    "x": -7588.584700510197,
+    "y": 2691.2593399931793,
+    "size": 19,
+    "color": "#17e30a",
+    "linesize": 3
+  },
+  {
+    "id": 14,
+    "name": "青浦区",
+    "from": 2,
+    "x": -47566.605033865955,
+    "y": -17286.86438856891,
+    "size": 20,
+    "color": "#ff39ef",
+    "linesize": 3
+  },
+  {
+    "id": 15,
+    "name": "松江区",
+    "from": 2,
+    "x": -24021.64433641208,
+    "y": -24180.289099939633,
+    "size": 19,
+    "color": "#b8dd16",
+    "linesize": 3
+  },
+  {
+    "id": 16,
+    "name": "徐汇区",
+    "from": 2,
+    "x": -3060.1146520900074,
+    "y": -7845.843302421796,
+    "size": 9,
+    "color": "#cd87b9",
+    "linesize": 3
+  },
+  {
+    "id": 17,
+    "name": "杨浦区",
+    "from": 2,
+    "x": 5380.812131382292,
+    "y": 7184.573767678288,
+    "size": 19,
+    "color": "#301c8b",
+    "linesize": 3
+  },
+  {
+    "id": 18,
+    "name": "长宁区",
+    "from": 2,
+    "x": -8648.355272976973,
+    "y": -2897.8660598946153,
+    "size": 13,
+    "color": "#277eb5",
+    "linesize": 3
+  }
+]

src/views/DataCenterGis/components/RightPanel.vue

@@ -9,7 +9,7 @@
         <div class="charts-box" id="leftChartId" ref="leftChartId"></div>
       </div>
       <div class="chart-right-container">
-        <titleContent>本市发热腹综情况</titleContent>
+        <titleContent>发热门诊、呼综情况</titleContent>
         <div class="charts-box" id="rightChartId" ref="rightChartId"></div>
       </div>
     </div>
@@ -37,10 +37,10 @@
 </template>
 
 <script setup>
-import { onMounted, ref } from 'vue'
-import titleContent from './TitleContent.vue'
-import * as echarts from 'echarts'
-import { stackRightOptions, stackLeftOptions } from '@/utils/chartsOptions.js'
+import { onMounted, ref } from 'vue';
+import titleContent from './TitleContent.vue';
+import * as echarts from 'echarts';
+import { stackRightOptions, stackLeftOptions } from '@/utils/chartsOptions.js';
 const partitionData = [
   {
     name: '松江区',
@@ -127,34 +127,34 @@ const partitionData = [
     data: '21',
     hot: 2
   }
-]
+];
 
-const leftChartId = ref('')
-const rightChartId = ref('')
+const leftChartId = ref('');
+const rightChartId = ref('');
 //初始化echarts图
 const initChart = (chartDom, option) => {
-  const myChart = echarts.init(chartDom)
-  option && myChart.setOption(option)
-}
+  const myChart = echarts.init(chartDom);
+  option && myChart.setOption(option);
+};
 onMounted(() => {
-  let xAxisData = []
+  let xAxisData = [];
   const yAxisData = {
     data1: [],
     data2: [],
     data3: [],
     data4: []
-  }
+  };
 
   for (let i = 0; i < 10; i++) {
-    xAxisData.push('202' + i)
-    yAxisData.data1.push(+(Math.random() * 2).toFixed(2))
-    yAxisData.data2.push(+(Math.random() * 5).toFixed(2))
-    yAxisData.data3.push(+(Math.random() + 0.3).toFixed(2))
-    yAxisData.data4.push(+Math.random().toFixed(2))
+    xAxisData.push('202' + i);
+    yAxisData.data1.push(+(Math.random() * 2).toFixed(2));
+    yAxisData.data2.push(+(Math.random() * 5).toFixed(2));
+    yAxisData.data3.push(+(Math.random() + 0.3).toFixed(2));
+    yAxisData.data4.push(+Math.random().toFixed(2));
   }
-  initChart(rightChartId.value, stackRightOptions(xAxisData, yAxisData))
-  initChart(leftChartId.value, stackLeftOptions(xAxisData, yAxisData))
-})
+  initChart(rightChartId.value, stackRightOptions(xAxisData, yAxisData));
+  initChart(leftChartId.value, stackLeftOptions(xAxisData, yAxisData));
+});
 </script>
 
 <style lang="scss">

src/views/DataCenterGis/components/Tools.vue

@@ -1,16 +1,18 @@
 <template>
   <div class="tools-bar">
+    {{ currentToolSelectArray }}
     <div class="option-box" v-for="tool in toolsOptions" :key="tool.id" @click="handleSelect(tool)">
-      <img :src="currentToolSelectArray.includes(tool.id) ? tool.activeImage : tool.image" />
+      <img
+        :src="mapStore.currentToolSelectArray.includes(tool.id) ? tool.activeImage : tool.image"
+      />
     </div>
   </div>
 </template>
 
 <script setup>
-import { useMapStore } from '@/stores/mapStore.js'
+import { useMapStore } from '@/stores/mapStore.js';
 
-const { currentToolSelectArray, setCurrentToolSelectArray, delCurrentToolSelectArray } =
-  useMapStore()
+const mapStore = useMapStore();
 //地图工具图例
 const toolsOptions = [
   {
@@ -55,15 +57,15 @@ const toolsOptions = [
     image: new URL(`@/assets/image/mapTools/7.png`, import.meta.url).href,
     activeImage: new URL(`@/assets/image/mapTools/7-1.png`, import.meta.url).href
   }
-]
+];
 
 const handleSelect = (tool) => {
-  if (currentToolSelectArray.includes(tool.id)) {
-    delCurrentToolSelectArray(tool?.id || '')
+  if (mapStore.currentToolSelectArray.includes(tool.id)) {
+    mapStore.delCurrentToolSelectArray(tool?.id || '');
   } else {
-    setCurrentToolSelectArray(tool?.id || '')
+    mapStore.setCurrentToolSelectArray(tool?.id || '');
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>

vite.config.js

@@ -27,8 +27,8 @@ export default defineConfig({
     postcss: {
       plugins: [
         postcssPxToViewport({
-          viewportWidth: 2420, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
-          viewportHeight: 1580, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
+          viewportWidth: 1950, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
+          viewportHeight: 1080, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
           unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
           viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
           fontViewportUnit: 'vw',