罗广辉
2026-06-18 44dd9c4eb8a2489c63a5eb53fd4254bbb3510e95
src/pages/map/index.vue
@@ -1,81 +1,93 @@
<!-- 地图 -->
<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";
import {getUserInfo} from "@/api/user/index.js";
  // 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.switchTab({
      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(() => {
  // 验证一下有没有登录
  getUserInfo()
  // #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>