罗广辉
2026-04-24 648904d076ae6e17892b40675598b1c8dc474277
src/pages/map/index.vue
@@ -1,81 +1,99 @@
<!-- 地图 -->
<!--
 * @Author       : yuan
 * @Date         : 2025-12-03 14:20:57
 * @LastEditors  : yuan
 * @LastEditTime : 2025-12-20 16:49:02
 * @FilePath     : \src\pages\map\index.vue
 * @Description  :
 * Copyright 2025 OBKoro1, All Rights Reserved.
 * 2025-12-03 14:20:57
-->
<template>
  <!-- 地图容器 -->
  <view id="map" class="map" style="width: 100%; height: 80vh"></view>
  <view class="page-wrap">
    <WebViewPlus :src="`${viewUrl}`" @webMessage="onPostMessage" />
  </view>
</template>
<script setup>
onShow(() => {
  // #ifdef APP-PLUS
import { getWebViewUrl } from "@/utils/index.js";
import WebViewPlus from "@/components/WebViewPlus.vue";
import { onHide, onShow } from "@dcloudio/uni-app";
// const viewUrl = getWebViewUrl("/defaultMap");
  // plus.screen.lockOrientation("landscape-primary");
let envParam = "";
// #ifdef WEB
envParam = "true";
// #endif
// #ifdef APP-PLUS
envParam = "false";
// #endif
const updateKey = ref(0);
const viewUrl = computed(() => {
  return getWebViewUrl("/defaultMap", {
    isWeb: envParam,
    updateKey: updateKey.value,
  });
});
const onPostMessage = (data) => {
  // #ifdef MP-WEIXIN
  if (data.type === "scanCode") {
  } else if (data.type === "jumpAddWork") {
  } else if (data.type === "jumpMapNav") {
    //事件导航
  } else if (data.type === "workid") {
    //事件详情
  }
  // #endif
  // #ifndef MP-WEIXIN
  if (data.type === "scanCode") {
    uni.navigateTo({
      url: "/subPackages/qrCode/index",
    });
  } else if (data.type === "jumpAddWork") {
    //新建任务
    const encodedData = encodeURIComponent(JSON.stringify(data.rowItem));
    uni.setStorageSync("webview_params", encodedData);
    uni.navigateTo({
      url: `/subPackages/taskDetail/addTask/index`,
    });
  } else if (data.type === "jumpMapNav") {
    //事件导航
    uni.navigateTo({
      url: `/subPackages/workDetail/mapWork/index?currentItem=${data.eventNum}`,
    });
  } else if (data.type === "workid") {
    //事件详情
    uni.navigateTo({
      url: `/subPackages/workDetail/index?eventNum=${data.eventNum}`,
    });
  }
  // #endif
};
onShow(() => {
  // #ifndef MP-WEIXIN
  uni.setTabBarItem({
    index: 2, // Tab 的索引(从0开始)
    visible: false,
    pagePath: "subPackages/taskDetail/addTask/index",
  });
  uni.setTabBarItem({
    index: 3, // Tab
    visible: true,
  });
  // #endif
});
onHide(() => {
  // #ifdef APP-PLUS
  // plus.screen.lockOrientation("portrait-primary");
  // #endif
  updateKey.value = updateKey.value + 1;
});
</script>
<script module="leaflet" lang="renderjs">
import L from 'leaflet'
import {
  onBeforeUnmount,
  onMounted
} from 'vue';
export default {
  mounted() {
    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,
        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,
        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,
        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,
        minZoom: 1,
        tileSize: 256,
        zoomOffset: 1
      });
    var basemap0 = L.layerGroup([basemapLayer0, basemapLayer1]);
    var basemap1 = L.layerGroup([basemapLayer2, basemapLayer3]);
    let map = L.map('map', {
      preferCanvas: true,
      crs: L.CRS.EPSG4326,
      layers: [basemap1],
      zoomControl: false,
      attributionControl: false,
      doubleClickZoom: false,
      editable: true //绘制控件
    }).setView([25.992338, 114.823254], 13);
  }
}
</script>
<style scoped>
/* Leaflet 默认容器要有高度 */
.map {
  width: 100%;
  height: 100%;
<style scoped lang="scss">
.page-wrap {
  font-size: 20px;
}
</style>