From be48495dcf8f70ec3b6c1ce03caee3e859d6d365 Mon Sep 17 00:00:00 2001 From: missum Date: Mon, 8 Jun 2026 09:37:20 +0800 Subject: [PATCH] feat: add map interaction and coordinate plotter tools, optimize dev config MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1. 新增图上量测与拾取、坐标展点两个地图工具页面 2. 安装leaflet依赖并配置vite开发服务器允许局域网访问 3. 更新首页工具列表，新增两个工具入口 4. 优化坐标转换器默认参数和文件读取方式 5. 调整面积计算精度，删除无用的HelloWorld组件 --- package-lock.json | 7 + package.json | 1 + src/components/AreaCalculator.vue | 10 +- src/components/CoordinateConverter.vue | 12 +- src/components/CoordinatePlotter.vue | 924 ++++++++++++++++++++++++ src/components/HelloWorld.vue | 43 -- src/components/MapInteraction.vue | 960 +++++++++++++++++++++++++ src/router.js | 12 + src/views/HomeView.vue | 12 + vite.config.js | 6 + 10 files changed, 1933 insertions(+), 54 deletions(-) create mode 100644 src/components/CoordinatePlotter.vue delete mode 100644 src/components/HelloWorld.vue create mode 100644 src/components/MapInteraction.vue diff --git a/package-lock.json b/package-lock.json index a70b025..230e66c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "@turf/turf": "^7.3.3", "gcoord": "^1.0.7", + "leaflet": "^1.9.4", "lucide-vue-next": "^0.563.0", "proj4": "^2.20.4", "vue": "^3.5.24", @@ -3354,6 +3355,12 @@ "integrity": "sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA==", "license": "ISC" }, + "node_modules/leaflet": { + "version": "1.9.4", + "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz", + "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==", + "license": "BSD-2-Clause" + }, "node_modules/lucide-vue-next": { "version": "0.563.0", "resolved": "https://registry.npmjs.org/lucide-vue-next/-/lucide-vue-next-0.563.0.tgz", diff --git a/package.json b/package.json index 7c3cce9..1b8f2ed 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "dependencies": { "@turf/turf": "^7.3.3", "gcoord": "^1.0.7", + "leaflet": "^1.9.4", "lucide-vue-next": "^0.563.0", "proj4": "^2.20.4", "vue": "^3.5.24", diff --git a/src/components/AreaCalculator.vue b/src/components/AreaCalculator.vue index 60ae36d..80c4e15 100644 --- a/src/components/AreaCalculator.vue +++ b/src/components/AreaCalculator.vue @@ -109,10 +109,10 @@ import * as turf from '@turf/turf' import { ChevronLeft, SquareStack, LayoutList, Trash2, Activity, Info } from 'lucide-vue-next' const points = ref([ - { lng: 108.5597255, lat: 22.8589543, x: 36557444.57, y: 2529026.75 }, - { lng: 108.5607409, lat: 22.8589507, x: 36557548.78, y: 2529026.75 }, - { lng: 108.5607373, lat: 22.8580860, x: 36557548.78, y: 2528930.99 }, - { lng: 108.5597220, lat: 22.8580896, x: 36557444.57, y: 2528930.99 } + { lng: 108.5597255, lat: 22.8589543, x: 36557444.5725, y: 2529026.7544 }, + { lng: 108.5607409, lat: 22.8589507, x: 36557548.7813, y: 2529026.7544 }, + { lng: 108.5607373, lat: 22.8580860, x: 36557548.7813, y: 2528930.9851 }, + { lng: 108.5597220, lat: 22.8580896, x: 36557444.5725, y: 2528930.9851 } ]) const coordType = ref('lnglat') @@ -217,7 +217,7 @@ const calculate = () => { const formatArea = (val) => { if (val >= 1000000) return (val / 1000000).toFixed(4) + ' km²' - return val.toFixed(2) + ' m²' + return val.toFixed(4) + ' m²' } const formatDistance = (val) => { diff --git a/src/components/CoordinateConverter.vue b/src/components/CoordinateConverter.vue index 6e40753..62b0fc2 100644 --- a/src/components/CoordinateConverter.vue +++ b/src/components/CoordinateConverter.vue @@ -276,11 +276,11 @@ const projConfig = ref({ direction: 'toPlane', // or 'toLngLat' zoneType: 3, // 3 or 6 withZone: true, - lng: 116.397451, - lat: 39.909235, - x: 39533966.82, // Easting (Y) - y: 4419519.82, // Northing (X) - manualZone: 39 + lng: 108.55972199, + lat: 22.85808956, + x: 36557444.5725, // Easting (Y) + y: 2528930.9851, // Northing (X) + manualZone: null }) const result = ref(null) @@ -532,7 +532,7 @@ const handleFileUpload = (e) => { alert('文件解析失败: ' + err.message) } } - reader.readAsBinaryString(file) + reader.readAsArrayBuffer(file) } diff --git a/src/components/CoordinatePlotter.vue b/src/components/CoordinatePlotter.vue new file mode 100644 index 0000000..3cab464 --- /dev/null +++ b/src/components/CoordinatePlotter.vue @@ -0,0 +1,924 @@ + + + + + diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue deleted file mode 100644 index 546ebbc..0000000 --- a/src/components/HelloWorld.vue +++ /dev/null @@ -1,43 +0,0 @@ - - - - - diff --git a/src/components/MapInteraction.vue b/src/components/MapInteraction.vue new file mode 100644 index 0000000..ecf0a2a --- /dev/null +++ b/src/components/MapInteraction.vue @@ -0,0 +1,960 @@ + + + + + diff --git a/src/router.js b/src/router.js index 602fa23..d336875 100644 --- a/src/router.js +++ b/src/router.js @@ -7,6 +7,8 @@ import AngleConverter from './components/AngleConverter.vue' import BearingCalculator from './components/BearingCalculator.vue' import ElevationCalculator from './components/ElevationCalculator.vue' import AmapSearchTool from './components/AmapSearchTool.vue' +import MapInteraction from './components/MapInteraction.vue' +import CoordinatePlotter from './components/CoordinatePlotter.vue' const routes = [ { @@ -48,6 +50,16 @@ const routes = [ path: '/amap-search', name: 'AmapSearch', component: AmapSearchTool + }, + { + path: '/map-interaction', + name: 'MapInteraction', + component: MapInteraction + }, + { + path: '/coordinate-plotter', + name: 'CoordinatePlotter', + component: CoordinatePlotter } ] diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index dcb5caa..8a6db17 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -60,6 +60,18 @@ const tools = ref([ icon: '🗺️', description: '通过高德API搜索POI，获取坐标并导出', path: '/amap-search' + }, + { + name: '图上量测与拾取', + icon: '🗺️', + description: '在地图上点选坐标、量测距离和面积，实时显示地理与投影坐标', + path: '/map-interaction' + }, + { + name: '坐标展点', + icon: '📍', + description: '将坐标批量展绘到地图上，支持手动输入、批量粘贴和Excel导入', + path: '/coordinate-plotter' } ]) diff --git a/vite.config.js b/vite.config.js index b3f57f8..0081b9e 100644 --- a/vite.config.js +++ b/vite.config.js @@ -4,5 +4,11 @@ import vue from '@vitejs/plugin-vue' // https://vite.dev/config/ export default defineConfig({ plugins: [vue()], + server: { + host: '0.0.0.0', // 允许局域网访问 + port: 5173, // 端口号，可自定义 + strictPort: false, // 端口被占用时自动尝试下一个 + open: false, // 启动时不自动打开浏览器 + }, base: '/geo-tools/', })