diff --git a/src/api/line/line.js b/src/api/line/line.js new file mode 100644 index 0000000..4b8544f --- /dev/null +++ b/src/api/line/line.js @@ -0,0 +1,47 @@ +import request from '@/utils/request' + +// 查询线路规划列表 +export function listLine(query) { + return request({ + url: '/line/line/list', + method: 'get', + params: query + }) +} + +// 查询线路规划详细 +export function getLine(lineId,uuid) { + return request({ + url: '/line/line/' + lineId + '/' + uuid, + method: 'get' + }) +} + +// 新增线路规划 +export function addLine(data) { + return request({ + url: '/line/line', + method: 'post', + data: data + }) +} + +// 修改线路规划 +export function updateLine(data) { + return request({ + url: '/line/line', + method: 'put', + data: data + }) +} + +// 删除线路规划 +export function delLine(lineId) { + return request({ + url: '/line/line', + method: 'delete', + data: { + ids: lineId + } + }) +} diff --git a/src/assets/images/map-pin.png b/src/assets/images/map-pin.png new file mode 100644 index 0000000..572e956 Binary files /dev/null and b/src/assets/images/map-pin.png differ diff --git a/src/utils/map.js b/src/utils/map.js new file mode 100644 index 0000000..1349184 --- /dev/null +++ b/src/utils/map.js @@ -0,0 +1,29 @@ +import AMapLoader from "@amap/amap-jsapi-loader"; + +// 初始化地图 +export const loadAMap = async (plugins) => { + try { + const AMap = await AMapLoader.load({ + key: "377d7c36dd385e2a722f29d4c6e1ffbf", // 申请好的Web端开发者Key，首次调用 load 时必填 + version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 + plugins, // 需要使用的的插件列表，如比例尺'AMap.Scale'等 + AMapUI: { + // 是否加载 AMapUI，缺省不加载 + version: "1.1", // AMapUI 版本 + plugins: ["overlay/SimpleMarker"], // 需要加载的 AMapUI ui插件 + }, + Loca: { + // 是否加载 Loca， 缺省不加载 + version: "2.0", // Loca 版本 + }, + }); + // const map = new AMap.Map("map-container", { + // zoom: 16, // 缩放级别 + // center: [117.290345, 31.797813], // 中心点 + // }); + return AMap; + } catch (error) { + console.log(error); + throw new Error("地图创建失败"); + } +}; diff --git a/src/views/basic/fence/add.vue b/src/views/basic/fence/add.vue index b49a01d..0c4f462 100644 --- a/src/views/basic/fence/add.vue +++ b/src/views/basic/fence/add.vue @@ -10,16 +10,28 @@
- 返回上层 + 返回上层 - + - 搜索 + 卫星模式
@@ -76,13 +88,13 @@ placeholder="请输入报警时段" /> - + { - try { - AMap.value = await AMapLoader.load({ - key: "377d7c36dd385e2a722f29d4c6e1ffbf", // 申请好的Web端开发者Key，首次调用 load 时必填 - // key: "7891f1238368a895ff1967c79643102d", // 申请好的Web端开发者Key，首次调用 load 时必填 - version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 - plugins: [ - // "AMap.Driving", - "AMap.Scale", - "AMap.PlaceSearch", - // "AMap.AutoComplete", - // "AMap.Geocoder", - // "AMap.TruckDriving", - ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等 - AMapUI: { - // 是否加载 AMapUI，缺省不加载 - version: "1.1", // AMapUI 版本 - plugins: ["overlay/SimpleMarker"], // 需要加载的 AMapUI ui插件 - }, - Loca: { - // 是否加载 Loca， 缺省不加载 - version: "2.0", // Loca 版本 - }, - }); - // geocoder.value = new AMap.value.Geocoder(); - map.value = new AMap.value.Map("map-container", { - zoom: 16, // 缩放级别 - center: [117.290345, 31.797813], // 中心点 - city: "合肥", - }); - map.value.on("click", handleMapClick); - // 地点搜索插件 - placeSearch.value = new AMap.value.PlaceSearch({ - // map: map.value, - city: "0551", - }); - fencePolygon.value = new AMap.value.Polygon({}); - map.value.add(fencePolygon.value); - - map.value.addControl(new AMap.value.Scale()); - return "success"; - } catch (error) { - console.log(error); - } -}; - const handleMapClick = (ev) => { - console.log(ev); if (map.value.getAllOverlays("polygon").length === 0) { map.value.add(fencePolygon.value); } + form.value.fencePath.push(ev.lnglat); - console.log(JSON.stringify(form.value.fencePath)); + + turningPointMarker.value.push( + new AMap.value.Marker({ + map: map.value, + position: ev.lnglat, + content: ` +
+
+ `, + anchor: "bottom-right", + }) + ); + if (form.value.fencePath.length > 2) { + turningPointMarker.value.forEach((el) => { + el.hide(); + }); + } else { + turningPointMarker.value.forEach((el) => { + el.show(); + }); + } fencePolygon.value.setPath( // AMap.value.GeometryUtil.makesureClockwise( // form.value.fencePath.map((el) => new AMap.value.LngLat(el.lng, el.lat)) @@ -206,6 +208,55 @@ const handleMapClick = (ev) => { // ) ); }; +const handleResultClick = (ev) => { + resultInfoWindow.value.setContent(` +
+ ${ev.target.getExtData().name}
+ `); + resultInfoWindow.value.open(map.value, [ev.lnglat.lng, ev.lnglat.lat]); +}; +// 根据名称搜索地图标点 +const searchPoint = (val /** 搜索建议选项 */, type) => { + map.value.clearMap(); + form.value.fencePath = []; + + placeSearch.value.search(searchKeyword.value, (status, result) => { + console.log(status, result); + // TODO: 添加搜索结果标记 + if (status === "complete") { + searchResultMarkers.value = result.poiList.pois.map((el, index) => { + const marker = new AMap.value.Marker({ + map: map.value, + position: new AMap.value.LngLat(el.location.lng, el.location.lat), + extData: el, + content: ` +
+ ${index + 1} +
+ `, + }); + marker.on("mouseover", handleResultClick); + marker.on("click", handleMapClick); + marker.on("mouseout", (ev) => { + resultInfoWindow.value.close(); + }); + return marker; + }); + map.value.setFitView(searchResultMarkers.value); + } + }); +}; /** 提交按钮 */ function submitForm() { proxy.$refs["fenceRef"].validate((valid) => { @@ -254,7 +305,25 @@ function back() { reset(); onMounted(() => { - initMap().then(() => { + loadAMap(["AMap.Scale", "AMap.PlaceSearch"]).then((_AMap) => { + AMap.value = _AMap; + map.value = new AMap.value.Map("map-container", { + zoom: 16, // 缩放级别 + center: [117.290345, 31.797813], // 中心点 + city: "合肥", + }); + map.value.on("click", handleMapClick); + // 地点搜索插件 + placeSearch.value = new AMap.value.PlaceSearch({ + // map: map.value, + city: "0551", + }); + resultInfoWindow.value = new AMap.value.InfoWindow({ + anchor: "bottom-center", + }); + fencePolygon.value = new AMap.value.Polygon({}); + map.value.add(fencePolygon.value); + map.value.addControl(new AMap.value.Scale()); if (route.query.fenceId && route.query.uuid) { getFence(route.query.fenceId, route.query.uuid).then((resp) => { form.value = { diff --git a/src/views/basic/fence/index.vue b/src/views/basic/fence/index.vue index bd33f32..a2db384 100644 --- a/src/views/basic/fence/index.vue +++ b/src/views/basic/fence/index.vue @@ -94,11 +94,7 @@ - + diff --git a/src/views/basic/line/RouteStepList.vue b/src/views/basic/line/RouteStepList.vue new file mode 100644 index 0000000..867cc54 --- /dev/null +++ b/src/views/basic/line/RouteStepList.vue @@ -0,0 +1,166 @@ + + + diff --git a/src/views/basic/line/add.vue b/src/views/basic/line/add.vue new file mode 100644 index 0000000..82db169 --- /dev/null +++ b/src/views/basic/line/add.vue @@ -0,0 +1,666 @@ + + + diff --git a/src/views/basic/line/index.vue b/src/views/basic/line/index.vue new file mode 100644 index 0000000..5521623 --- /dev/null +++ b/src/views/basic/line/index.vue @@ -0,0 +1,344 @@ + + + diff --git a/src/views/basic/site/add.vue b/src/views/basic/site/add.vue index 2bd90c2..008ca92 100644 --- a/src/views/basic/site/add.vue +++ b/src/views/basic/site/add.vue @@ -2,7 +2,11 @@
- + 搜索 @@ -81,16 +85,19 @@