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

<template>
  <div className="" style="position: relative">
    <div id="lonlatMap" style=" width:100%; height: 100%;position: absolute;z-index: 1"></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">图层</div>-->
      <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 {
      map: null,
      infoData: {},
      recordData: {},
      lineTool: null,//测距
      polygonTool: null,//侧面
    }
  },
  props: ['value', 'files'],
  watch: {
    value: {
      handler: function (newValue, oldValue) {
        if (newValue) {
          console.log(newValue, '-加载数据到 低于-')
          this.infoData = newValue
        }
      },
      immediate: true,
      deep: true // 为true，表示深度监听，这时候就能监测到a值变化
    },
    files: {
      handler: function (newValue, oldValue) {
        if (newValue) {
          console.log(newValue, '-加载巡查情况到地图-')
          // this.recordData = newValue
          var thef = this
          setTimeout(() => {
            thef.map_set_images(newValue)
          }, 1500)
        }
      },
      immediate: true,
      deep: true // 为true，表示深度监听，这时候就能监测到a值变化
    }
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.initMap()

      }, 500)
      setTimeout(() => {
        this.setMap()
      }, 1500)
    })
  },
  methods: {
    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.map((item, index) => {
          if (!item.id) {
            this.map.removeOverLay(item)
          }
        })
      }
    },
    initMap() {
      return new Promise((resolve, reject) => {
        // 如果已加载直接返回
        if (window.T) {
          console.log('地图脚本初始化成功...')
          resolve(window.T)
          reject('error')
        }
      })
    },
    setMap() {
      this.map = new window.T.Map('lonlatMap');
      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()
    },
    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());
      })
    },
    map_set_images(images) {
      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.deg)
          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"


        }
      })

      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
        }
      }
    }
  }
}
</script>

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

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

}

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