digital-agric/src/views/map/Map.vue

<template>
  <div id="mapView">
    <iframe id="i_map" name="i_map" frameborder="0"></iframe>
  </div>
</template>

<script>
import CityGis from "../../utils/map/CityGis.Bridge";
import { myBridge } from "@/utils/map/map";
import { mapMapMutations } from "@/utils/store-map-unit";

let bridge
export {bridge}
export default {
  name: 'MyMap',
  mounted() {
    this.createMap()
  },
  methods: {
    ...mapMapMutations({
      changesearchAArr:'changesearchAArr',
    }),
    createMap() {
      this.$nextTick(() => {
        myBridge.bridgeContent =  bridge = new CityGis.Bridge({
          id: "i_map",
          url: "http://10.108.3.5:8089/map_widget/#/mapcmnw?theme=dark&view=2D",
          onReady: function () {
          },
        });
        bridge.addEventListener((arg) => {
          console.log(arg)
          switch (arg.action) {
            case "MapIsReady":
              this.addPointSearch()
              break
            case "ViewComplete":
              this.locateCM()
              break
            case "Calculation":
              this.$message({
                showClose: true,
                duration: 10000,
                message: '测量结果：'+arg.data.result,
              });
              break
            case 'MapClickResult':
              this.$emit('pointSearchRes', arg.data[0])
              break
            case "ReturnResult": {
              let arr  =(arg?.data?.data || []).map(i => ({
                ...i,
                name:i.zhutiname
              }))
              let realArr = []
              for (let i = 0; i < arr.length; i+1) {
                let findAllZt = arr.filter(i1 => i1.zhutiname === arr[i].zhutiname)
                realArr.push(arr[i])
                i = findAllZt.length
              }
              this['changesearchAArr'](realArr)
              break;
            }
              
          }
          
        })
      })
    },
    addPointSearch() {
      let action = {
        ActionName: "MapClickAll",
        Parameters: {
          "status": true,
          "is_draw": true,
          "is_code": false
        },
      }
      bridge.Invoke(action)
    },
    calcuLine(toolStatus) {
      let action = {}
      if (toolStatus) {
        action = {
          ActionName: "Calculation",
          Parameters: {
            type: "polyline"
          },
        }
      } else {
        action = {
          ActionName: "ClearMap",
          Parameters: {
            is_draw: true,
            is_search: false,
            is_position: false
          }
        }
      }
      bridge.Invoke(action)
    },
    calcuGon(toolStatus) {
      let action = {}
      if (toolStatus) {
        action = {
          ActionName: "Calculation",
          Parameters: {
            type: "polygon"
          },
        }
      } else {
        action = {
          ActionName: "ClearMap",
          Parameters: {
            is_draw: true,
            is_search: false,
            is_position: false
          }
        }
      }
      bridge.Invoke(action)
    },
    addLayer(layer,visible=true,opacity=1) {
      let type = 'feature'
      let token_type = ''
      if(layer.url.startsWith('http://10.121.226.95')) {
        type = 'shc_map'
        token_type = 'token_nw'
      } else if(layer.url.startsWith('http://smiserver.gtj.sh.cegn.cn')) {
        type = 'shc_map'
        token_type = 'token_smi'
      }
      if(layer.type) {
        type = layer.type
      }
      let params = {
        ActionName: "AddLayer",
        Parameters: {
          id: layer.id,
          title: layer.title,
          visible,
          opacity,
          url: layer.url,
          type,
          token_type
        },
      };
      if(layer.sublayers) {
        params.Parameters['sublayers'] = layer.sublayers
      }
      console.log('添加图层---',params)
      bridge.Invoke(params);
    },
    emptyAllLayers() {
      let action = {
        ActionName: "ClearMapLayers"
      }
      bridge.Invoke(action)
    },
    clearMap() {
      let action = {
        ActionName: "ClearMap",
        Parameters: {
          is_draw: true,
          is_search: true,
          is_position: true
        }
      }
      bridge.Invoke(action)
    },
    changeBaseMap(name) {
      let params = {
        ActionName: "ChangeBaseMap",
        Parameters: {
          "title": name,
          "opacity": 1
        },
      };
      bridge.Invoke(params);
    },
    locateCM() {
      const params32 = {
        "minx": -31227.356231616784,
        "miny": 19268.786635562752,
        "maxx": 47546.66798309832,
        "maxy": 75148.89839578628
      }
      const params16 = {
        "minx": -90405,
        "miny": -9789,
        "maxx": 109738,
        "maxy": 102790
      }
      const screenRatio = document.body.clientWidth / document.body.clientHeight
      let action = {
        ActionName: "SetExtent",
      };
      if(screenRatio>2) {
        action['Parameters'] = params32
      } else {
        action['Parameters'] = params16
      }
      bridge.Invoke(action);
    },
  }
}

</script>

<style lang="scss" scoped>
#mapView {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #235F61;
  z-index: 2;
}

#i_map {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}
</style>