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 || [];
|
||||
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"){
|
||||
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>
|
||||
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>
|
||||
<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>
|
||||
<h3>helloworld</h3>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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 {
|
||||
name: 'MapView',
|
||||
components: {
|
||||
Close,
|
||||
ArrowDown // 添加这个
|
||||
},
|
||||
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 map = new T.Map('map')
|
||||
// 设置显示地图的中心点和级别
|
||||
map.centerAndZoom(new T.LngLat(116.397428, 39.90923), 11)
|
||||
|
||||
// 添加地图控件
|
||||
map.addControl(new T.Control.Zoom()) // 缩放控件
|
||||
map.addControl(new T.Control.Scale()) // 比例尺控件
|
||||
map.addControl(new T.Control.MapType()) // 地图类型控件
|
||||
|
||||
// 切换到卫星影像
|
||||
// map.setMapType(TMAP_HYBRID_MAP)
|
||||
map.value = new T.Map('map')
|
||||
map.value.centerAndZoom(new T.LngLat(108.320004, 22.82402), 12)
|
||||
// map.value.addControl(new T.Control.Zoom())
|
||||
// map.value.addControl(new T.Control.Scale())
|
||||
map.value.addControl(new T.Control.MapType())
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// 确保地图 API 加载完成
|
||||
if (window.T) {
|
||||
initMap()
|
||||
} else {
|
||||
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>
|
||||
|
||||
<style scoped>
|
||||
.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%;
|
||||
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>
|
||||
Loading…
x
Reference in New Issue
Block a user