2025/04/14 周一 0:16:10.71
This commit is contained in:
parent
21ad901377
commit
5563ffb05c
@ -16,7 +16,7 @@
|
|||||||
}
|
}
|
||||||
}</style><script>var _hmt = _hmt || [];
|
}</style><script>var _hmt = _hmt || [];
|
||||||
var hmid = "33e0b6798fd8809c21ef51bc99e3149e";
|
var hmid = "33e0b6798fd8809c21ef51bc99e3149e";
|
||||||
(function () { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?" + hmid; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })();</script><script src="https://api.tianditu.gov.cn/api?v=4.0&tk=467c0b8aabd1f6a6012c7c2026ea8818"></script><script defer="defer" src="static/js/app.c6693715.js"></script><link href="static/css/app.b0a297a4.css" rel="stylesheet"></head><body><noscript><strong>Sorry django-vue-lyadmin (dvlyadmin_pro) doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><script>var dark = window.localStorage.getItem('siteTheme');
|
(function () { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?" + hmid; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })();</script><script src="https://api.tianditu.gov.cn/api?v=4.0&tk=467c0b8aabd1f6a6012c7c2026ea8818"></script><script defer="defer" src="static/js/app.b5dc8066.js"></script><link href="static/css/app.0dc6cd5d.css" rel="stylesheet"></head><body><noscript><strong>Sorry django-vue-lyadmin (dvlyadmin_pro) doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><script>var dark = window.localStorage.getItem('siteTheme');
|
||||||
if(dark && dark=="dark"){
|
if(dark && dark=="dark"){
|
||||||
document.documentElement.classList.add("dark")
|
document.documentElement.classList.add("dark")
|
||||||
}</script><div id="app" class="lyadmin"><div class="app-loading"><div class="app-loading__logo"><img src="static/img/logo.png"/></div><div class="app-loading__loader"></div><div class="app-loading__title">加载中</div></div></div></body></html>
|
}</script><div id="app" class="lyadmin"><div class="app-loading"><div class="app-loading__logo"><img src="static/img/logo.png"/></div><div class="app-loading__loader"></div><div class="app-loading__title">加载中</div></div></div></body></html>
|
||||||
2545
backend/frontend/static/css/app.0dc6cd5d.css
Normal file
2545
backend/frontend/static/css/app.0dc6cd5d.css
Normal file
File diff suppressed because one or more lines are too long
56529
backend/frontend/static/js/app.b5dc8066.js
Normal file
56529
backend/frontend/static/js/app.b5dc8066.js
Normal file
File diff suppressed because one or more lines are too long
138
backend/frontend/static/js/app.b5dc8066.js.LICENSE.txt
Normal file
138
backend/frontend/static/js/app.b5dc8066.js.LICENSE.txt
Normal file
@ -0,0 +1,138 @@
|
|||||||
|
/* NProgress, (c) 2013, 2014 Rico Sta. Cruz - http://ricostacruz.com/nprogress
|
||||||
|
* @license MIT */
|
||||||
|
|
||||||
|
/*!
|
||||||
|
|
||||||
|
JSZip v3.10.1 - A JavaScript class for generating and reading zip files
|
||||||
|
<http://stuartk.com/jszip>
|
||||||
|
|
||||||
|
(c) 2009-2016 Stuart Knightley <stuart [at] stuartk.com>
|
||||||
|
Dual licenced under the MIT license or GPLv3. See https://raw.github.com/Stuk/jszip/main/LICENSE.markdown.
|
||||||
|
|
||||||
|
JSZip uses the library pako released under the MIT license :
|
||||||
|
https://github.com/nodeca/pako/blob/main/LICENSE
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*!
|
||||||
|
* core-base v10.0.6
|
||||||
|
* (c) 2025 kazuya kawaguchi
|
||||||
|
* Released under the MIT License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*!
|
||||||
|
* shared v10.0.6
|
||||||
|
* (c) 2025 kazuya kawaguchi
|
||||||
|
* Released under the MIT License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*!
|
||||||
|
* vue-i18n v10.0.6
|
||||||
|
* (c) 2025 kazuya kawaguchi
|
||||||
|
* Released under the MIT License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*!
|
||||||
|
* vue-router v4.5.0
|
||||||
|
* (c) 2024 Eduardo San Martin Morote
|
||||||
|
* @license MIT
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*!
|
||||||
|
* clipboard.js v2.0.11
|
||||||
|
* https://clipboardjs.com/
|
||||||
|
*
|
||||||
|
* Licensed MIT © Zeno Rocha
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*!
|
||||||
|
* html2canvas 1.4.1 <https://html2canvas.hertzen.com>
|
||||||
|
* Copyright (c) 2022 Niklas von Hertzen <https://hertzen.com>
|
||||||
|
* Released under MIT License
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*!
|
||||||
|
* pinia v2.3.1
|
||||||
|
* (c) 2025 Eduardo San Martin Morote
|
||||||
|
* @license MIT
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*!
|
||||||
|
* VueCodemirror v6.1.1
|
||||||
|
* Copyright (c) Surmon. All rights reserved.
|
||||||
|
* Released under the MIT License.
|
||||||
|
* Surmon
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*! #__NO_SIDE_EFFECTS__ */
|
||||||
|
|
||||||
|
/*! *****************************************************************************
|
||||||
|
Copyright (c) Microsoft Corporation.
|
||||||
|
|
||||||
|
Permission to use, copy, modify, and/or distribute this software for any
|
||||||
|
purpose with or without fee is hereby granted.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
||||||
|
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
||||||
|
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
||||||
|
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
||||||
|
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
||||||
|
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
||||||
|
PERFORMANCE OF THIS SOFTWARE.
|
||||||
|
***************************************************************************** */
|
||||||
|
|
||||||
|
/*! *****************************************************************************
|
||||||
|
Copyright (c) Microsoft Corporation.
|
||||||
|
|
||||||
|
Permission to use, copy, modify, and/or distribute this software for any
|
||||||
|
purpose with or without fee is hereby granted.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
||||||
|
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
||||||
|
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
||||||
|
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
||||||
|
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
||||||
|
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
||||||
|
PERFORMANCE OF THIS SOFTWARE.
|
||||||
|
***************************************************************************** */
|
||||||
|
|
||||||
|
/*! Element Plus Icons Vue v2.3.1 */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Checks if an event is supported in the current execution environment.
|
||||||
|
*
|
||||||
|
* NOTE: This will not work correctly for non-generic events such as `change`,
|
||||||
|
* `reset`, `load`, `error`, and `select`.
|
||||||
|
*
|
||||||
|
* Borrows from Modernizr.
|
||||||
|
*
|
||||||
|
* @param {string} eventNameSuffix Event name, e.g. "click".
|
||||||
|
* @param {?boolean} capture Check if the capture phase is supported.
|
||||||
|
* @return {boolean} True if the event is supported.
|
||||||
|
* @internal
|
||||||
|
* @license Modernizr 3.0.0pre (Custom Build) | MIT
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @vue/runtime-core v3.5.13
|
||||||
|
* (c) 2018-present Yuxi (Evan) You and Vue contributors
|
||||||
|
* @license MIT
|
||||||
|
**/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @vue/runtime-dom v3.5.13
|
||||||
|
* (c) 2018-present Yuxi (Evan) You and Vue contributors
|
||||||
|
* @license MIT
|
||||||
|
**/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @vue/shared v3.5.13
|
||||||
|
* (c) 2018-present Yuxi (Evan) You and Vue contributors
|
||||||
|
* @license MIT
|
||||||
|
**/
|
||||||
|
|
||||||
|
/**!
|
||||||
|
* Sortable 1.15.6
|
||||||
|
* @author RubaXa <trash@rubaxa.org>
|
||||||
|
* @author owenm <owen23355@gmail.com>
|
||||||
|
* @license MIT
|
||||||
|
*/
|
||||||
@ -1,48 +1,250 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="map-container">
|
<div class="map-container">
|
||||||
<div id="map" style="width: 100%; height: 600px;"></div>
|
<div class="poi-list" v-show="poiList.length > 0">
|
||||||
|
<el-icon class="close-icon" @click="clearSearch"><Close /></el-icon>
|
||||||
|
<div class="poi-item" v-for="(item, index) in poiList" :key="index" @click="handlePoiClick(item)">
|
||||||
|
<div class="poi-name">{{ item.name }}</div>
|
||||||
|
<div class="poi-address">{{ item.address }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 搜索框和地图部分保持不变 -->
|
||||||
|
<div class="main-content">
|
||||||
|
<div class="search-box">
|
||||||
|
<el-input v-model="searchText" placeholder="请输入地点" class="search-input" @keyup.enter="handleSearch">
|
||||||
|
<template #append>
|
||||||
|
<el-button type="primary" @click="handleSearch">搜索</el-button>
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
|
<el-dropdown trigger="click">
|
||||||
|
<el-button class="tool-btn" type="primary">
|
||||||
|
工具
|
||||||
|
<el-icon class="el-icon--right"><arrow-down /></el-icon>
|
||||||
|
</el-button>
|
||||||
|
<template #dropdown>
|
||||||
|
<el-dropdown-menu>
|
||||||
|
<el-dropdown-item @click="startMeasure">开始测距</el-dropdown-item>
|
||||||
|
<el-dropdown-item @click="clearMeasure">清除测距</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</template>
|
||||||
|
</el-dropdown>
|
||||||
|
</div>
|
||||||
|
<div id="map" style="width: 100%; height: 600px;"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<h3>helloworld</h3>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { ref, onMounted } from 'vue'
|
import { ref, onMounted } from 'vue'
|
||||||
import axios from 'axios'
|
import { ElMessage } from 'element-plus'
|
||||||
|
import { Close } from '@element-plus/icons-vue' // 添加这行
|
||||||
|
import { ArrowDown } from '@element-plus/icons-vue' // 添加这行
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'MapView',
|
components: {
|
||||||
|
Close,
|
||||||
|
ArrowDown // 添加这个
|
||||||
|
},
|
||||||
setup() {
|
setup() {
|
||||||
|
const searchText = ref('白云路')
|
||||||
|
const map = ref(null)
|
||||||
|
const poiList = ref([]) // 添加POI列表
|
||||||
|
|
||||||
|
// 添加POI点击处理函数
|
||||||
|
const handlePoiClick = (poi) => {
|
||||||
|
const [lng, lat] = poi.lonlat.split(',')
|
||||||
|
const lnglat = new T.LngLat(parseFloat(lng), parseFloat(lat))
|
||||||
|
|
||||||
|
map.value.centerAndZoom(lnglat, 15)
|
||||||
|
map.value.clearOverLays()
|
||||||
|
const marker = new T.Marker(lnglat)
|
||||||
|
map.value.addOverLay(marker)
|
||||||
|
|
||||||
|
const infoContent = `
|
||||||
|
<div>
|
||||||
|
<h4>${poi.name}</h4>
|
||||||
|
<p>${poi.address}</p>
|
||||||
|
${poi.phone ? `<p>电话：${poi.phone}</p>` : ''}
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
const infoWin = new T.InfoWindow(infoContent)
|
||||||
|
marker.addEventListener("click", function () {
|
||||||
|
marker.openInfoWindow(infoWin)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSearch = () => {
|
||||||
|
if (!searchText.value) return
|
||||||
|
const searchService = new T.LocalSearch(map.value, {
|
||||||
|
pageCapacity: 10, // 增加返回数量
|
||||||
|
onSearchComplete: function(result) {
|
||||||
|
if (result && result.pois && result.pois.length > 0) {
|
||||||
|
poiList.value = result.pois // 保存搜索结果到列表
|
||||||
|
handlePoiClick(result.pois[0]) // 默认显示第一个结果
|
||||||
|
} else {
|
||||||
|
ElMessage.warning('未找到相关地点')
|
||||||
|
poiList.value = []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
searchService.search(searchText.value + ',南宁市')
|
||||||
|
}
|
||||||
|
|
||||||
const initMap = () => {
|
const initMap = () => {
|
||||||
// 创建天地图
|
map.value = new T.Map('map')
|
||||||
const map = new T.Map('map')
|
map.value.centerAndZoom(new T.LngLat(108.320004, 22.82402), 12)
|
||||||
// 设置显示地图的中心点和级别
|
// map.value.addControl(new T.Control.Zoom())
|
||||||
map.centerAndZoom(new T.LngLat(116.397428, 39.90923), 11)
|
// map.value.addControl(new T.Control.Scale())
|
||||||
|
map.value.addControl(new T.Control.MapType())
|
||||||
// 添加地图控件
|
|
||||||
map.addControl(new T.Control.Zoom()) // 缩放控件
|
|
||||||
map.addControl(new T.Control.Scale()) // 比例尺控件
|
|
||||||
map.addControl(new T.Control.MapType()) // 地图类型控件
|
|
||||||
|
|
||||||
// 切换到卫星影像
|
|
||||||
// map.setMapType(TMAP_HYBRID_MAP)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
// 确保地图 API 加载完成
|
|
||||||
if (window.T) {
|
if (window.T) {
|
||||||
initMap()
|
initMap()
|
||||||
} else {
|
} else {
|
||||||
console.error('天地图 API 未加载')
|
console.error('天地图 API 未加载')
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const clearSearch = () => {
|
||||||
|
poiList.value = []
|
||||||
|
map.value.clearOverLays()
|
||||||
|
}
|
||||||
|
|
||||||
|
const isMeasuring = ref(false)
|
||||||
|
const lineTool = ref(null)
|
||||||
|
|
||||||
|
const startMeasure = () => {
|
||||||
|
lineTool.value = new T.PolylineTool(map.value, {
|
||||||
|
showLabel: true,
|
||||||
|
color: "#FF0000", // 修改为大红色
|
||||||
|
weight: 3,
|
||||||
|
opacity: 1
|
||||||
|
});
|
||||||
|
lineTool.value.open();
|
||||||
|
}
|
||||||
|
|
||||||
|
const clearMeasure = () => {
|
||||||
|
if (lineTool.value) {
|
||||||
|
lineTool.value.clear(); // 清除测距线
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
searchText,
|
||||||
|
handleSearch,
|
||||||
|
poiList,
|
||||||
|
handlePoiClick,
|
||||||
|
clearSearch,
|
||||||
|
startMeasure, // 修改这里
|
||||||
|
clearMeasure // 修改这里
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.map-container {
|
.map-container {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.poi-list {
|
||||||
|
width: 300px;
|
||||||
|
height: 270px;
|
||||||
|
overflow-y: auto;
|
||||||
|
border-right: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
|
background: rgba(255, 255, 255, 0.7);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
-webkit-backdrop-filter: blur(10px);
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
|
||||||
|
position: absolute;
|
||||||
|
left: 10px;
|
||||||
|
top: 10px;
|
||||||
|
z-index: 1000;
|
||||||
|
padding: 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.poi-item {
|
||||||
|
padding: 8px 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.poi-item:hover, .poi-item.active {
|
||||||
|
background: #409EFF;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.poi-item:hover .poi-address, .poi-item.active .poi-address {
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.poi-name {
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.poi-address {
|
||||||
|
font-size: 11px;
|
||||||
|
color: #666;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: relative;
|
}
|
||||||
|
|
||||||
|
.search-box {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
z-index: 1000;
|
||||||
|
width: 600px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-icon {
|
||||||
|
position: absolute;
|
||||||
|
top: 8px;
|
||||||
|
right: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #666;
|
||||||
|
font-size: 16px;
|
||||||
|
padding: 4px;
|
||||||
|
transition: all 0.2s;
|
||||||
|
z-index: 1001;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-icon:hover {
|
||||||
|
color: #409EFF;
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-box :deep(.el-button--primary) {
|
||||||
|
--el-button-bg-color: #409EFF;
|
||||||
|
--el-button-border-color: #409EFF;
|
||||||
|
--el-button-hover-bg-color: #79bbff;
|
||||||
|
--el-button-hover-border-color: #79bbff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-btn {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-box {
|
||||||
|
width: 400px; /* 调整宽度 */
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
x
Reference in New Issue
Block a user