From a3e098d21e52174130fa3f8bad8ae7e64d96bc8c Mon Sep 17 00:00:00 2001
From: chenchen <2782712869@qq.com>
Date: Sat, 21 Dec 2024 14:19:22 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E5=9C=B0=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../screen/components/gisMapOfCounty.vue | 92 ++++-----
src/views/screen/county-screen.vue | 23 ++-
src/views/screen/global-travel.vue | 185 +++++++-----------
3 files changed, 130 insertions(+), 170 deletions(-)
diff --git a/src/views/screen/components/gisMapOfCounty.vue b/src/views/screen/components/gisMapOfCounty.vue
index 205f60f..f8c6d0f 100644
--- a/src/views/screen/components/gisMapOfCounty.vue
+++ b/src/views/screen/components/gisMapOfCounty.vue
@@ -279,92 +279,86 @@ export default {
// 使用 require 加载 GeoJSON 文件
const geojsonData = require('@/assets/geojson/town_boundaries.geojson');
- const colors = ['#33FFD450'];
+ const colors = ['#33FFD450']; // 定义多边形边界颜色
- // 提取所有边界坐标
- const boundaries = geojsonData.features.map((feature) => {
- const coordinates = feature.geometry.coordinates[0]; // 假设是 Polygon 类型
- return coordinates[0].map((coord) => new AMap.LngLat(coord[0], coord[1])); // 转换为 AMap 坐标
- });
-
- // this.map.setMask(boundaries);
-
- // 添加标签
+ // 遍历 GeoJSON 数据
geojsonData.features.forEach((feature, index) => {
const { properties, geometry } = feature;
const name = properties.name; // 获取乡镇名称
const coordinates = geometry.coordinates[0]; // 获取多边形的坐标
- const center = this.getPolygonCenter(coordinates); // 获取多边形的中心点
+ const center = this.getPolygonCenter(coordinates); // 计算多边形的中心点
console.log('多边形中心点:', center);
- const path = coordinates[0].map((coord) => new AMap.LngLat(coord[0], coord[1]));
- path.push(path[0]); // 闭合路径
-
// 创建多边形并设置样式
const polygon = new AMap.Polygon({
zIndex: 100,
- // path: coordinates[0].map((coord) => new AMap.LngLat(coord[0], coord[1])), // 转换为 AMap 坐标
- path,
+ path: coordinates[0].map((coord) => new AMap.LngLat(coord[0], coord[1])), // 转换为 AMap 坐标
strokeColor: colors[index % colors.length], // 边界线颜色
- strokeWeight: 3, // 边界线宽度
+ strokeWeight: 2, // 边界线宽度
fillColor: '#0A7EA8', // 填充颜色
fillOpacity: 0.5, // 填充透明度
bubble: true, // 允许事件冒泡
});
- // 将多边形添加到地图
+ // 添加多边形到地图
polygon.setMap(this.map);
+ // 如果多边形有名称和中心点，则添加对应的 Marker
if (name && center) {
const labelMarker = new AMap.Marker({
position: center,
zIndex: 2000,
clickable: true,
content: `
-
- ${name}
-
- `,
+
+ ${name}
+
+ `,
offset: new AMap.Pixel(-25, -25), // 调整文本位置
});
- // labelMarker的hover改变样式，高亮
+
+ // 添加 hover 高亮事件
labelMarker.on('mouseover', () => {
labelMarker.setContent(`
-
- ${name}
-
- `);
+
+ ${name}
+
+ `);
});
+
labelMarker.on('mouseout', () => {
labelMarker.setContent(`
-
- ${name}
-
- `);
+
+ ${name}
+
+ `);
});
- // 使用 labelMarker.on 绑定事件
+
+ // 点击事件
labelMarker.on('click', () => {
- console.log('点击:', name);
+ this.$emit('enterTown', name); // 触发事件
});
- this.map.add(labelMarker);
+
+ labelMarker.setMap(this.map);
}
});
},
+
// 添加点标记
addPoints() {
this.pointList.forEach((point) => {
diff --git a/src/views/screen/county-screen.vue b/src/views/screen/county-screen.vue
index f6f8048..ed46824 100644
--- a/src/views/screen/county-screen.vue
+++ b/src/views/screen/county-screen.vue
@@ -2,7 +2,19 @@
-
+
+
+
- ![]()
+
+
+
@@ -242,6 +256,7 @@