|
|
@@ -1,122 +1,143 @@
|
|
|
<template>
|
|
|
- <div id="map-container" style="width: 100%; height: 600px;"></div>
|
|
|
- <button @click="startRectangleSelection">开始框选</button>
|
|
|
- <button @click="clearSelection">清除框选</button>
|
|
|
- <div>
|
|
|
- <h3>框选区域内的点位：</h3>
|
|
|
- <ul>
|
|
|
- <li v-for="(point, index) in selectedPoints" :key="index">
|
|
|
- {{ point }}
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
+ <div id="map-container"></div>
|
|
|
</template>
|
|
|
|
|
|
-<script>
|
|
|
-import { ref, onMounted } from 'vue';
|
|
|
-import AMapLoader from '@amap/amap-jsapi-loader';
|
|
|
-
|
|
|
-export default {
|
|
|
- setup() {
|
|
|
- const map = ref(null);
|
|
|
- const mouseTool = ref(null);
|
|
|
- const selectedArea = ref(null);
|
|
|
- const selectedPoints = ref([]);
|
|
|
- const allPoints = ref([
|
|
|
- { lng: 116.397428, lat: 39.90923 }, // 示例点位
|
|
|
- { lng: 116.407428, lat: 39.91923 },
|
|
|
- { lng: 116.417428, lat: 39.92923 },
|
|
|
- ]);
|
|
|
-
|
|
|
- // 初始化地图
|
|
|
- const initMap = async () => {
|
|
|
- try {
|
|
|
+<script setup>
|
|
|
+import { ref, onMounted, onUnmounted } from "vue";
|
|
|
+import AMapLoader from "@amap/amap-jsapi-loader";
|
|
|
+import eventBus from "@/api/eventBus";
|
|
|
+
|
|
|
+const map = ref(null);
|
|
|
+const mouseTool = ref(null);
|
|
|
+const selectedArea = ref(null);
|
|
|
+const selectedPoints = ref([]);
|
|
|
+const allPoints = ref([
|
|
|
+ { lng: 113.61448114737868, lat: 23.585550924763083 }, // 示例点位
|
|
|
+]);
|
|
|
+const defalutIcon = ref(null)
|
|
|
+const activeIcon = ref(null)
|
|
|
+
|
|
|
+const defalutOffset = ref(null)
|
|
|
+const activeOffset = ref(null)
|
|
|
+
|
|
|
+// 初始化地图
|
|
|
+const initMap = async () => {
|
|
|
+ try {
|
|
|
const AMap = await AMapLoader.load({
|
|
|
- key: '41769169f0f157e13a197e7eb0dd7b5b', // 替换为你的高德地图 Key
|
|
|
- version: '2.0', // SDK 版本
|
|
|
- plugins: ['AMap.MouseTool'], // 加载 MouseTool 插件
|
|
|
- });
|
|
|
+ key: "41769169f0f157e13a197e7eb0dd7b5b", // 替换为你的高德地图 Key
|
|
|
+ version: "2.0", // SDK 版本
|
|
|
+ plugins: ["AMap.MouseTool"], // 加载 MouseTool 插件
|
|
|
+ }).then((AMap) => {
|
|
|
+ // 创建地图实例
|
|
|
+ map.value = new AMap.Map("map-container", {
|
|
|
+ zoom: 17, // 初始缩放级别
|
|
|
+ center: [113.61448114737868 ,23.585550924763083],
|
|
|
+ layers: [
|
|
|
+ // 卫星
|
|
|
+ new AMap.TileLayer.Satellite(),
|
|
|
+ ],
|
|
|
+ });
|
|
|
|
|
|
- // 创建地图实例
|
|
|
- map.value = new AMap.Map('map-container', {
|
|
|
- zoom: 10, // 初始缩放级别
|
|
|
- center: [116.397428, 39.90923], // 初始中心点（北京）
|
|
|
- });
|
|
|
+ // 初始化 MouseTool
|
|
|
+ mouseTool.value = new AMap.MouseTool(map.value);
|
|
|
|
|
|
- // 初始化 MouseTool
|
|
|
- mouseTool.value = new AMap.MouseTool(map.value);
|
|
|
+ defalutIcon.value = new AMap.Icon({
|
|
|
+ // 图标的取图地址
|
|
|
+ image: require('@/assets/images/map/status/defalut-icon.png'),
|
|
|
+ // 图标所用图片大小
|
|
|
+ imageSize: new AMap.Size(26, 26),
|
|
|
+ });
|
|
|
+ activeIcon.value = new AMap.Icon({
|
|
|
+ // 图标的取图地址
|
|
|
+ image: require('@/assets/images/map/status/active-icon.png'),
|
|
|
+ // 图标所用图片大小
|
|
|
+ imageSize: new AMap.Size(40, 40),
|
|
|
+ });
|
|
|
|
|
|
- // 添加示例点位
|
|
|
- allPoints.value.forEach((point) => {
|
|
|
- new AMap.Marker({
|
|
|
- position: [point.lng, point.lat],
|
|
|
- map: map.value,
|
|
|
- });
|
|
|
- });
|
|
|
+ defalutOffset.value = new AMap.Pixel(-5, -5)
|
|
|
+ activeOffset.value = new AMap.Pixel(-12, -14)
|
|
|
|
|
|
- // 监听框选完成事件
|
|
|
- mouseTool.value.on('draw', (event) => {
|
|
|
- console.log('框选完成', event); // 调试日志
|
|
|
- const { obj } = event;
|
|
|
- if (obj instanceof AMap.Rectangle) {
|
|
|
- selectedArea.value = obj;
|
|
|
- checkPointsInArea(); // 检查框选区域内的点位
|
|
|
- }
|
|
|
+ // 添加示例点位
|
|
|
+ allPoints.value.forEach((point) => {
|
|
|
+ point.icon = new AMap.Marker({
|
|
|
+ position: [point.lng, point.lat],
|
|
|
+ map: map.value,
|
|
|
+ icon:defalutIcon.value,
|
|
|
+ offset: defalutOffset.value
|
|
|
+ });
|
|
|
+ });
|
|
|
+ startRectangleSelection()
|
|
|
+
|
|
|
+ // 监听框选完成事件
|
|
|
+ mouseTool.value.on("draw", (event) => {
|
|
|
+ const { obj } = event;
|
|
|
+ if (obj instanceof AMap.Rectangle) {
|
|
|
+ selectedArea.value = obj;
|
|
|
+ map.value.remove(selectedArea.value);
|
|
|
+ checkPointsInArea(); // 检查框选区域内的点位
|
|
|
+ }
|
|
|
+ });
|
|
|
});
|
|
|
- } catch (error) {
|
|
|
- console.error('地图加载失败:', error);
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- // 开始框选
|
|
|
- const startRectangleSelection = () => {
|
|
|
- if (mouseTool.value) {
|
|
|
+ } catch (error) {
|
|
|
+ console.error("地图加载失败:", error);
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// 开始框选
|
|
|
+const startRectangleSelection = () => {
|
|
|
+ if (mouseTool.value) {
|
|
|
mouseTool.value.rectangle({
|
|
|
- strokeColor: '#FF33FF', // 框选区域边框颜色
|
|
|
- strokeOpacity: 1, // 边框透明度
|
|
|
- strokeWeight: 2, // 边框宽度
|
|
|
- fillColor: '#FF33FF', // 填充颜色
|
|
|
- fillOpacity: 0.2, // 填充透明度
|
|
|
+ strokeColor: "#ffffff", // 框选区域边框颜色
|
|
|
+ strokeOpacity: 1, // 边框透明度
|
|
|
+ strokeWeight: 2, // 边框宽度
|
|
|
+ fillColor: "#000000", // 填充颜色
|
|
|
+ fillOpacity: 0.5, // 填充透明度
|
|
|
}); // 启用矩形框选工具
|
|
|
- }
|
|
|
- };
|
|
|
+ }
|
|
|
+};
|
|
|
|
|
|
- // 清除框选
|
|
|
- const clearSelection = () => {
|
|
|
- if (selectedArea.value) {
|
|
|
+// 清除框选
|
|
|
+const clearSelection = () => {
|
|
|
+ if (selectedArea.value) {
|
|
|
map.value.remove(selectedArea.value); // 移除框选区域
|
|
|
selectedArea.value = null;
|
|
|
+ selectedPoints.value.forEach(item =>{
|
|
|
+ item.icon.setIcon(defalutIcon.value)
|
|
|
+ item.icon.setOffset(defalutOffset.value)
|
|
|
+ })
|
|
|
selectedPoints.value = []; // 清空选中的点位
|
|
|
- }
|
|
|
- };
|
|
|
+ }
|
|
|
+};
|
|
|
|
|
|
- // 检查框选区域内的点位
|
|
|
- const checkPointsInArea = () => {
|
|
|
- if (!selectedArea.value) return;
|
|
|
+// 检查框选区域内的点位
|
|
|
+const checkPointsInArea = () => {
|
|
|
+ if (!selectedArea.value) return;
|
|
|
|
|
|
- const bounds = selectedArea.value.getBounds(); // 获取框选区域的边界
|
|
|
- selectedPoints.value = allPoints.value.filter((point) => {
|
|
|
+ const bounds = selectedArea.value.getBounds(); // 获取框选区域的边界
|
|
|
+ selectedPoints.value = allPoints.value.filter((point) => {
|
|
|
return bounds.contains([point.lng, point.lat]); // 判断点位是否在框选区域内
|
|
|
- });
|
|
|
- };
|
|
|
-
|
|
|
- // 组件挂载时初始化地图
|
|
|
- onMounted(() => {
|
|
|
- initMap();
|
|
|
});
|
|
|
-
|
|
|
- return {
|
|
|
- startRectangleSelection,
|
|
|
- clearSelection,
|
|
|
- selectedPoints,
|
|
|
- };
|
|
|
- },
|
|
|
+ selectedPoints.value.forEach(item =>{
|
|
|
+ item.icon.setIcon(activeIcon.value)
|
|
|
+ item.icon.setOffset(activeOffset.value)
|
|
|
+ })
|
|
|
+ eventBus.emit('map:list',selectedPoints.value)
|
|
|
};
|
|
|
+
|
|
|
+// 组件挂载时初始化地图
|
|
|
+onMounted(() => {
|
|
|
+ initMap();
|
|
|
+ eventBus.on('handle:clear',clearSelection)
|
|
|
+});
|
|
|
+
|
|
|
+onUnmounted(()=>{
|
|
|
+ eventBus.off('handle:clear',clearSelection)
|
|
|
+})
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
#map-container {
|
|
|
- width: 100%;
|
|
|
- height: 600px;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
wangsisi
