cxxm/ruoyi-ui/src/components/Map/index.vue

<template>
  <div class="container" style="position: relative;height:  100%">
    <div id="lonlatMap" style="width:100%; height: 100%;position: absolute;z-index: 1"></div>
<!--    <div id="lonlatMap1" style="width:100%; height: 50%;position: absolute;top: 0;z-index: 1"></div>-->
<!--    <div id="lonlatMap2" style=" width:100%; height: 50%;position: absolute;bottom: 0;z-index: 1"></div>-->
<!--    <div-->
<!--      style="position: absolute;left:10px;top: 10px;z-index: 2;background:rgba(255,255,255,0.6);border-radius: 5px;overflow: hidden">-->
<!--      <div class="map-lj">-->
<!--        <el-select style="width:120px" v-model="year" placeholder="历史影像" clearable @change="ynHis">-->
<!--          <el-option-->
<!--            v-for="(item,index) in getYearList(2018)"-->
<!--            :key="item"-->
<!--            :label="item"-->
<!--            :value="item"-->
<!--          />-->
<!--        </el-select>-->
<!--      </div>-->
<!--    </div>-->
    <div
      style="position: absolute;right:10px;top: 10px;z-index: 2;background:rgba(255,255,255,0.6);border-radius: 5px;overflow: hidden">
      <div class="map-gj" @click="onLineTool">测距</div>
      <div class="map-gj" @click="onPolygonTool">测面</div>
      <div class="map-gj" @click="clerOver">清除</div>
    </div>
  </div>
</template>

