feat:首页地图相关调整

shuishen

2025-10-11 3fc27febccd04e2fcffbd2cdd16d2daafd0b3ca3

 src/pages/map/index.vue

@@ -5,6 +5,10 @@
    <view id="map" class="map" :prop="setSelectMapLayerKey" :location="location" :change:prop="leaflet.initLayer"
      :change:location="leaflet.setView"></view>

    <view class="weather-box">
      <up-icon customPrefix="xyicon" name="tuceng" size="24" color="#000"></up-icon>
    </view>

    <view class="layer-btn" @click="show = true">
      <up-icon customPrefix="xyicon" name="tuceng" size="24" color="#000"></up-icon>
    </view>
@@ -13,19 +17,44 @@
      <up-icon customPrefix="xyicon" name="dingwei" size="24" color="#000"></up-icon>
    </view>

    <u-input placeholder="搜索" border="surround" v-model="value" @change="change" color="#fff">
      <template #prefix>
        <view class="search-left-box">
          <u-icon color="#fff" name="arrow-left"></u-icon> 地址
        </view>
      </template>
    <drag-ele>
      <template #searchBox>
        <u-input placeholder="搜索" border="surround" v-model="value" @change="change" color="#fff">
          <template #prefix>
            <view class="search-left-box">
              <u-icon color="#fff" name="arrow-left"></u-icon>

      <template #suffix>
        <view class="search-right-box">
          <u-icon color="#fff" name="scan"></u-icon>
              <up-tooltip ref="addressTooltip" text="text5" color="#fff" bgColor="#333" popupBgColor="#333"
                triggerMode="click" :forcePosition="{right: '0px', top: '0px'}" direction="top">
                <template #trigger>
                  <up-button iconColor="transparent" color="transparent" :hairline="false" size="mini" :stop="false"
                    type="text">{{ searchModeTextType === 0 ? '地址' : '机巢'}}</up-button>
                </template>
                <template #content>
                  <view style="padding: 8rpx 0; text-align: right;">
                    <!-- 按钮1 -->
                    <up-button type="text" size="mini" @click="selectAddress"
                      style="margin: 4rpx 0; width: 100%; text-align: center;">{{ searchModeTextType === 0 ? '机巢' : '地址'}}</up-button>
                  </view>
                </template>
              </up-tooltip>
            </view>
          </template>

          <template #suffix>
            <view class="search-right-box">
              <u-icon color="#fff" name="scan" @click="scanCode"></u-icon>
            </view>
          </template>
        </u-input>

      </template>
      <template #content>
        <view class="search-content">

        </view>
      </template>
    </u-input>
    </drag-ele>

    <up-popup v-model:show="show">
      <view class="popup-container">
@@ -50,6 +79,7 @@
</template>

<script setup>
  import DragEle from './drag.vue'
  import {
    useMapStore
  } from "@/store/index.js"
@@ -68,6 +98,7 @@
    }
  ]

  const addressTooltip = ref(null)
  const show = ref(false)

  const value = ref('')
@@ -94,13 +125,48 @@
        console.log('定位失败：', err);
      }
    });

  }

  const searchModeTextType = ref(0)

  const selectAddress = () => {
    searchModeTextType.value = searchModeTextType.value === 0 ? 1 : 0
    addressTooltip.value.showTooltip = false
  }

  const scanCode = () => {
    // 只允许通过相机扫码
    uni.scanCode({
      onlyFromCamera: true,
      success: function(res) {
        console.log('条码类型：' + res.scanType);
        console.log('条码内容：' + res.result);

        // 获取扫码结果
        let url = res.result;

        // 跳转到B页面，并传递URL参数
        uni.navigateTo({
          url: '/subPackages/browser/index?url=' + encodeURIComponent(url)
        });
      },
      fail: function(err) {
        console.log('扫码失败：', err);
        uni.showToast({
          title: '扫码失败',
          icon: 'none'
        });
      }
    });
  }

  const createWorkOrder = (id) => {
    console.log(`创建工单：标注 ID 为 ${id}`);
    // 在这里添加工单创建逻辑
  }

  onShow(() => {
    // #ifdef APP-PLUS

    // plus.screen.lockOrientation("landscape-primary");
    // #endif
  });
