Merge branch 'master' of https://git.caner.top/Caner/busRoute

src/components/map/map.service.ts

@@ -83,97 +83,128 @@ export default class MapService extends Service {
     window._AMapSecurityConfig = {
       securityJsCode: '184c86be3bbd9a8a941bcaaf6b09c7cd'
     }
-    AMapLoader.load({
-      key: '0c5c83112cafefa77154769b4433c3df',
-      version: '2.0',
-      plugins: [ 'AMap.DistrictSearch', 'AMap.Weather', 'AMap.Bounds', 'AMap.Driving' ],
-      AMapUI: {
-        version: '1.1',
-        plugins: [ 'geo/DistrictExplorer' ]
-      }
-    }).then((AMap) => {
-      const map = new AMap.Map('container', { // 设置地图容器id
-        zoom, // 设置当前显示级别
-        expandZoomRange: true, // 开启显示范围设置
-        zooms: [ 9, 20 ], // 最小显示级别为7，最大显示级别为20
-        center: [ 103.062334, 30.012488 ], // 设置地图中心点位置
-        mapStyle: 'amap://styles/grey'
-      })
-      // 限制位置 getBounds()
-      const bounds = new AMap.Bounds(
-        [ 103.395136, 30.936781 ], // 右上角经纬度 northEast
-        [ 101.93598, 28.845463 ] // 左下角经纬度 southWest
-      )
-      map.setLimitBounds(bounds)
-      // 天气
-      const weather = new AMap.Weather()
-      weather.getLive('雅安市', (err: any, data: Any) => {
-        console.log('天气', err, data)
-        if (err) {
-          this.notification.warning({
-            content: '天气获取失败',
-            duration: 2000
-          })
-          return
+    return new Promise<void>((resolve, reject) => {
+      AMapLoader.load({
+        key: '0c5c83112cafefa77154769b4433c3df',
+        version: '2.0',
+        plugins: [ 'AMap.DistrictSearch', 'AMap.Weather', 'AMap.Bounds', 'AMap.Driving' ],
+        AMapUI: {
+          version: '1.1',
+          plugins: [ 'geo/DistrictExplorer' ]
         }
-        this.store.setWeather(data)
-      })
-      // 镂空雅安 511800 adcode
-      AMapUI.loadUI([ 'geo/DistrictExplorer' ], (DistrictExplorer: any) => {
-        const districtExplorer = new DistrictExplorer({ map })
-        districtExplorer.loadMultiAreaNodes([ 100000, 511800 ], (error: any, areaNodes: string | any[]) => {
-          const countryNode = areaNodes[0]
-          const cityNodes = areaNodes.slice(1)
-          const path = []
-          // 首先放置背景区域，这里是大陆的边界
-          path.push(this.getLongestRing(countryNode.getParentFeature()))
-
-          for (let i = 0, len = cityNodes.length; i < len; i++) {
-            // 逐个放置需要镂空的市级区域
-            path.push(...this.getAllRings(cityNodes[i].getParentFeature()))
+      }).then((AMap) => {
+        const map = new AMap.Map('container', { // 设置地图容器id
+          zoom, // 设置当前显示级别
+          expandZoomRange: true, // 开启显示范围设置
+          zooms: [ 9, 20 ], // 最小显示级别为7，最大显示级别为20
+          center: [ 103.062334, 30.012488 ], // 设置地图中心点位置
+          mapStyle: 'amap://styles/grey'
+        })
+        // 限制位置 getBounds()
+        const bounds = new AMap.Bounds(
+          [ 103.395136, 30.936781 ], // 右上角经纬度 northEast
+          [ 101.93598, 28.845463 ] // 左下角经纬度 southWest
+        )
+        map.setLimitBounds(bounds)
+        // 天气
+        const weather = new AMap.Weather()
+        weather.getLive('雅安市', (err: any, data: Any) => {
+          console.log('天气', err, data)
+          if (err) {
+            this.notification.warning({
+              content: '天气获取失败',
+              duration: 2000
+            })
+            return
           }
-          // 绘制带环多边形
-          const polygon = new AMap.Polygon({
-            bubble: true,
-            lineJoin: 'round',
-            strokeColor: '#030E25', // 线颜色
-            strokeOpacity: 1, // 线透明度
-            strokeWeight: 1, // 线宽
-            fillColor: '#030E25', // 填充色
-            fillOpacity: 1, // 填充透明度
-            map,
-            path
+          this.store.setWeather(data)
+        })
+        // 镂空雅安 511800 adcode
+        AMapUI.loadUI([ 'geo/DistrictExplorer' ], (DistrictExplorer: any) => {
+          const districtExplorer = new DistrictExplorer({ map })
+          districtExplorer.loadMultiAreaNodes([ 100000, 511800 ], (error: any, areaNodes: string | any[]) => {
+            const countryNode = areaNodes[0]
+            const cityNodes = areaNodes.slice(1)
+            const path = []
+            // 首先放置背景区域，这里是大陆的边界
+            path.push(this.getLongestRing(countryNode.getParentFeature()))
+
+            for (let i = 0, len = cityNodes.length; i < len; i++) {
+              // 逐个放置需要镂空的市级区域
+              path.push(...this.getAllRings(cityNodes[i].getParentFeature()))
+            }
+            // 绘制带环多边形
+            const polygon = new AMap.Polygon({
+              bubble: true,
+              lineJoin: 'round',
+              strokeColor: '#030E25', // 线颜色
+              strokeOpacity: 1, // 线透明度
+              strokeWeight: 1, // 线宽
+              fillColor: '#030E25', // 填充色
+              fillOpacity: 1, // 填充透明度
+              map,
+              path
+            })
           })
         })
-      })
 
-      this.Maps = map
-      this.AMaps = AMap
+        this.Maps = map
+        this.AMaps = AMap
+        resolve()
+      }).catch((er) => reject(er))
     })
   }
 
   // 初始化marks集合
-  public _initMarks(key: string, checked: number[]) {
+  public _initMarks(key: string, checked: string[], item?: any) {
     this.key = key
     this.marks[key] = {}
     for (let k = 0; k < checked.length; k++) {
       const el = checked[k]
+      const icon = item.option.find((er: { value: string }) => er.value === el)?.icon
+      const newIcon = this.getIcon(icon)
       if (!this.marks[key][el]) this.marks[key][el] = {}
+      if (key === 'homePage' && el !== 'bus') {
+        // homePageMark
+        this.getMarkData(el).then((res) => {
+          // line 需要单独处理
+          if (!res.length) return
+          if (el === 'line') {
+            for (let j = 0; j < res.length; j++) {
+              const es = res[j]
+              console.log('线还需要不同的Id')
+
+              // 区分上下行
+              // const upLinePaths = es.child.filter((ed: { direction: number }) => ed.direction === 1).sort((a: { stationNo: number }, b: { stationNo: number }) => a.stationNo - b.stationNo).map((ec: { lon: string; lat: string }) => ([ +ec.lon, +ec.lat ]))
+              // const downLinePaths = es.child.filter((ed: { direction: number }) => ed.direction === 2).sort((a: { stationNo: number }, b: { stationNo: number }) => a.stationNo - b.stationNo).map((ec: { lon: string; lat: string }) => ([ +ec.lon, +ec.lat ]))
+              // console.log('上行', upLinePaths)
+              // console.log('下行', downLinePaths)
+              // const color = this.colorRandom()
+              // this.marks[this.key][el][es.paramId] = { markMap: this.addLine(upLinePaths, color) }
+              // this.marks[this.key][el][es.paramId] = { markMap: this.addLine(downLinePaths, color) }
+            }
+          } else {
+            for (let z = 0; z < res.length; z++) {
+              const ez = res[z]
+              this.marks[this.key][el][ez.paramId] = { ...ez, markMap: this.addMark([ +ez.lon, +ez.lat ], newIcon) }
+            }
+          }
+        })
+      }
     }
   }
 
-  // 所有路线
-  public async getLines() {
-    const { data } = await this.netService.get('/busLine/getList')
-    if (data && data.length) {
-      for (let k = 0; k < data.length; k++) {
-        const el = data[k]
-        const { modeStationsList } = el.lineModeList[el.lineModeList.length - 1]
-        const paths = modeStationsList?.map((es: { longitude: string; latitude: string }) => ([ +es.longitude, +es.latitude ]))
-        const color = this.colorRandom()
-        this.marks[this.key][3][el.lid] = { markMap: this.addLine(paths, color) }
-      }
-    }
+  // 获取标点数据
+  async getMarkData(type: string) {
+    // line 线路 station 中途站点 maintenanceStation维修站 powerCharge充电桩 busStation场站
+    const { data } = await this.netService.get(`/busLine/getMapElement?typeList=${type}`)
+    return data || []
+  }
+
+  // 动态图标
+  getIcon(imgName:string) {
+    const url = new URL(`../../assets/img/${imgName}.svg`, import.meta.url).href
+    return url
   }
 
   public destory() {

src/components/map/map.vue

@@ -46,7 +46,7 @@ const store = useStore()
 const mapService = new MapService()
 const props = withDefaults(defineProps<{
   zoom?: number,
-  Item?: { contrlSelect: { title: string, option: Any[], icon: string, checked:number[] }, key:string }
+  Item?: { contrlSelect: { title: string, option: Any[], icon: string, checked:string[] }, key:string }
 }>(), {
   zoom: 13,
   Item: () => ({
@@ -61,7 +61,7 @@ const emit = defineEmits<{(evt: 'update:contrlSelect', value: Any): void
 const checkBoxs = ref(props.Item.contrlSelect.checked)
 
 // checkBox勾选
-function checkBoxsChange(params:number[], mate:{actionType:string, value:number}) {
+function checkBoxsChange(params:string[], mate:{actionType:string, value:string}) {
   const { marks } = mapService
   console.log('勾选', marks[props.Item.key][mate.value])
   if (!Object.keys(marks[props.Item.key][mate.value]).length) return
@@ -76,29 +76,28 @@ function checkBoxsChange(params:number[], mate:{actionType:string, value:number}
   }
 }
 
-onMounted(() => {
-  mapService._initMap(props.zoom)
-  if (props.Item.key === 'homePage') mapService.getLines()
-  mapService._initMarks(props.Item.key, props.Item.contrlSelect.checked)
+onMounted(async () => {
+  await mapService._initMap(props.zoom)
+  mapService._initMarks(props.Item.key, props.Item.contrlSelect.checked, props.Item.contrlSelect)
 })
 
 // 车位置更新
 watch(() => store.socektData, (v) => {
-  if (v && v.BUS_LINE_INFO && props.Item.key === 'homePage' && checkBoxs.value.includes(1)) {
+  if (v && v.BUS_LINE_INFO && props.Item.key === 'homePage' && checkBoxs.value.includes('bus')) {
     const { marks } = mapService
     for (let k = 0; k < v.BUS_LINE_INFO.length; k++) {
       const el = v.BUS_LINE_INFO[k]
       for (let j = 0; j < el.inboundAndOutboundStations.length; j++) {
         const es = el.inboundAndOutboundStations[j]
-        if (marks[props.Item.key][1][es.vehicleId]) {
+        if (marks[props.Item.key].bus[es.vehicleId]) {
           // 更新位置
-          console.log(123, marks[props.Item.key][1][es.vehicleId])
+          // console.log(123, marks[props.Item.key][1][es.vehicleId])
 
-          marks[props.Item.key][1][es.vehicleId].markMap.setPosition([ es.lng, es.lat ])
-          marks[props.Item.key][1][es.vehicleId].markMap.show()
+          marks[props.Item.key].bus[es.vehicleId].markMap?.setPosition([ es.lng, es.lat ])
+          marks[props.Item.key].bus[es.vehicleId].markMap?.show()
         } else {
           // 添加位置
-          marks[props.Item.key][1][es.vehicleId] = { ...es, markMap: mapService.addMark([ es.lng, es.lat ]) }
+          marks[props.Item.key].bus[es.vehicleId] = { ...es, markMap: mapService.addMark([ es.lng, es.lat ]) }
         }
       }
     }
@@ -107,7 +106,7 @@ watch(() => store.socektData, (v) => {
 
 // 菜单切换显示隐藏
 watch(() => props.Item.key, (v) => {
-  console.log('菜单切换', v)
+  console.log('菜单切换需要重新初始化mark', v)
   const { marks } = mapService
   for (const k in marks) {
     for (const j in marks[k]) {

src/pages/views/home/index.vue

@@ -50,36 +50,36 @@ const menus = [
       option: [
         {
           label: '车辆',
-          value: 1,
+          value: 'bus',
           icon: '39'
         },
         {
           label: '场站',
-          value: 2,
+          value: 'busStation',
           icon: '40'
         },
         {
           label: '线路',
-          value: 3,
+          value: 'line',
           icon: '41'
         },
         {
           label: '充电桩',
-          value: 4,
+          value: 'powerCharge',
           icon: '42'
         },
         {
           label: '维修站',
-          value: 5,
+          value: 'maintenanceStation',
           icon: '43'
         },
         {
           label: '中途站点',
-          value: 6,
+          value: 'station',
           icon: '44'
         }
       ],
-      checked: [ 1, 2, 3, 4, 5, 6 ]
+      checked: [ 'bus', 'busStation', 'line', 'powerCharge', 'maintenanceStation', 'station' ]
     }
   },
   {
@@ -157,7 +157,7 @@ const menus = [
       icon: '51',
       option: [
         {
-          label: '客流线路',
+          label: '线路客流量',
           value: 1,
           icon: ''
         },
@@ -165,11 +165,6 @@ const menus = [
           label: '客流热力图',
           value: 2,
           icon: ''
-        },
-        {
-          label: '站点客流气泡图',
-          value: 3,
-          icon: ''
         }
       ],
       checked: [ 1, 2, 3 ]