feat:提交代碼

chenyao

2025-10-17 4de4baa6eea8f80160f6cdc8a4ebd17c0c48f0ee

 src/pages/map/index.vue

@@ -1,81 +1,35 @@
<!-- 地图 -->
<!--
 * @Author       : yuan
 * @Date         : 2025-10-14 17:40:58
 * @LastEditors  : yuan
 * @LastEditTime : 2025-10-15 15:54:25
 * @FilePath     : \src\pages\map\index.vue
 * @Description  : 
 * Copyright 2025 OBKoro1, All Rights Reserved. 
 * 2025-10-14 17:40:58
-->
<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 { useUserStore } from "@/store/index.js";
import WebViewPlus from "@/components/WebViewPlus.vue";

  // plus.screen.lockOrientation("landscape-primary");
  // #endif
});
const userStore = useUserStore();
const viewUrl = `http://192.168.1.194:5174/drone-app-web-view/#/webViewWrapper/defaultMap?params=${JSON.stringify(
  userStore?.userInfo
)}`;

onHide(() => {
  // #ifdef APP-PLUS
  // plus.screen.lockOrientation("portrait-primary");
  // #endif
});
const onPostMessage = (event) => {};

onLoad(() => {});
</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>