@@ -117,28 +183,28 @@

  var basemapLayer0 = L.tileLayer(
    'http://t1.tianditu.com/vec_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=e110584a27d506da2740edca951683f4', {
      maxZoom: 18,
      maxZoom: 20,
      minZoom: 1,
      tileSize: 256,
      zoomOffset: 1
    });
  var basemapLayer1 = L.tileLayer(
    'http://t1.tianditu.com/cva_c/wmts?layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=e110584a27d506da2740edca951683f4', {
      maxZoom: 18,
      maxZoom: 20,
      minZoom: 1,
      tileSize: 256,
      zoomOffset: 1
    });
  var basemapLayer2 = L.tileLayer(
    'http://t1.tianditu.com/img_c/wmts?layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=e110584a27d506da2740edca951683f4', {
      maxZoom: 18,
      maxZoom: 20,
      minZoom: 1,
      tileSize: 256,
      zoomOffset: 1
    });
  var basemapLayer3 = L.tileLayer(
    'http://t1.tianditu.com/cia_c/wmts?layer=cia&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=e110584a27d506da2740edca951683f4', {
      maxZoom: 18,
      maxZoom: 20,
      minZoom: 1,
      tileSize: 256,
      zoomOffset: 1
@@ -165,7 +231,7 @@
  export default {
    data() {
      return {
        setSelectMapLayerKey: 1
        curSelectMapLayerKey: 1
      }
    },

@@ -175,6 +241,8 @@

    mounted() {
      this.initMap()

      this.initDronePositions()
    },

    methods: {
@@ -192,15 +260,14 @@
      },

      initLayer(value) {

        this.initMap()

        this.$nextTick(() => {
          map.removeLayer(layers.find(i => i.key === this.setSelectMapLayerKey).map);
          map.removeLayer(layers.find(i => i.key === this.curSelectMapLayerKey).map);

          map.addLayer(layers.find(i => i.key === value).map);

          this.setSelectMapLayerKey = value
          this.curSelectMapLayerKey = value
        })
      },

@@ -214,6 +281,97 @@
            animate: false // 使用动画过渡
          });
        })
      },

      // 初始化无人机位置
      initDronePositions() {
        // 假设你有一个包含多个标注位置的数组
        const markersData = [{
            lat: 25.992338,
            lng: 114.823254,
            id: 1
          },
          {
            lat: 26,
            lng: 114.823255,
            id: 2
          },
          {
            lat: 25.992338,
            lng: 115,
            id: 3
          },
        ];

        // 创建一个自定义的图片图标
        const customIcon = L.icon({
          iconUrl: './static/images/logo.png', // 替换为你的图片路径
          iconSize: [32, 32], // 图标大小
          iconAnchor: [16, 16], // 图标的锚点（设置图片的底部中心）
        });

        // 批量添加标注
        const markersLayer = L.layerGroup().addTo(map); // 创建一个标注层，便于管理和移除

        markersData.forEach((data) => {
          const marker = L.marker([data.lat, data.lng], {
            icon: customIcon
          }).addTo(markersLayer);

          marker.on('click', () => {
            marker.unbindPopup();

            const popupContent = `
              <view>
                <button data-type="addWork">创建工单</button>
              </view>
             `;

            marker.bindPopup(popupContent).openPopup();

            marker.getPopup()._contentNode.addEventListener("click", e => {
              if (e.target.dataset.type === 'addWork') {
                // 跳转到tabBar页面
                uni.switchTab({
                  url: '/pages/work/index', // 需要跳转的tabBar页面的路径
                });

                marker.closePopup();
                marker.unbindPopup();
              }
            })
          });

          // 使用 marker 的 id 作为标识符
          marker.options.id = data.id;
        });

        this.buildCirclePolygon(25.992338, 114.823254, 'rgba(255, 0, 0, 1)').addTo(map)
      },

      buildCirclePolygon(lat, lng, color) {
        var radius = 5000 / 100460; // 5000米转为大约的纬度差（纬度上的1度大约是111km）
        var parts = [];

        for (var i = 0; i < 360; i++) {
          var radians = (i + 1) * Math.PI / 180;

          // 计算新的点
          var circlePoint = [
            Math.cos(radians) * radius + lat, // 纬度偏移
            Math.sin(radians) * radius + lng // 经度偏移，需考虑纬度的影响
          ];

          parts[i] = circlePoint;
        }

        // 生成多边形，近似圆形
        var polygon = L.polygon(parts, {
          color: color
        });

        return polygon;

      }
    }
  }
@@ -226,12 +384,9 @@
    height: 100%;

    .u-input {
      position: absolute;
      left: 16rpx;
      bottom: 16rpx;
      margin-left: 16rpx;
      width: calc(100% - 32rpx);
      height: 64rpx;
      z-index: 999;
      box-sizing: border-box;
      background: rgba(0, 0, 0, .4);

@@ -246,6 +401,27 @@
      }
    }

    .search-content {
      width: 100%;
      height: 360rpx;
      background: #fff;
      box-shadow: 0 -80rpx 80rpx -80rpx #fff;
    }

    .weather-box {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 16rpx;
      left: 16rpx;
      width: 64rpx;
      height: 64rpx;
      background: #fff;
      z-index: 996;
      border-radius: 8rpx;
    }

    .location-btn,
    .layer-btn {
      display: flex;
@@ -256,16 +432,16 @@
      width: 64rpx;
      height: 64rpx;
      background: #fff;
      z-index: 999;
      z-index: 996;
      border-radius: 8rpx;
    }

    .layer-btn {
      bottom: 176rpx;
      bottom: 236rpx;
    }

    .location-btn {
      bottom: 96rpx;
      bottom: 156rpx;
    }
  }