|
|
|
@ -4,7 +4,12 @@ |
|
|
|
<slot name="content" class="content"></slot> |
|
|
|
<commonModal v-model="pointsState" width="800" title="聚合列表"> |
|
|
|
<div class="points"> |
|
|
|
<div class="item" v-for="(item, index) in points" :key="index" @click="getPoint(item.point)"> |
|
|
|
<div |
|
|
|
class="item" |
|
|
|
v-for="(item, index) in points" |
|
|
|
:key="index" |
|
|
|
@click="getPoint(item.point)" |
|
|
|
> |
|
|
|
{{ item.point[listItemKey] }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -92,7 +97,7 @@ export default { |
|
|
|
props: { |
|
|
|
center: { |
|
|
|
type: Array, |
|
|
|
default: () => [104.619853, 28.900000], |
|
|
|
default: () => [104.619853, 28.9], |
|
|
|
}, |
|
|
|
zoom: { |
|
|
|
type: Number, |
|
|
|
@ -180,9 +185,31 @@ export default { |
|
|
|
getTileUrl: (x, y, z) => |
|
|
|
`http://t0.tianditu.gov.cn/DataServer?T=img_w&tk=${this.common.mapKey}&x=${x}&y=${y}&l=${z}`, |
|
|
|
}); |
|
|
|
const district = new AMap.DistrictSearch({ |
|
|
|
subdistrict: 3, |
|
|
|
extensions: "all", |
|
|
|
level: "district", |
|
|
|
}); |
|
|
|
|
|
|
|
district.search(this.districtLocation, (status, result) => { |
|
|
|
const bounds = result.districtList[0].boundaries; |
|
|
|
const mask = bounds.map((bound) => [bound]); |
|
|
|
const polygons = bounds.map( |
|
|
|
(bound) => |
|
|
|
new AMap.Polygon({ |
|
|
|
strokeWeight: 1, |
|
|
|
path: bound, |
|
|
|
strokeColor: "#4dd6e6", // 边界线颜色 |
|
|
|
strokeWeight: 3, // 边界线宽度 |
|
|
|
fillColor: "#102C4F", // 填充颜色 |
|
|
|
fillOpacity: 0.5, // 填充透明度 |
|
|
|
}) |
|
|
|
); |
|
|
|
this.map = new AMap.Map("center-map", { |
|
|
|
layers: this.common.isSkyMap ? [imgLayer] : [new AMap.TileLayer.RoadNet()], |
|
|
|
mask, |
|
|
|
layers: this.common.isSkyMap |
|
|
|
? [imgLayer] |
|
|
|
: [new AMap.TileLayer.RoadNet()], |
|
|
|
zoom: this.zoom, |
|
|
|
zooms: [3, 16], |
|
|
|
scrollWheel: true, |
|
|
|
@ -192,36 +219,180 @@ export default { |
|
|
|
mapStyle: "amap://styles/darkblue", |
|
|
|
features: ["bg", "road", "building", "point"], |
|
|
|
}); |
|
|
|
|
|
|
|
this.map.add(polygons); |
|
|
|
this.map.on("complete", () => { |
|
|
|
// 加载翠屏区底图 |
|
|
|
// this.loadCuiPingDistrict(); |
|
|
|
// 乡镇区域加名字 |
|
|
|
this.loadTownName(); |
|
|
|
if (this.aggregationPoint) { |
|
|
|
this.aggregationPoint(this.pointList); |
|
|
|
} |
|
|
|
this.addPoints(); // 添加点标记 |
|
|
|
}); |
|
|
|
|
|
|
|
}); |
|
|
|
// 加载乡镇边界 GeoJSON |
|
|
|
this.loadGeoJSON(); |
|
|
|
|
|
|
|
// 加载翠屏区底图 |
|
|
|
this.loadCuiPingDistrict(); |
|
|
|
// this.loadGeoJSON(); |
|
|
|
|
|
|
|
// 添加地图点击事件 |
|
|
|
// this.map.on('click', this.handleMapClick); |
|
|
|
}, |
|
|
|
loadTownName() { |
|
|
|
let townNameList = [ |
|
|
|
{ |
|
|
|
name: "西郊街道", |
|
|
|
center: [104.599429, 28.749492], |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: "安阜街道", |
|
|
|
center: [104.609625, 28.78448], |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: "白沙湾街道", |
|
|
|
center: [104.662791, 28.776612], |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: "象鼻街道", |
|
|
|
center: [104.623461, 28.807056], |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: "沙坪街道", |
|
|
|
center: [104.801208, 28.837212], |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: "合江门街道", |
|
|
|
center: [104.63139, 28.767009], |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: "大观楼街道", |
|
|
|
center: [104.621645, 28.764587], |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: "双城街道", |
|
|
|
center: [104.73105, 28.862117], |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: "李庄镇", |
|
|
|
center: [104.800546, 28.79974], |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: "菜坝镇", |
|
|
|
center: [104.558742, 28.790712], |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: "金坪镇", |
|
|
|
center: [104.749651, 28.906222], |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: "牟坪镇", |
|
|
|
center: [104.879597, 28.651344], |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: "李端镇", |
|
|
|
center: [104.860381, 28.598191], |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: "宗场镇", |
|
|
|
center: [104.572331, 28.852856], |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: "宋家镇", |
|
|
|
center: [104.860345, 28.747853], |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: "思坡镇", |
|
|
|
center: [104.532224, 28.812268], |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: "思坡镇", |
|
|
|
center: [104.532224, 28.812268], |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: "白花镇", |
|
|
|
center: [104.614897, 29.09301], |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: "双谊镇", |
|
|
|
center: [104.564516, 28.904037], |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: "永兴镇", |
|
|
|
center: [104.562846, 29.023149], |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: "金秋湖镇", |
|
|
|
center: [104.715309, 28.981108], |
|
|
|
}, |
|
|
|
]; |
|
|
|
townNameList.forEach((item) => { |
|
|
|
const labelMarker = new AMap.Marker({ |
|
|
|
position: item.center, |
|
|
|
// zIndex: 500, |
|
|
|
clickable: true, |
|
|
|
content: ` |
|
|
|
<div style=" |
|
|
|
font-size: 16px; |
|
|
|
font-weight: bold; |
|
|
|
color: rgba(255, 255, 255, 0.6); |
|
|
|
width: max-content; |
|
|
|
"> |
|
|
|
${item.name} |
|
|
|
</div> |
|
|
|
`, |
|
|
|
offset: new AMap.Pixel(-25, -10), // 调整文本位置 |
|
|
|
}); |
|
|
|
|
|
|
|
// 添加 hover 高亮事件 |
|
|
|
labelMarker.on("mouseover", () => { |
|
|
|
labelMarker.setContent(` |
|
|
|
<div style=" |
|
|
|
font-size: 20px; |
|
|
|
font-weight: bold; |
|
|
|
color: #C6E1CA; |
|
|
|
width: max-content; |
|
|
|
"> |
|
|
|
${item.name} |
|
|
|
</div> |
|
|
|
`); |
|
|
|
}); |
|
|
|
|
|
|
|
labelMarker.on("mouseout", () => { |
|
|
|
labelMarker.setContent(` |
|
|
|
<div style=" |
|
|
|
font-size: 16px; |
|
|
|
font-weight: bold; |
|
|
|
color: rgba(255, 255, 255, 0.6); |
|
|
|
width: max-content; |
|
|
|
"> |
|
|
|
${item.name} |
|
|
|
</div> |
|
|
|
`); |
|
|
|
}); |
|
|
|
|
|
|
|
// 点击事件 |
|
|
|
labelMarker.on("click", () => { |
|
|
|
this.$emit("enterTown", item.name); // 触发事件 |
|
|
|
}); |
|
|
|
|
|
|
|
labelMarker.setMap(this.map); |
|
|
|
}); |
|
|
|
}, |
|
|
|
handleMapClick(e) { |
|
|
|
const lngLat = e.lnglat; |
|
|
|
console.log('点击坐标:', lngLat); |
|
|
|
console.log("点击坐标:", lngLat); |
|
|
|
|
|
|
|
this.polygons.forEach(polygon => { |
|
|
|
this.polygons.forEach((polygon) => { |
|
|
|
const path = polygon.getPath(); |
|
|
|
const isInPolygon = AMap.GeometryUtil.isPointInRing(lngLat.toArray(), path.map(p => p.toArray())); |
|
|
|
const isInPolygon = AMap.GeometryUtil.isPointInRing( |
|
|
|
lngLat.toArray(), |
|
|
|
path.map((p) => p.toArray()) |
|
|
|
); |
|
|
|
|
|
|
|
console.log('多边形:', isInPolygon); |
|
|
|
console.log("多边形:", isInPolygon); |
|
|
|
|
|
|
|
if (isInPolygon) { |
|
|
|
const name = polygon.getExtData().name; |
|
|
|
console.log('点击:', name); |
|
|
|
console.log("点击:", name); |
|
|
|
this.map.setZoomAndCenter(10, lngLat); // 放大并定位到点击区域 |
|
|
|
alert(`您点击了乡镇：${name}`); |
|
|
|
} |
|
|
|
@ -235,8 +406,14 @@ export default { |
|
|
|
}); |
|
|
|
|
|
|
|
const self = this; // 保存上下文以便回调使用 |
|
|
|
districtSearch.search(this.districtLocation, function (status, result) { |
|
|
|
if (status === "complete" && result.districtList && result.districtList.length) { |
|
|
|
districtSearch.search( |
|
|
|
this.districtLocation, |
|
|
|
function (status, result) { |
|
|
|
if ( |
|
|
|
status === "complete" && |
|
|
|
result.districtList && |
|
|
|
result.districtList.length |
|
|
|
) { |
|
|
|
const district = result.districtList[0]; |
|
|
|
const boundaries = district.boundaries; |
|
|
|
|
|
|
|
@ -249,17 +426,18 @@ export default { |
|
|
|
} else { |
|
|
|
console.error("行政区查询失败: " + status); |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
); |
|
|
|
}, |
|
|
|
drawCuiPingBase(boundaries) { |
|
|
|
const mask = boundaries.map((boundary) => [boundary]); |
|
|
|
boundaries.forEach((boundary) => { |
|
|
|
const polygon = new AMap.Polygon({ |
|
|
|
path: boundary, |
|
|
|
strokeColor: "#333", // 边界线颜色 |
|
|
|
strokeColor: "#4dd6e6", // 边界线颜色 |
|
|
|
strokeWeight: 3, // 边界线宽度 |
|
|
|
fillColor: "#102C4F", // 填充颜色 |
|
|
|
fillOpacity: 0.7, // 填充透明度 |
|
|
|
fillOpacity: 0.5, // 填充透明度 |
|
|
|
}); |
|
|
|
this.map.add(polygon); |
|
|
|
}); |
|
|
|
@ -277,9 +455,9 @@ export default { |
|
|
|
}, |
|
|
|
loadGeoJSON() { |
|
|
|
// 使用 require 加载 GeoJSON 文件 |
|
|
|
const geojsonData = require('@/assets/geojson/town_boundaries.geojson'); |
|
|
|
const geojsonData = require("@/assets/geojson/town_boundaries.geojson"); |
|
|
|
|
|
|
|
const colors = ['#33FFD450']; // 定义多边形边界颜色 |
|
|
|
const colors = ["#33FFD450"]; // 定义多边形边界颜色 |
|
|
|
|
|
|
|
// 遍历 GeoJSON 数据 |
|
|
|
geojsonData.features.forEach((feature, index) => { |
|
|
|
@ -287,15 +465,17 @@ export default { |
|
|
|
const name = properties.name; // 获取乡镇名称 |
|
|
|
const coordinates = geometry.coordinates[0]; // 获取多边形的坐标 |
|
|
|
const center = this.getPolygonCenter(coordinates); // 计算多边形的中心点 |
|
|
|
console.log('多边形中心点:', center); |
|
|
|
console.log("多边形中心点:", center); |
|
|
|
|
|
|
|
// 创建多边形并设置样式 |
|
|
|
const polygon = new AMap.Polygon({ |
|
|
|
zIndex: 100, |
|
|
|
path: coordinates[0].map((coord) => new AMap.LngLat(coord[0], coord[1])), // 转换为 AMap 坐标 |
|
|
|
path: coordinates[0].map( |
|
|
|
(coord) => new AMap.LngLat(coord[0], coord[1]) |
|
|
|
), // 转换为 AMap 坐标 |
|
|
|
strokeColor: colors[index % colors.length], // 边界线颜色 |
|
|
|
strokeWeight: 2, // 边界线宽度 |
|
|
|
fillColor: '#0A7EA8', // 填充颜色 |
|
|
|
fillColor: "#0A7EA8", // 填充颜色 |
|
|
|
fillOpacity: 0.5, // 填充透明度 |
|
|
|
bubble: true, // 允许事件冒泡 |
|
|
|
}); |
|
|
|
@ -323,7 +503,7 @@ export default { |
|
|
|
}); |
|
|
|
|
|
|
|
// 添加 hover 高亮事件 |
|
|
|
labelMarker.on('mouseover', () => { |
|
|
|
labelMarker.on("mouseover", () => { |
|
|
|
labelMarker.setContent(` |
|
|
|
<div style=" |
|
|
|
font-size: 20px; |
|
|
|
@ -336,7 +516,7 @@ export default { |
|
|
|
`); |
|
|
|
}); |
|
|
|
|
|
|
|
labelMarker.on('mouseout', () => { |
|
|
|
labelMarker.on("mouseout", () => { |
|
|
|
labelMarker.setContent(` |
|
|
|
<div style=" |
|
|
|
font-size: 16px; |
|
|
|
@ -350,8 +530,8 @@ export default { |
|
|
|
}); |
|
|
|
|
|
|
|
// 点击事件 |
|
|
|
labelMarker.on('click', () => { |
|
|
|
this.$emit('enterTown', name); // 触发事件 |
|
|
|
labelMarker.on("click", () => { |
|
|
|
this.$emit("enterTown", name); // 触发事件 |
|
|
|
}); |
|
|
|
|
|
|
|
labelMarker.setMap(this.map); |
|
|
|
@ -382,7 +562,10 @@ export default { |
|
|
|
console.warn(`无效的坐标 ${index}:`, coord); // 调试信息 |
|
|
|
} |
|
|
|
}); |
|
|
|
return [lngSum / coordinates[0].length, latSum / coordinates[0].length]; |
|
|
|
return [ |
|
|
|
lngSum / coordinates[0].length, |
|
|
|
latSum / coordinates[0].length, |
|
|
|
]; |
|
|
|
}, |
|
|
|
|
|
|
|
aggregationPoint(pointList) { |
|
|
|
|
changtong
6 months ago