diff --git a/src/views/modules/visual/cpts/map/command.vue b/src/views/modules/visual/command/cpts/map.vue similarity index 91% rename from src/views/modules/visual/cpts/map/command.vue rename to src/views/modules/visual/command/cpts/map.vue index 785f3e4a..cb8530ce 100644 --- a/src/views/modules/visual/cpts/map/command.vue +++ b/src/views/modules/visual/command/cpts/map.vue @@ -9,6 +9,8 @@ 切换深色模式
切换浅色模式
+ + @@ -17,7 +19,15 @@ import { requestPost } from "@/js/dai/request"; import cptCard from "@/views/modules/visual/cpts/card"; import cptTb from "@/views/modules/visual/cpts/tb"; import nextTick from "dai-js/tools/nextTick"; -import { Scene, PolygonLayer, LineLayer, PointLayer } from "@antv/l7"; +import cptPopup from "@/views/modules/visual/command/cpts/popup"; +import { + Scene, + PolygonLayer, + LineLayer, + PointLayer, + Marker, + Popup, +} from "@antv/l7"; import { GaodeMap, Map } from "@antv/l7-maps"; import { spliceIntoChunks } from "@/utils/index"; @@ -136,6 +146,7 @@ export default { components: { cptCard, cptTb, + cptPopup, }, watch: {}, @@ -519,21 +530,15 @@ export default { scene.addLayer(dotLayer); dotBgLayer.on("click", (e) => { - console.log(e.feature.properties); - this.$emit("clickDot", e.feature.properties); + console.log("--------clickDot", e); + this.handleClickDot( + e.feature.properties, + e.feature.geometry.coordinates + ); }); dotBgLayer.on("mousemove", (e) => { // console.log(e); - if (e.feature.properties.content) { - const popup = new Popup({ - offsets: [0, -0], - closeButton: false, - }) - .setLnglat(e.feature.geometry.coordinates) - .setHTML(`${e.feature.properties.content}`); - scene.addPopup(popup); - } }); dotBgLayer.on("unmousemove", (e) => {}); @@ -558,30 +563,51 @@ export default { scene.addLayer(dotLayer2); dotLayer2.on("click", (e) => { - console.log(e.feature.properties); - this.$emit("clickDot", e.feature.properties); + console.log("--------clickDot2", e); + this.handleClickDot( + e.feature.properties, + e.feature.geometry.coordinates + ); }); dotLayer2.on("mousemove", (e) => { // console.log(e); - if (e.feature.properties.content) { - const popup = new Popup({ - offsets: [0, -0], - closeButton: false, - }) - .setLnglat(e.feature.geometry.coordinates) - .setHTML(`${e.feature.properties.content}`); - scene.addPopup(popup); - } }); dotLayer2.on("unmousemove", (e) => {}); }, + async handleClickDot(item, posArr) { + console.log("handleClickDot", item, posArr); + const res = await this.$refs.popup.show(item); + if (res) { + const popup = new Popup({ + closeButton: true, + closeOnClick: true, + maxWidth: 400, + }) + .setLnglat(posArr) + .setDOMContent(this.$refs.popup.$el); + scene.addPopup(popup); + } + }, + + async setDotMarker(item, posArr) { + const marker = new Marker().setLnglat(posArr); + + marker.on("click", (e) => { + console.log("click", e); + this.handleClickDot(item, posArr); + }); + + scene.addMarker(marker); + scene.setZoomAndCenter(18, posArr); + }, + // 把地图缩放等级在原来基础上大一点 zoomInABit() { - // let current = scene.getZoom(); - // scene.setZoomAndCenter(current + 0.5); + // let current = scene.getZoom(); + // scene.setZoomAndCenter(current + 0.5); }, shiftMapStyle(type) { @@ -634,13 +660,13 @@ export default { searchPos(name) { return new Promise((reslove) => { - window.AMap.plugin("AMap.Autocomplete", function () { + window.AMap.plugin("AMap.PlaceSearch", function () { // 实例化Autocomplete var autoOptions = { //city 限定城市,默认全国 city: "全国", }; - var autoComplete = new window.AMap.Autocomplete(autoOptions); + var autoComplete = new window.AMap.PlaceSearch(autoOptions); autoComplete.search(name, function (status, result) { reslove(result); }); diff --git a/src/views/modules/visual/command/cpts/popup.vue b/src/views/modules/visual/command/cpts/popup.vue new file mode 100644 index 00000000..4e5bc33c --- /dev/null +++ b/src/views/modules/visual/command/cpts/popup.vue @@ -0,0 +1,732 @@ + + + + + diff --git a/src/views/modules/visual/command/index.vue b/src/views/modules/visual/command/index.vue index 8aec369c..79b926db 100644 --- a/src/views/modules/visual/command/index.vue +++ b/src/views/modules/visual/command/index.vue @@ -74,7 +74,7 @@ @click.stop="handleClickSearchLi(li, item)" > {{ - li.name + " " + li.district + li.name + " " + li.address }} {{ li.name + "(" + li.idCard + ")" @@ -96,7 +96,7 @@ @click.stop="handleClickSearchLi(li, item)" > {{ - li.name + " " + li.district + li.name + " " + li.address }} {{ li.name + "(" + li.idCard + ")" @@ -180,7 +180,7 @@ import { Loading } from "element-ui"; //引入Loading服务 import { requestPost } from "@/js/dai/request"; import People from "@/views/modules/visual/basicinfo/people"; import cptCard from "@/views/modules/visual/cpts/card"; -import gridMap from "@/views/modules/visual/cpts/map/command"; +import gridMap from "@/views/modules/visual/command/cpts/map"; import sidemenu from "@/views/modules/visual/command/cpts/sidemenu"; import sidemenuLeft from "@/views/modules/visual/command/cpts/sidemenu-left"; import ScreenLoading from "@/views/modules/visual/cpts/loading"; @@ -389,6 +389,18 @@ export default { }, methods: { + handleClickDotBtn(type, info) { + if (type == "create-service") { + // 点击网格发起服务 + } else if (type == "watch-resi") { + // 查看居民详情 + } else if (type == "watch-event") { + // 查看事件 + } else if (type == "create-demand") { + // 发起需求 + } + }, + handleClickMapBox() { this.showedSearchResult = false; }, @@ -439,6 +451,7 @@ export default { }, handleChangeMenu(list) { + console.log("handleChangeMenu", list); let categoryKeys = []; let coverageTypes = []; list.forEach((item) => { @@ -657,6 +670,18 @@ export default { const { data, code, msg } = await requestPost(url, params); if (code === 0) { + data.userInfos.forEach((item) => { + item.placeType = "resi"; + item.id = item.icUserId; + }); + data.eventInfos.forEach((item) => { + item.placeType = "event"; + item.id = item.eventId; + }); + data.resourceInfos.forEach((item) => { + item.placeType = item.resourceType; + item.id = item.resourceId; + }); this.searchResult[1].list = data.userInfos.slice(0, 2); this.searchResult[1].allList = data.userInfos; this.searchResult[2].list = data.eventInfos.slice(0, 2); @@ -679,15 +704,28 @@ export default { console.log("检索位置", data); - if (data && Array.isArray(data.tips) && data.tips.length > 0) { - this.searchResult[0].list = data.tips.slice(0, 2); - this.searchResult[0].allList = data.tips; + if ( + data && + data.poiList && + Array.isArray(data.poiList.pois) && + data.poiList.pois.length > 0 + ) { + let list = data.poiList.pois.map((item) => { + item.longitude = item.location.lng; + item.latitude = item.location.lat; + return item; + }); + this.searchResult[0].list = list.slice(0, 2); + this.searchResult[0].allList = list; } }, - handleClickSearchLi(li, item) { - console.log(li); - console.log(item); + handleClickSearchLi(li) { + this.$refs.map.setDotMarker(li, [ + parseFloat(li.longitude), + parseFloat(li.latitude), + ]); + this.showedSearchResult = false; }, handleClickSearchResultMore(item) {