<script>
var zoom = 18
export default {
  components: {},
  name: 'info',
  data() {
    return {
      year: null,
      map: null,
      map1: null,
      map2: null,
      map1Style: "width:100%; height: 100%;position: absolute;top: 0;z-index: 1",
      infoData: {
        x: "101.51821267418167",
        y: "25.053135818719412",
        dkh: "",
        tbbh: ""
      },
      recordData: {},
      lineTool: null,//测距
      polygonTool: null,//侧面
    }
  },
  props: ['value', 'files'],
  watch: {
    value: {
      handler: function (newValue, oldValue) {
        if (newValue) {
          console.log(newValue, '-加载数据到 低于-')
          this.infoData = newValue;
          this.updateMap(); // 更新地图
        }
      },
      immediate: true,
      deep: true // 为true，表示深度监听，这时候就能监测到a值变化
    },
    files: {
      handler: function (newValue, oldValue) {
        if (newValue) {
          console.log(newValue, '-加载巡查情况到地图-')
          var thef = this
          setTimeout(() => {
            thef.map_set_images(newValue);
          }, 500)
        }
      },
      immediate: true,
      deep: true // 为true，表示深度监听，这时候就能监测到a值变化
    }
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.initMap()

      }, 300)
      setTimeout(() => {
        this.setMap()
      }, 500)
    })
  },
  methods: {
    getYearList(startYear) {
      startYear = startYear || 2018;
      const currentYear = new Date().getFullYear();
      const yearList = [];
      for (let year = startYear; year < currentYear; year++) {
        yearList.push(year);
      }
      return yearList;
    },
    onLineTool() {
      var config = {
        showLabel: true
      };
      //创建标注工具对象
      this.lineTool = new T.PolylineTool(this.map, config);
      this.lineTool.open()
    },
    onPolygonTool() {
      var config = {
        showLabel: true,
        color: "blue", weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5
      };
      //创建标注工具对象
      this.polygonTool = new T.PolygonTool(this.map, config);
      this.polygonTool.open()
    },
    clerOver() {

      var OverLay = this.map.getOverlays()
      // console.log(OverLay)
      if (OverLay && OverLay.length > 0) {
        OverLay.forEach((item, index) => {
          if (!item.id) {
            this.map.removeOverLay(item)
          }
        })
      }
    },
    clerImages() {
      var OverLay = this.map.getOverlays()
      // console.log(OverLay)
      if (OverLay && OverLay.length > 0) {
        OverLay.forEach((item) => {
          if (item.id === "map_images") {
            this.map.removeOverLay(item)
          }
        })
      }
    },
    initMap() {
      return new Promise((resolve, reject) => {
        // 如果已加载直接返回
        if (window.T) {
          console.log('地图脚本初始化成功...')
          resolve(window.T)
          reject('error')
        }
      })
    },
    ynHis() {
      if (!this.year) {
        this.$tab.refreshPage();
        return
      }
      if (!this.map1 || !this.map2) {
        this.setMap1();
        this.setMap2();
      }
      this.map2.clearLayers();
      // 加载wms图层
      var wmsLayer = new window.T.TileLayer.WMS(`https://maps1.ynmap.cn/tileServer/service/maps/ynHisC${this.year}/4490/wmts/tile/default/{z}/{y}/{x}?key=a85072d90b804b34afcb7c7d6422fcb3`);
      this.map2.addLayer(wmsLayer)
    },
    setMap() {
      this.map = new window.T.Map('lonlatMap', {projection: 'EPSG:4326'});
      this.map.setMapType(window.TMAP_HYBRID_MAP); //此地图类型展示卫星和路网的混合视图。

      // console.log(this.infoData)
      var LngLat = new window.T.LngLat(Number(this.infoData.x), Number(this.infoData.y))
      this.map.centerAndZoom(
        LngLat,
        zoom,
      );
      //创建比例尺控件对象
      var scale = new window.T.Control.Scale();
      //添加比例尺控件
      this.map.addControl(scale);
      this.addmark()
      this.setMapPolers()
    },
    setMap1() {
      this.map1 = new window.T.Map('lonlatMap1', {projection: 'EPSG:4326'});
      this.map1.setMapType(window.TMAP_HYBRID_MAP); //此地图类型展示卫星和路网的混合视图。
      // console.log(this.infoData)
      var LngLat = new window.T.LngLat(Number(this.infoData.x), Number(this.infoData.y))
      this.map1.centerAndZoom(
        LngLat,
        zoom,
      );
      //创建比例尺控件对象
      var scale = new window.T.Control.Scale();
      //添加比例尺控件
      this.map1.addControl(scale);
      this.addmarkToHisMap(this.map1);
      this.setMapPolersToHisMap(this.map1);
      // 添加事件监听
      this.map1.on('moveend', (event) => {
        console.log("moveend")
        var zoom = this.map1.getZoom();
        var lng = this.map1.getCenter().getLng()
        var lat = this.map1.getCenter().getLat()
        console.log('地图中心点', lng, lat, zoom)
        // 事件触发时，会将点击的地理位置的经纬度信息打印出来
        this.changeToTarget(this.map1, this.map2);
      });
    },
    changeToTarget(map, target) {
      var zoom = map.getZoom();
      var lng = map.getCenter().getLng()
      var lat = map.getCenter().getLat()
      console.log('地图中心点', lng, lat, zoom)
      target.centerAndZoom(new T.LngLat(lng, lat), zoom);
    },
    setMap2() {
      this.map2 = new window.T.Map('lonlatMap2', {projection: 'EPSG:4326'});
      this.map2.setMapType(window.TMAP_HYBRID_MAP); //此地图类型展示卫星和路网的混合视图。
      // console.log(this.infoData)
      var LngLat = new window.T.LngLat(Number(this.infoData.x), Number(this.infoData.y))
      this.map2.centerAndZoom(
        LngLat,
        zoom,
      );
      //创建比例尺控件对象
      var scale = new window.T.Control.Scale();
      //添加比例尺控件
      this.map2.addControl(scale);
      this.addmarkToHisMap(this.map2);
      this.setMapPolersToHisMap(this.map2);
      // 禁止
      this.map2.disableDrag();
      this.map2.disableScrollWheelZoom();
    },
    setMarkMap() {
      console.log('多个标注')
    },
    addmark() {
      var marker = new window.T.Marker(new window.T.LngLat(Number(this.infoData.x), Number(this.infoData.y)));// 创建标注
      this.map.addOverLay(marker); // 将标注添加到地图中
      marker.id = "marker_map"
      var label = new window.T.Label({
        text: "<b style='background:#fff;padding: 10px;'>" + (this.infoData.dkh || this.infoData.tbbh) + "<b>",
        position: marker.getLngLat(),
        offset: new T.Point(3, -30)
      });
      this.map.addOverLay(label);
      label.id = "label_map"
      marker.addEventListener("drag", function (e) {
        label.setLngLat(marker.getLngLat());
      })
    },
    addmarkToHisMap(map) {
      var marker = new window.T.Marker(new window.T.LngLat(Number(this.infoData.x), Number(this.infoData.y)));// 创建标注
      map.addOverLay(marker); // 将标注添加到地图中
      marker.id = "marker_map"
      var label = new window.T.Label({
        text: "<b style='background:#fff;padding: 10px;'>" + (this.infoData.dkh || this.infoData.tbbh) + "<b>",
        position: marker.getLngLat(),
        offset: new T.Point(3, -30)
      });
      map.addOverLay(label);
      label.id = "label_map"
      marker.addEventListener("drag", function (e) {
        label.setLngLat(marker.getLngLat());
      })
    },
    map_set_images(images) {
      this.clerImages();
      if (!images) {
        return
      }
      var info = this.infoData
      // var imageURL = "https://img0.baidu.com/it/u=2833047327,3565178077&fm=253&fmt=auto&app=138&f=JPEG?w=260&h=260"
      var imageURL = require("@/assets/images/fx.png")
      var mapPointsList = []
      mapPointsList.push(new window.T.LngLat(Number(info.x), Number(info.y)))

      images.map((item, index) => {
        item.x = item.jd;
        item.y = item.wd;
        if (item.x && item.y) {
          var newindex = Number(index) + 1
          mapPointsList.push(new window.T.LngLat(Number(item.x), Number(item.y)))
          item.x = Number(item.x)
          item.y = Number(item.y)
          var deg = Number(item.psfx)
          var optdiv = '<div style="position: relative;display: contents; width: 50px;height: 50px;overflow: hidden;">' +
            '<b style="display: block;  font-size: 15px;background: #007aff;border-radius: 100px;' +
            'width: 20px;' +
            'margin: 15px;' +
            'height: 20px;opacity: 0.4;' +
            'position: relative;' +
            'text-align: center;' +
            'left: -10px;line-height: 1.5;' +
            'color: white;">' + newindex + '</b>' +
            '<img  src="' + imageURL + '" style="position: absolute; opacity: 0.5;z-index: -1;top: 0px; left: 0px;width: 50px;height: 50px; transform: rotate(' + deg + 'deg);"alt="">' +
            '</div>'
          var map_images = new window.T.Label({
            text: optdiv,
            position: new window.T.LngLat(item.x, item.y),
            offset: new T.Point(-25, -25),
            images: imageURL
          });

          this.map.addOverLay(map_images);
          map_images.id = "map_images"

          // item.show = false时删除覆盖物
          if (item.show === false) {
            this.map.removeOverLay(map_images)
          }

        }
      })

      var centerPoint = this.map.getViewport(mapPointsList)

      if (centerPoint !== undefined) {
        // //中心点给到地图
        this.map.centerAndZoom(
          centerPoint.center,
          centerPoint.zoom,
        );
      }
    },
    setMapPolers() {
      var opts = JSON.parse(this.infoData.gis)
      if (opts.type == 'Polygon') {
        var coordinates = opts.coordinates
        for (var k in coordinates) {
          var points = []
          for (var i in coordinates[k]) {
            if (coordinates[k][i][0] && coordinates[k][i][1]) {
              points.push(new window.T.LngLat(Number(coordinates[k][i][0]), Number(coordinates[k][i][1])))
            }
          }
          var polygon = new T.Polygon(points, {
            color: 'blue',
            weight: 3,
            opacity: 0.5,
            fillColor: '#FFFFFF',
            fillOpacity: 0.5
          })
          console.log(polygon, '--')
          //向地图上添加面
          this.map.addOverLay(polygon)
          polygon.id = "polygon" + k
        }
      }
    },
    setMapPolersToHisMap(map) {
      var opts = JSON.parse(this.infoData.gis)
      if (opts.type == 'Polygon') {
        var coordinates = opts.coordinates
        for (var k in coordinates) {
          var points = []
          for (var i in coordinates[k]) {
            if (coordinates[k][i][0] && coordinates[k][i][1]) {
              points.push(new window.T.LngLat(Number(coordinates[k][i][0]), Number(coordinates[k][i][1])))
            }
          }
          var polygon = new T.Polygon(points, {
            color: 'blue',
            weight: 3,
            opacity: 0.5,
            fillColor: '#FFFFFF',
            fillOpacity: 0.5
          })
          console.log(polygon, '--')
          //向地图上添加面
          map.addOverLay(polygon)
          polygon.id = "polygon" + k
        }
      }
    },
    updateMap() {
      this.clerOver();
      this.map.clearOverLays();
      this.setMap();
      this.addmark();
      this.setMapPolers();
    }
  }
}
</script>

<style>
.tdt-label {
  background: none !important;
  border: none !important;
  padding: 0;
  box-shadow: none !important;
}

.map-lj {
  padding: 5px 10px;
  border: 1px solid #999999;

}

.map-gj {
  padding: 5px 10px;
  border: 1px solid #999999;

}

.map-gj:last-child {
  border: none;
}
</style>