From f3b0957baa768ad2e1173e5d01aa0da420f298e1 Mon Sep 17 00:00:00 2001 From: dai <851733175@qq.com> Date: Fri, 21 Oct 2022 10:41:58 +0800 Subject: [PATCH 01/12] =?UTF-8?q?=E7=A0=94=E7=A9=B6=E7=A0=94=E7=A9=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 6 +++--- src/main.js | 42 +++++++++++++++++++++--------------------- 2 files changed, 24 insertions(+), 24 deletions(-) diff --git a/package.json b/package.json index b6c7da275..26e3c2067 100644 --- a/package.json +++ b/package.json @@ -27,8 +27,8 @@ "babel-plugin-component": "^1.1.1", "echarts": "^5.2.2", "echarts-gl": "^2.0.9", - "element-theme": "^2.0.1", - "element-ui": "^2.13.0", + "element-theme": "2.0.1", + "element-ui": "2.13.2", "file-saver": "^2.0.5", "gulp-autoprefixer": "^6.1.0", "gulp-clean-css": "^4.2.0", @@ -111,4 +111,4 @@ "not ie <= 10" ] } -} +} \ No newline at end of file diff --git a/src/main.js b/src/main.js index 51a5d6bea..f5f3634b1 100644 --- a/src/main.js +++ b/src/main.js @@ -1,7 +1,7 @@ import Vue from "vue"; import Element from "element-ui"; -import Mint from "mint-ui"; -import "mint-ui/lib/style.css"; +// import Mint from "mint-ui"; +// import "mint-ui/lib/style.css"; import App from "@/App"; import i18n from "@/i18n"; @@ -12,14 +12,14 @@ import "@/assets/scss/aui.scss"; //按钮 import http from "@/utils/request"; -import renRadioGroup from "@/components/ren-radio-group"; -import renSelect from "@/components/ren-select"; -import renProcessMultiple from "@/components/ren-process-multiple"; -import renProcessStart from "@/components/ren-process-start"; -import renProcessRunning from "@/components/ren-process-running"; -import renProcessDetail from "@/components/ren-process-detail"; -import renDeptTree from "@/components/ren-dept-tree"; -import renRegionTree from "@/components/ren-region-tree"; +// import renRadioGroup from "@/components/ren-radio-group"; +// import renSelect from "@/components/ren-select"; +// import renProcessMultiple from "@/components/ren-process-multiple"; +// import renProcessStart from "@/components/ren-process-start"; +// import renProcessRunning from "@/components/ren-process-running"; +// import renProcessDetail from "@/components/ren-process-detail"; +// import renDeptTree from "@/components/ren-dept-tree"; +// import renRegionTree from "@/components/ren-region-tree"; import cloneDeep from "lodash/cloneDeep"; // axios封装 @@ -30,7 +30,7 @@ import service from "@/js/service"; import store from "@/js/store"; //系统工具 import util from "@js/util"; -import Cookies from "js-cookie"; +// import Cookies from "js-cookie"; import getQueryPara from "dai-js/modules/getQueryPara"; // 兼容token传参登录 @@ -51,16 +51,16 @@ window.app = Object.assign( Vue.config.productionTip = false; -Vue.use(renRadioGroup); -Vue.use(renSelect); -Vue.use(renDeptTree); -Vue.use(renRegionTree); -Vue.use(renProcessMultiple); -Vue.use(renProcessStart); -Vue.use(renProcessRunning); -Vue.use(renProcessDetail); -Vue.use(Element); -Vue.use(Mint); +// Vue.use(renRadioGroup); +// Vue.use(renSelect); +// Vue.use(renDeptTree); +// Vue.use(renRegionTree); +// Vue.use(renProcessMultiple); +// Vue.use(renProcessStart); +// Vue.use(renProcessRunning); +// Vue.use(renProcessDetail); +// Vue.use(Element); +// Vue.use(Mint); Vue.use(Element, { size: "default", From bcac215a2a6cdfdce1f1197f0851e1583844169d Mon Sep 17 00:00:00 2001 From: dai <851733175@qq.com> Date: Fri, 21 Oct 2022 13:21:54 +0800 Subject: [PATCH 02/12] =?UTF-8?q?=E5=BC=80=E5=8F=91=E4=B8=AD=E3=80=82?= =?UTF-8?q?=E3=80=82=E8=BF=98=E4=B8=8D=E5=A5=BD=E4=BD=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/index.html | 5 +++-- src/main.js | 4 ++++ src/utils/tiandi2qq.js | 20 +++++++++++++++++++ src/views/modules/cpts/base/cpts/edit.vue | 24 +++++++++++------------ 4 files changed, 39 insertions(+), 14 deletions(-) create mode 100644 src/utils/tiandi2qq.js diff --git a/public/index.html b/public/index.html index 012587ee5..b91b1e447 100644 --- a/public/index.html +++ b/public/index.html @@ -7,8 +7,9 @@ - - + + diff --git a/src/main.js b/src/main.js index f5f3634b1..a9ef9ac09 100644 --- a/src/main.js +++ b/src/main.js @@ -32,6 +32,10 @@ import store from "@/js/store"; import util from "@js/util"; // import Cookies from "js-cookie"; import getQueryPara from "dai-js/modules/getQueryPara"; +import tiandi2qq from "@/utils/tiandi2qq"; + +// 天地图转qq模式 +tiandi2qq(); // 兼容token传参登录 if (getQueryPara("token")) { diff --git a/src/utils/tiandi2qq.js b/src/utils/tiandi2qq.js new file mode 100644 index 000000000..92756cc05 --- /dev/null +++ b/src/utils/tiandi2qq.js @@ -0,0 +1,20 @@ +/** + * 邮箱 + * @param {*} s + */ +export default function init() { + window.TMap = { + Map: T.Map, + service: { + Search: T.LocalSearch, + Geocoder: T.Geocoder, + }, + MultiMarker() {}, + LatLng(lat, lng) { + return { + lat, + lng, + }; + }, + }; +} diff --git a/src/views/modules/cpts/base/cpts/edit.vue b/src/views/modules/cpts/base/cpts/edit.vue index f3989e228..eeee6da0d 100644 --- a/src/views/modules/cpts/base/cpts/edit.vue +++ b/src/views/modules/cpts/base/cpts/edit.vue @@ -640,20 +640,20 @@ export default { rotation: 45, // 设置地图旋转角度 }); - search = new window.TMap.service.Search({ pageSize: 10 }); - // 新建一个地点搜索类 - markers = new TMap.MultiMarker({ - map: map, - geometries: [], - }); - infoWindowList = Array(10); + // search = new window.TMap.service.Search({ pageSize: 10 }); + // // 新建一个地点搜索类 + // markers = new TMap.MultiMarker({ + // map: map, + // geometries: [], + // }); + // infoWindowList = Array(10); - geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类 + // geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类 - // 监听地图平移结束 - map.on("panend", (e) => { - this.handleMoveCenter(item, e); - }); + // // 监听地图平移结束 + // map.on("panend", (e) => { + // this.handleMoveCenter(item, e); + // }); // this.handleMoveCenter(item); }, From cd15977921de925a24376d6d4f5747aa63e0569b Mon Sep 17 00:00:00 2001 From: dai <851733175@qq.com> Date: Fri, 21 Oct 2022 15:22:38 +0800 Subject: [PATCH 03/12] =?UTF-8?q?=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main.js | 4 --- src/utils/dai-map.js | 33 +++++++++++++++++++++++ src/utils/tiandi2qq.js | 20 -------------- src/views/modules/cpts/base/cpts/edit.vue | 24 ++++++++--------- 4 files changed, 45 insertions(+), 36 deletions(-) create mode 100644 src/utils/dai-map.js delete mode 100644 src/utils/tiandi2qq.js diff --git a/src/main.js b/src/main.js index a9ef9ac09..f5f3634b1 100644 --- a/src/main.js +++ b/src/main.js @@ -32,10 +32,6 @@ import store from "@/js/store"; import util from "@js/util"; // import Cookies from "js-cookie"; import getQueryPara from "dai-js/modules/getQueryPara"; -import tiandi2qq from "@/utils/tiandi2qq"; - -// 天地图转qq模式 -tiandi2qq(); // 兼容token传参登录 if (getQueryPara("token")) { diff --git a/src/utils/dai-map.js b/src/utils/dai-map.js new file mode 100644 index 000000000..342ba3a56 --- /dev/null +++ b/src/utils/dai-map.js @@ -0,0 +1,33 @@ + +export default function init() { + this.mapType = typeof window.TMap!=='undefined' ? 'qq' : 'tiandi' + window.TMap = T; + console.log("天地图", T); + window.TMap = {}; + window.TMap.Map = function (ele, paramas) { + let tmap = new T.Map(ele, paramas); + if (typeof ele == "string") { + ele = document.getElementById("app"); + } + let width = ele.offsetWidth; + let height = ele.offsetHeight; + if (height == 0) { + ele.style.height = width * 0.6 + "px"; + } + Object.keys(tmap).forEach((ki) => { + this[ki] = tmap[ki]; + }); + return this; + }; + window.TMap.service = { + Search: T.LocalSearch, + Geocoder: T.Geocoder, + }; + window.TMap.MultiMarker = function () {}; + window.TMap.LatLng = function (lat, lng) { + return { + lat, + lng, + }; + }; +} diff --git a/src/utils/tiandi2qq.js b/src/utils/tiandi2qq.js deleted file mode 100644 index 92756cc05..000000000 --- a/src/utils/tiandi2qq.js +++ /dev/null @@ -1,20 +0,0 @@ -/** - * 邮箱 - * @param {*} s - */ -export default function init() { - window.TMap = { - Map: T.Map, - service: { - Search: T.LocalSearch, - Geocoder: T.Geocoder, - }, - MultiMarker() {}, - LatLng(lat, lng) { - return { - lat, - lng, - }; - }, - }; -} diff --git a/src/views/modules/cpts/base/cpts/edit.vue b/src/views/modules/cpts/base/cpts/edit.vue index eeee6da0d..a80d53040 100644 --- a/src/views/modules/cpts/base/cpts/edit.vue +++ b/src/views/modules/cpts/base/cpts/edit.vue @@ -640,20 +640,20 @@ export default { rotation: 45, // 设置地图旋转角度 }); - // search = new window.TMap.service.Search({ pageSize: 10 }); - // // 新建一个地点搜索类 - // markers = new TMap.MultiMarker({ - // map: map, - // geometries: [], - // }); - // infoWindowList = Array(10); + search = new window.TMap.service.Search(map, { pageSize: 10 }); + // 新建一个地点搜索类 + markers = new TMap.MultiMarker({ + map: map, + geometries: [], + }); + infoWindowList = Array(10); - // geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类 + geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类 - // // 监听地图平移结束 - // map.on("panend", (e) => { - // this.handleMoveCenter(item, e); - // }); + // 监听地图平移结束 + map.on("panend", (e) => { + this.handleMoveCenter(item, e); + }); // this.handleMoveCenter(item); }, From 8bb34cb2a87044796dc8f3073825eac50416cc6c Mon Sep 17 00:00:00 2001 From: dai <851733175@qq.com> Date: Fri, 21 Oct 2022 17:07:24 +0800 Subject: [PATCH 04/12] =?UTF-8?q?=E7=AC=AC=E4=B8=80=E6=AD=A5=E5=95=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/dai-map.js | 249 ++++++++++++++++++++-- src/views/modules/cpts/base/cpts/edit.vue | 107 +++------- 2 files changed, 254 insertions(+), 102 deletions(-) diff --git a/src/utils/dai-map.js b/src/utils/dai-map.js index 342ba3a56..960d13677 100644 --- a/src/utils/dai-map.js +++ b/src/utils/dai-map.js @@ -1,11 +1,227 @@ +// 封装了地图相关函数，兼容天地图、腾讯地图常用api +export default function init(ele, position, params) { + const mapType = typeof window.TMap !== "undefined" ? "qq" : "td"; + this.mapType = mapType; + this.map = null; + this.marker = null; + this.markers = null; + this.getCenter = function () { + return { + lat: 0, + lng: 0, + }; + }; + this.setCenter = function (lat, lng) {}; + this.setMarker = function (lat, lng) {}; + this.getAddress = async function (lat, lng) {}; + this.searchNearby = async function (keyword) {}; + this.on = function (eventType, fn) {}; + + const QQMap = window.TMap; + const TDMap = window.T; + + let { latitude, longitude } = position; + if (!latitude || latitude == "" || latitude == "0") { + latitude = 39.9088810666821; + longitude = 116.39743841556731; + } + + if (mapType == "qq") { + let center = new QQMap.LatLng(latitude, longitude); + this.map = new QQMap.Map(ele, { + center, + ...params, + }); + + this.markers = new QQMap.MultiMarker({ + map: map, + geometries: [], + }); + + this.getCenter = function () { + const center = this.map.getCenter(); + const lat = center.getLat(); + const lng = center.getLng(); + return { lat, lng }; + }; + + this.setCenter = function (lat, lng) { + this.map.setCenter(new QQMap.LatLng(lat, lng)); + }; + + this.setMarker = function (lat, lng) { + this.markers.setGeometries([]); + this.markers.add([ + { + id: "4", + styleId: "marker", + position: new QQMap.LatLng(lat, lng), + properties: { + title: "marker4", + }, + }, + ]); + }; + + this.geocoder = new QQMap.service.Geocoder(); // 新建一个正逆地址解析类 + this.getAddress = async function (lat, lng) { + return new Promise((reslove) => { + this.geocoder + .getAddress({ location: new QQMap.LatLng(lat, lng) }) // 将给定的坐标位置转换为地址 + .then((result) => { + reslove({ + msg: "success", + data: { + address: result.result.address, + }, + }); + }) + .catch((error) => { + reslove({ + msg: "failed", + error, + }); + }); + }); + }; + + this.search = new QQMap.service.Search(this.map, { pageSize: 10 }); + this.searchNearby = async function (keyword) { + return new Promise((reslove) => { + this.search + .searchNearby({ + keyword, + radius: 1000, + autoExtend: true, + center: this.map.getCenter(), + }) + .then((result) => { + let { data } = result; + if (Array.isArray(data) && data.length > 0) { + const { + location: { lat, lng, address }, + } = data[0]; + // this.setCenter(lat, lng); + // this.setMarker(lat, lng); + reslove({ + msg: "success", + data: { + lng, + lat, + address, + }, + }); + } else { + reslove({ + msg: "failed", + error: "未检索到相关位置坐标", + }); + } + }) + .catch((error) => { + reslove({ + msg: "failed", + error, + }); + }); + }); + }; + + this.on = function (eventType, fn) { + this.map.on(eventType, fn); + }; + } else { + let center = new TDMap.LngLat(longitude, latitude); + this.map = new TDMap.Map(ele, { + center, + ...params, + }); + + this.getCenter = function () { + const center = this.map.getCenter(); + const lat = center.getLat(); + const lng = center.getLng(); + return { lat, lng }; + }; + + this.setCenter = function (lat, lng) { + this.map.panTo(new TDMap.LngLat(lng, lat)); + }; + + this.setMarker = function (lat, lng) { + let lnglat = new TDMap.LngLat(lng, lat); + if (!this.marker) { + this.marker = new TDMap.Marker(lnglat, {}); + } else { + this.marker.setLngLat(lnglat); + } + }; + + this.geocoder = new TDMap.service.Geocoder(); // 新建一个正逆地址解析类 + this.getAddress = async function (lat, lng) { + return new Promise((reslove) => { + this.geocoder.getLocation( + { location: new TDMap.LatLng(lat, lng) }, + (result) => { + if (result) { + let status = result.getStatus(); + reslove({ + msg: "success", + data: { + address: result.getAddress(), + }, + }); + } else { + reslove({ + msg: "failed", + error: "解析失败", + }); + } + } + ); + }); + }; + + this.search = new TDMap.LocalSearch(this.map, { pageCapacity: 10 }); + this.searchNearby = async function (keyword) { + return new Promise((reslove) => { + this.search.setQueryType(1); + this.search.searchNearby(keyword, this.map.getCenter(), 1000); + + const result = this.search.getResults(); + const data = result.getPois(); + + if (Array.isArray(data) && data.length > 0) { + const { lonlat, address, name } = data[0]; + const lng = lonlat.split(",")[0]; + const lat = lonlat.split(",")[1]; + // this.setCenter(lat, lng); + // this.setMarker(lat, lng); + reslove({ + msg: "success", + data: { + lng, + lat, + address: address + name, + }, + }); + } else { + reslove({ + msg: "failed", + error: "未检索到相关位置坐标", + }); + } + }); + }; + + this.on = function (eventType, fn) { + if (eventType == "panend") { + this.map.on("dragend", fn); + } else { + this.map.on(eventType, fn); + } + }; -export default function init() { - this.mapType = typeof window.TMap!=='undefined' ? 'qq' : 'tiandi' - window.TMap = T; - console.log("天地图", T); - window.TMap = {}; - window.TMap.Map = function (ele, paramas) { - let tmap = new T.Map(ele, paramas); if (typeof ele == "string") { ele = document.getElementById("app"); } @@ -14,20 +230,7 @@ export default function init() { if (height == 0) { ele.style.height = width * 0.6 + "px"; } - Object.keys(tmap).forEach((ki) => { - this[ki] = tmap[ki]; - }); - return this; - }; - window.TMap.service = { - Search: T.LocalSearch, - Geocoder: T.Geocoder, - }; - window.TMap.MultiMarker = function () {}; - window.TMap.LatLng = function (lat, lng) { - return { - lat, - lng, - }; - }; + } + + return this; } diff --git a/src/views/modules/cpts/base/cpts/edit.vue b/src/views/modules/cpts/base/cpts/edit.vue index a80d53040..9f184ada4 100644 --- a/src/views/modules/cpts/base/cpts/edit.vue +++ b/src/views/modules/cpts/base/cpts/edit.vue @@ -331,12 +331,9 @@ import { requestPost } from "@/js/dai/request"; import nextTick from "dai-js/tools/nextTick"; import Schema from "async-validator"; import Tinymce from "@c/tinymce2/index.vue"; +import daiMap from "@/utils/dai-map"; var map; -var search; -var markers; -var infoWindowList; -var geocoder; // 新建一个正逆地址解析类 export default { components: { Tinymce }, @@ -626,29 +623,16 @@ export default { // 地图初始化函数，本例取名为init，开发者可根据实际情况定义 initMap(item) { let { latitude, longitude } = this.$store.state.user; - if (!latitude || latitude == "" || latitude == "0") { - latitude = 39.9088810666821; - longitude = 116.39743841556731; - } - // 定义地图中心点坐标 - var center = new window.TMap.LatLng(latitude, longitude); - // 定义map变量，调用 TMap.Map() 构造函数创建地图 - map = new window.TMap.Map(document.getElementById("app"), { - center: center, // 设置地图中心点坐标 - zoom: 16.2, // 设置地图缩放级别 - pitch: 43.5, // 设置俯仰角 - rotation: 45, // 设置地图旋转角度 - }); - - search = new window.TMap.service.Search(map, { pageSize: 10 }); - // 新建一个地点搜索类 - markers = new TMap.MultiMarker({ - map: map, - geometries: [], - }); - infoWindowList = Array(10); - geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类 + let map = new daiMap( + document.getElementById("app"), + { latitude, longitude }, + { + zoom: 16.2, // 设置地图缩放级别 + pitch: 43.5, // 设置俯仰角 + rotation: 45, // 设置地图旋转角度 + } + ); // 监听地图平移结束 map.on("panend", (e) => { @@ -657,70 +641,35 @@ export default { // this.handleMoveCenter(item); }, - setMarker(lat, lng) { - markers.setGeometries([]); - markers.add([ - { - id: "4", - styleId: "marker", - position: new TMap.LatLng(lat, lng), - properties: { - title: "marker4", - }, - }, - ]); - }, + async handleSearchMap(item) { + const { msg, data } = await map.searchNearby(this.fmData[item.keyName]); + if (msg == "success") { + const { lat, lng } = data; + map.setCenter(lat, lng); + map.setMarker(lat, lng); - handleSearchMap(item) { - infoWindowList.forEach((infoWindow) => { - infoWindow.close(); - }); - infoWindowList.length = 0; - markers.setGeometries([]); - // 在地图显示范围内以给定的关键字搜索地点 - search - .searchNearby({ - keyword: this.fmData[item.keyName], - radius: 1000, - autoExtend: true, - center: map.getCenter(), - }) - .then((result) => { - let { data } = result; - if (Array.isArray(data) && data.length > 0) { - const { - location: { lat, lng }, - } = data[0]; - map.setCenter(new TMap.LatLng(lat, lng)); - this.setMarker(lat, lng); - // item.supValues[0] = lng; - // item.supValues[1] = lat; - this.fmData[item.supKeys[0]] = lng; - this.fmData[item.supKeys[1]] = lat; - } else { - this.$message.error("未检索到相关位置坐标"); - } - }); + this.fmData[item.supKeys[0]] = lng; + this.fmData[item.supKeys[1]] = lat; + } else { + this.$message.error("未检索到相关位置坐标"); + } }, - handleMoveCenter(item, e) { + async handleMoveCenter(item, e) { console.log(e); //修改地图中心点 - const center = map.getCenter(); - const lat = center.getLat(); - const lng = center.getLng(); + const { lat, lng } = map.getCenter(); // item.supValues[0] = lng; // item.supValues[1] = lat; this.fmData[item.supKeys[0]] = lng; this.fmData[item.supKeys[1]] = lat; - this.setMarker(lat, lng); + map.setMarker(lat, lng); if (e && e.originalEvent) { - geocoder - .getAddress({ location: new TMap.LatLng(lat, lng) }) // 将给定的坐标位置转换为地址 - .then((result) => { - this.fmData[item.keyName] = result.result.address; - }); + let { msg, data } = await map.getAddress(lat, lng); + if (msg == "success") { + this.fmData[item.keyName] = data.address; + } } }, From 55d82e715cebefb390f49e89808b96f8bd31e30c Mon Sep 17 00:00:00 2001 From: dai <851733175@qq.com> Date: Fri, 21 Oct 2022 17:41:15 +0800 Subject: [PATCH 05/12] =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E5=B7=AE=E4=B8=8D?= =?UTF-8?q?=E5=A4=9A=E5=8F=AF=E4=BB=A5=E7=94=A8=E4=BA=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/dai-map.js | 79 ++++++++++++----------- src/views/modules/cpts/base/cpts/edit.vue | 20 +++--- 2 files changed, 51 insertions(+), 48 deletions(-) diff --git a/src/utils/dai-map.js b/src/utils/dai-map.js index 960d13677..5896a6dc9 100644 --- a/src/utils/dai-map.js +++ b/src/utils/dai-map.js @@ -1,3 +1,5 @@ +import nextTick from "dai-js/tools/nextTick"; + // 封装了地图相关函数，兼容天地图、腾讯地图常用api export default function init(ele, position, params) { const mapType = typeof window.TMap !== "undefined" ? "qq" : "td"; @@ -101,8 +103,8 @@ export default function init(ele, position, params) { const { location: { lat, lng, address }, } = data[0]; - // this.setCenter(lat, lng); - // this.setMarker(lat, lng); + this.setCenter(lat, lng); + this.setMarker(lat, lng); reslove({ msg: "success", data: { @@ -131,6 +133,15 @@ export default function init(ele, position, params) { this.map.on(eventType, fn); }; } else { + if (typeof ele == "string") { + ele = document.getElementById("app"); + } + let width = ele.offsetWidth; + let height = ele.offsetHeight; + if (height == 0) { + ele.style.height = width * 0.5 + "px"; + } + let center = new TDMap.LngLat(longitude, latitude); this.map = new TDMap.Map(ele, { center, @@ -152,51 +163,54 @@ export default function init(ele, position, params) { let lnglat = new TDMap.LngLat(lng, lat); if (!this.marker) { this.marker = new TDMap.Marker(lnglat, {}); + this.map.addOverLay(this.marker); } else { this.marker.setLngLat(lnglat); } }; - this.geocoder = new TDMap.service.Geocoder(); // 新建一个正逆地址解析类 + this.geocoder = new TDMap.Geocoder(); // 新建一个正逆地址解析类 this.getAddress = async function (lat, lng) { return new Promise((reslove) => { - this.geocoder.getLocation( - { location: new TDMap.LatLng(lat, lng) }, - (result) => { - if (result) { - let status = result.getStatus(); - reslove({ - msg: "success", - data: { - address: result.getAddress(), - }, - }); - } else { - reslove({ - msg: "failed", - error: "解析失败", - }); - } + this.geocoder.getLocation(new TDMap.LngLat(lng, lat), (result) => { + if (result) { + console.log("this.geocoder.getLocation", result); + let status = result.getStatus(); + reslove({ + msg: "success", + data: { + address: result.getAddress(), + }, + }); + } else { + reslove({ + msg: "failed", + error: "解析失败", + }); } - ); + }); }); }; this.search = new TDMap.LocalSearch(this.map, { pageCapacity: 10 }); this.searchNearby = async function (keyword) { - return new Promise((reslove) => { + return new Promise(async (reslove) => { this.search.setQueryType(1); - this.search.searchNearby(keyword, this.map.getCenter(), 1000); + this.search.searchNearby(keyword, this.map.getCenter(), 1000000000); + + await nextTick(1000); const result = this.search.getResults(); - const data = result.getPois(); + const data = result ? result.getPois() : null; + + console.log("检索结果", data); if (Array.isArray(data) && data.length > 0) { const { lonlat, address, name } = data[0]; - const lng = lonlat.split(",")[0]; - const lat = lonlat.split(",")[1]; - // this.setCenter(lat, lng); - // this.setMarker(lat, lng); + const lng = lonlat.split(" ")[0]; + const lat = lonlat.split(" ")[1]; + this.setCenter(lat, lng); + this.setMarker(lat, lng); reslove({ msg: "success", data: { @@ -221,15 +235,6 @@ export default function init(ele, position, params) { this.map.on(eventType, fn); } }; - - if (typeof ele == "string") { - ele = document.getElementById("app"); - } - let width = ele.offsetWidth; - let height = ele.offsetHeight; - if (height == 0) { - ele.style.height = width * 0.6 + "px"; - } } return this; diff --git a/src/views/modules/cpts/base/cpts/edit.vue b/src/views/modules/cpts/base/cpts/edit.vue index 9f184ada4..fbee77de3 100644 --- a/src/views/modules/cpts/base/cpts/edit.vue +++ b/src/views/modules/cpts/base/cpts/edit.vue @@ -624,7 +624,7 @@ export default { initMap(item) { let { latitude, longitude } = this.$store.state.user; - let map = new daiMap( + map = new daiMap( document.getElementById("app"), { latitude, longitude }, { @@ -635,7 +635,7 @@ export default { ); // 监听地图平移结束 - map.on("panend", (e) => { + map.on("moveend", (e) => { this.handleMoveCenter(item, e); }); // this.handleMoveCenter(item); @@ -645,8 +645,8 @@ export default { const { msg, data } = await map.searchNearby(this.fmData[item.keyName]); if (msg == "success") { const { lat, lng } = data; - map.setCenter(lat, lng); - map.setMarker(lat, lng); + // map.setCenter(lat, lng); + // map.setMarker(lat, lng); this.fmData[item.supKeys[0]] = lng; this.fmData[item.supKeys[1]] = lat; @@ -656,7 +656,7 @@ export default { }, async handleMoveCenter(item, e) { - console.log(e); + console.log("handleMoveCenter", e); //修改地图中心点 const { lat, lng } = map.getCenter(); // item.supValues[0] = lng; @@ -665,11 +665,9 @@ export default { this.fmData[item.supKeys[1]] = lat; map.setMarker(lat, lng); - if (e && e.originalEvent) { - let { msg, data } = await map.getAddress(lat, lng); - if (msg == "success") { - this.fmData[item.keyName] = data.address; - } + let { msg, data } = await map.getAddress(lat, lng); + if (msg == "success") { + this.fmData[item.keyName] = data.address; } }, @@ -701,7 +699,7 @@ export default { await nextTick(600); if (map) { if (data.latitude) { - map.setCenter(new TMap.LatLng(data.latitude, data.longitude)); + map.setCenter(data.latitude, data.longitude); } else { if (this.formType == "edit" && this.$refs && this.$refs.mapSearch) { this.$refs.mapSearch[0].handleClick(); From ec67ec68e07304f731336731d1b25cfc2a86a0dc Mon Sep 17 00:00:00 2001 From: dai <851733175@qq.com> Date: Fri, 21 Oct 2022 17:43:01 +0800 Subject: [PATCH 06/12] =?UTF-8?q?=E5=9F=BA=E6=9C=ACok?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/dai-map.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/dai-map.js b/src/utils/dai-map.js index 5896a6dc9..c138ffb6a 100644 --- a/src/utils/dai-map.js +++ b/src/utils/dai-map.js @@ -36,7 +36,7 @@ export default function init(ele, position, params) { }); this.markers = new QQMap.MultiMarker({ - map: map, + map: this.map, geometries: [], }); From 80180a24c767b2cf4c05a49f7428a473e9a7d66c Mon Sep 17 00:00:00 2001 From: dai <851733175@qq.com> Date: Mon, 24 Oct 2022 10:39:26 +0800 Subject: [PATCH 07/12] =?UTF-8?q?=E7=A4=BE=E5=8C=BA=E8=87=AA=E7=BB=84?= =?UTF-8?q?=E7=BB=87=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/dai-map.js | 17 +-- .../modules/communityService/dqfwzx/index.vue | 51 ++------ .../communityService/sqzzz/cpts/edit.vue | 110 +++++------------- src/views/modules/cpts/base/cpts/edit.vue | 8 +- 4 files changed, 55 insertions(+), 131 deletions(-) diff --git a/src/utils/dai-map.js b/src/utils/dai-map.js index c138ffb6a..ffcba7838 100644 --- a/src/utils/dai-map.js +++ b/src/utils/dai-map.js @@ -1,8 +1,9 @@ import nextTick from "dai-js/tools/nextTick"; +export const mapType = typeof window.TMap !== "undefined" ? "qq" : "td"; + // 封装了地图相关函数，兼容天地图、腾讯地图常用api export default function init(ele, position, params) { - const mapType = typeof window.TMap !== "undefined" ? "qq" : "td"; this.mapType = mapType; this.map = null; this.marker = null; @@ -14,7 +15,7 @@ export default function init(ele, position, params) { }; }; this.setCenter = function (lat, lng) {}; - this.setMarker = function (lat, lng) {}; + this.setMarker = function (lat, lng, title) {}; this.getAddress = async function (lat, lng) {}; this.searchNearby = async function (keyword) {}; this.on = function (eventType, fn) {}; @@ -51,7 +52,7 @@ export default function init(ele, position, params) { this.map.setCenter(new QQMap.LatLng(lat, lng)); }; - this.setMarker = function (lat, lng) { + this.setMarker = function (lat, lng, title = "位置") { this.markers.setGeometries([]); this.markers.add([ { @@ -59,7 +60,7 @@ export default function init(ele, position, params) { styleId: "marker", position: new QQMap.LatLng(lat, lng), properties: { - title: "marker4", + title, }, }, ]); @@ -103,8 +104,6 @@ export default function init(ele, position, params) { const { location: { lat, lng, address }, } = data[0]; - this.setCenter(lat, lng); - this.setMarker(lat, lng); reslove({ msg: "success", data: { @@ -159,10 +158,12 @@ export default function init(ele, position, params) { this.map.panTo(new TDMap.LngLat(lng, lat)); }; - this.setMarker = function (lat, lng) { + this.setMarker = function (lat, lng, title = "位置") { let lnglat = new TDMap.LngLat(lng, lat); if (!this.marker) { - this.marker = new TDMap.Marker(lnglat, {}); + this.marker = new TDMap.Marker(lnglat, { + title, + }); this.map.addOverLay(this.marker); } else { this.marker.setLngLat(lnglat); diff --git a/src/views/modules/communityService/dqfwzx/index.vue b/src/views/modules/communityService/dqfwzx/index.vue index 8173f6524..0ebe2dc7c 100644 --- a/src/views/modules/communityService/dqfwzx/index.vue +++ b/src/views/modules/communityService/dqfwzx/index.vue @@ -162,12 +162,9 @@ import { mapGetters } from "vuex"; import editForm from "./cpts/edit"; import orderForm from "./cpts/order"; import orderList from "./cpts/orderList"; +import daiMap from "@/utils/dai-map"; var map; -var search; -var markers; -var infoWindowList; -let loading; // 加载动画 export default { components: { editForm, orderForm, orderList }, @@ -207,49 +204,25 @@ export default { methods: { // 地图初始化函数，本例取名为init，开发者可根据实际情况定义 initMap() { - // 定义地图中心点坐标 - var center = new window.TMap.LatLng(36.0722275, 120.38945519); - // 定义map变量，调用 TMap.Map() 构造函数创建地图 - map = new window.TMap.Map(document.getElementById("centerIndexApp"), { - center: center, // 设置地图中心点坐标 - zoom: 17.2, // 设置地图缩放级别 - pitch: 43.5, // 设置俯仰角 - rotation: 45, // 设置地图旋转角度 - }); + let { latitude, longitude } = this.$store.state.user; - search = new window.TMap.service.Search({ pageSize: 10 }); - // 新建一个地点搜索类 - markers = new TMap.MultiMarker({ - map: map, - geometries: [], - }); - infoWindowList = Array(10); - }, - - setMarker(lat, lng, centerName) { - markers.setGeometries([]); - markers.add([ + map = new daiMap( + document.getElementById("centerIndexApp"), + { latitude, longitude }, { - id: "911", - styleId: "marker", - position: new TMap.LatLng(lat, lng), - properties: { - title: centerName, - }, - }, - ]); - }, - - setCenter(lat, lng) { - map.setCenter(new window.TMap.LatLng(lat, lng)); + zoom: 16.2, // 设置地图缩放级别 + pitch: 43.5, // 设置俯仰角 + rotation: 45, // 设置地图旋转角度 + } + ); }, setMap() { const { tableData, currentIndex } = this; let item = tableData[currentIndex]; if (item) { - this.setCenter(item.latitude, item.longitude); - this.setMarker(item.latitude, item.longitude, item.centerName); + map.setCenter(item.latitude, item.longitude); + map.setMarker(item.latitude, item.longitude, item.centerName); } }, diff --git a/src/views/modules/communityService/sqzzz/cpts/edit.vue b/src/views/modules/communityService/sqzzz/cpts/edit.vue index 01ba67f11..7ba58877d 100644 --- a/src/views/modules/communityService/sqzzz/cpts/edit.vue +++ b/src/views/modules/communityService/sqzzz/cpts/edit.vue @@ -251,6 +251,7 @@ import { Loading } from "element-ui"; // 引入Loading服务 import { requestPost } from "@/js/dai/request"; import formVltHelper from "dai-js/tools/formVltHelper"; import nextTick from "dai-js/tools/nextTick"; +import daiMap from "@/utils/dai-map"; var map; var search; @@ -390,100 +391,51 @@ export default { organizationPersonnel.splice(index, 1); this.dataForm.organizationPersonnel = organizationPersonnel; }, + // 地图初始化函数，本例取名为init，开发者可根据实际情况定义 initMap() { let { latitude, longitude } = this.$store.state.user; - if (!latitude || latitude == "" || latitude == "0") { - latitude = 39.9088810666821; - longitude = 116.39743841556731; - } - // 定义地图中心点坐标 - var center = new window.TMap.LatLng(latitude, longitude); - // 定义map变量，调用 TMap.Map() 构造函数创建地图 - map = new window.TMap.Map(document.getElementById("app"), { - center: center, // 设置地图中心点坐标 - zoom: 16.2, // 设置地图缩放级别 - pitch: 43.5, // 设置俯仰角 - rotation: 45, // 设置地图旋转角度 - }); - - search = new window.TMap.service.Search({ pageSize: 10 }); - // 新建一个地点搜索类 - markers = new TMap.MultiMarker({ - map: map, - geometries: [], - }); - infoWindowList = Array(10); - geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类 + map = new daiMap( + document.getElementById("app"), + { latitude, longitude }, + { + zoom: 16.2, // 设置地图缩放级别 + pitch: 43.5, // 设置俯仰角 + rotation: 45, // 设置地图旋转角度 + } + ); // 监听地图平移结束 - map.on("panend", (e) => { + map.on("moveend", (e) => { this.handleMoveCenter(e); }); - // this.handleMoveCenter(); }, - setMarker(lat, lng) { - markers.setGeometries([]); - markers.add([ - { - id: "4", - styleId: "marker", - position: new TMap.LatLng(lat, lng), - properties: { - title: "marker4", - }, - }, - ]); - }, - - handleSearchMap() { - infoWindowList.forEach((infoWindow) => { - infoWindow.close(); - }); - infoWindowList.length = 0; - markers.setGeometries([]); - // 在地图显示范围内以给定的关键字搜索地点 - search - .searchNearby({ - keyword: this.dataForm.address, - radius: 1000, - autoExtend: true, - center: map.getCenter(), - }) - .then((result) => { - let { data } = result; - if (Array.isArray(data) && data.length > 0) { - const { - location: { lat, lng }, - } = data[0]; - map.setCenter(new TMap.LatLng(lat, lng)); - this.setMarker(lat, lng); - this.dataForm.latitude = lat; - this.dataForm.longitude = lng; - } else { - this.$message.error("未检索到相关位置坐标"); - } - }); + async handleSearchMap() { + const { msg, data } = await map.searchNearby(this.dataForm.address); + if (msg == "success") { + const { lat, lng } = data; + map.setCenter(lat, lng); + map.setMarker(lat, lng); + this.dataForm.latitude = lat; + this.dataForm.longitude = lng; + } else { + this.$message.error("未检索到相关位置坐标"); + } }, - handleMoveCenter(e) { - console.log(e); + async handleMoveCenter(e) { + console.log("handleMoveCenter", e); //修改地图中心点 - const center = map.getCenter(); - const lat = center.getLat(); - const lng = center.getLng(); + const { lat, lng } = map.getCenter(); this.dataForm.latitude = lat; this.dataForm.longitude = lng; - this.setMarker(lat, lng); + map.setMarker(lat, lng); - if (e && e.originalEvent) { - geocoder - .getAddress({ location: new TMap.LatLng(lat, lng) }) // 将给定的坐标位置转换为地址 - .then((result) => { - this.dataForm.address = result.result.address; - }); + let { msg, data } = await map.getAddress(lat, lng); + if (msg == "success") { + this.dataForm.address = data.address; } }, @@ -498,7 +450,7 @@ export default { await nextTick(800); if (map) { - map.setCenter(new TMap.LatLng(row.latitude, row.longitude)); + map.setCenter(row.latitude, row.longitude); } } }, diff --git a/src/views/modules/cpts/base/cpts/edit.vue b/src/views/modules/cpts/base/cpts/edit.vue index fbee77de3..554c29191 100644 --- a/src/views/modules/cpts/base/cpts/edit.vue +++ b/src/views/modules/cpts/base/cpts/edit.vue @@ -645,9 +645,8 @@ export default { const { msg, data } = await map.searchNearby(this.fmData[item.keyName]); if (msg == "success") { const { lat, lng } = data; - // map.setCenter(lat, lng); - // map.setMarker(lat, lng); - + map.setCenter(lat, lng); + map.setMarker(lat, lng); this.fmData[item.supKeys[0]] = lng; this.fmData[item.supKeys[1]] = lat; } else { @@ -659,8 +658,7 @@ export default { console.log("handleMoveCenter", e); //修改地图中心点 const { lat, lng } = map.getCenter(); - // item.supValues[0] = lng; - // item.supValues[1] = lat; + this.fmData[item.supKeys[0]] = lng; this.fmData[item.supKeys[1]] = lat; map.setMarker(lat, lng); From 7c3ba105f0696e2d1b0eb5d24840937adc1cfa27 Mon Sep 17 00:00:00 2001 From: dai <851733175@qq.com> Date: Mon, 24 Oct 2022 11:05:10 +0800 Subject: [PATCH 08/12] =?UTF-8?q?demo=E5=AE=8C=E5=96=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/dai-map.js | 18 +++++++++++++++--- .../communityService/sqzzz/cpts/edit.vue | 4 ++-- src/views/modules/cpts/base/cpts/edit.vue | 3 ++- 3 files changed, 19 insertions(+), 6 deletions(-) diff --git a/src/utils/dai-map.js b/src/utils/dai-map.js index ffcba7838..156963f64 100644 --- a/src/utils/dai-map.js +++ b/src/utils/dai-map.js @@ -129,7 +129,16 @@ export default function init(ele, position, params) { }; this.on = function (eventType, fn) { - this.map.on(eventType, fn); + if (eventType == "dragend") { + this.map.on("moveend", (e) => { + console.log("dragend", e); + if (e && e.originalEvent) { + fn(e); + } + }); + } else { + this.map.on(eventType, fn); + } }; } else { if (typeof ele == "string") { @@ -230,8 +239,11 @@ export default function init(ele, position, params) { }; this.on = function (eventType, fn) { - if (eventType == "panend") { - this.map.on("dragend", fn); + if (eventType == "dragend") { + this.map.on("dragend", (e) => { + console.log("dragend", e); + fn(e); + }); } else { this.map.on(eventType, fn); } diff --git a/src/views/modules/communityService/sqzzz/cpts/edit.vue b/src/views/modules/communityService/sqzzz/cpts/edit.vue index 7ba58877d..d18430a0b 100644 --- a/src/views/modules/communityService/sqzzz/cpts/edit.vue +++ b/src/views/modules/communityService/sqzzz/cpts/edit.vue @@ -407,7 +407,7 @@ export default { ); // 监听地图平移结束 - map.on("moveend", (e) => { + map.on("dragend", (e) => { this.handleMoveCenter(e); }); }, @@ -426,7 +426,6 @@ export default { }, async handleMoveCenter(e) { - console.log("handleMoveCenter", e); //修改地图中心点 const { lat, lng } = map.getCenter(); this.dataForm.latitude = lat; @@ -451,6 +450,7 @@ export default { await nextTick(800); if (map) { map.setCenter(row.latitude, row.longitude); + map.setMarker(row.latitude, row.longitude); } } }, diff --git a/src/views/modules/cpts/base/cpts/edit.vue b/src/views/modules/cpts/base/cpts/edit.vue index 554c29191..972d079d4 100644 --- a/src/views/modules/cpts/base/cpts/edit.vue +++ b/src/views/modules/cpts/base/cpts/edit.vue @@ -635,7 +635,7 @@ export default { ); // 监听地图平移结束 - map.on("moveend", (e) => { + map.on("dragend", (e) => { this.handleMoveCenter(item, e); }); // this.handleMoveCenter(item); @@ -698,6 +698,7 @@ export default { if (map) { if (data.latitude) { map.setCenter(data.latitude, data.longitude); + map.setMarker(data.latitude, data.longitude); } else { if (this.formType == "edit" && this.$refs && this.$refs.mapSearch) { this.$refs.mapSearch[0].handleClick(); From de79447bd6179a393b1b82e72d82e6d0b8b7a9c4 Mon Sep 17 00:00:00 2001 From: dai <851733175@qq.com> Date: Mon, 24 Oct 2022 14:31:18 +0800 Subject: [PATCH 09/12] no message --- src/utils/dai-map.js | 165 +++++++++--------- src/views/modules/visual/command/cpts/map.vue | 120 +++++++++---- 2 files changed, 175 insertions(+), 110 deletions(-) diff --git a/src/utils/dai-map.js b/src/utils/dai-map.js index 156963f64..dd608e902 100644 --- a/src/utils/dai-map.js +++ b/src/utils/dai-map.js @@ -2,6 +2,85 @@ import nextTick from "dai-js/tools/nextTick"; export const mapType = typeof window.TMap !== "undefined" ? "qq" : "td"; +export const QQMap = window.TMap; +export const TDMap = window.T; + +export function searchNearby(map, keyword) { + if (mapType == "qq") { + return new Promise((reslove) => { + const search = new QQMap.service.Search(map, { pageSize: 10 }); + search + .searchNearby({ + keyword, + radius: 1000, + autoExtend: true, + center: map.getCenter(), + }) + .then((result) => { + let { data } = result; + if (Array.isArray(data) && data.length > 0) { + const { + location: { lat, lng, address }, + } = data[0]; + reslove({ + msg: "success", + data: { + lng, + lat, + address, + data, + }, + }); + } else { + reslove({ + msg: "failed", + error: "未检索到相关位置坐标", + }); + } + }) + .catch((error) => { + reslove({ + msg: "failed", + error, + }); + }); + }); + } else { + return new Promise(async (reslove) => { + const search = new TDMap.LocalSearch(map, { pageCapacity: 10 }); + search.setQueryType(1); + search.searchNearby(keyword, map.getCenter(), 1000000000); + + await nextTick(1000); + + const result = search.getResults(); + const data = result ? result.getPois() : null; + + console.log("检索结果", data); + + if (Array.isArray(data) && data.length > 0) { + const { lonlat, address, name } = data[0]; + const lng = lonlat.split(" ")[0]; + const lat = lonlat.split(" ")[1]; + reslove({ + msg: "success", + data: { + lng, + lat, + address: address + name, + data, + }, + }); + } else { + reslove({ + msg: "failed", + error: "未检索到相关位置坐标", + }); + } + }); + } +} + // 封装了地图相关函数，兼容天地图、腾讯地图常用api export default function init(ele, position, params) { this.mapType = mapType; @@ -17,12 +96,8 @@ export default function init(ele, position, params) { this.setCenter = function (lat, lng) {}; this.setMarker = function (lat, lng, title) {}; this.getAddress = async function (lat, lng) {}; - this.searchNearby = async function (keyword) {}; this.on = function (eventType, fn) {}; - const QQMap = window.TMap; - const TDMap = window.T; - let { latitude, longitude } = position; if (!latitude || latitude == "" || latitude == "0") { latitude = 39.9088810666821; @@ -88,46 +163,6 @@ export default function init(ele, position, params) { }); }; - this.search = new QQMap.service.Search(this.map, { pageSize: 10 }); - this.searchNearby = async function (keyword) { - return new Promise((reslove) => { - this.search - .searchNearby({ - keyword, - radius: 1000, - autoExtend: true, - center: this.map.getCenter(), - }) - .then((result) => { - let { data } = result; - if (Array.isArray(data) && data.length > 0) { - const { - location: { lat, lng, address }, - } = data[0]; - reslove({ - msg: "success", - data: { - lng, - lat, - address, - }, - }); - } else { - reslove({ - msg: "failed", - error: "未检索到相关位置坐标", - }); - } - }) - .catch((error) => { - reslove({ - msg: "failed", - error, - }); - }); - }); - }; - this.on = function (eventType, fn) { if (eventType == "dragend") { this.map.on("moveend", (e) => { @@ -202,42 +237,6 @@ export default function init(ele, position, params) { }); }; - this.search = new TDMap.LocalSearch(this.map, { pageCapacity: 10 }); - this.searchNearby = async function (keyword) { - return new Promise(async (reslove) => { - this.search.setQueryType(1); - this.search.searchNearby(keyword, this.map.getCenter(), 1000000000); - - await nextTick(1000); - - const result = this.search.getResults(); - const data = result ? result.getPois() : null; - - console.log("检索结果", data); - - if (Array.isArray(data) && data.length > 0) { - const { lonlat, address, name } = data[0]; - const lng = lonlat.split(" ")[0]; - const lat = lonlat.split(" ")[1]; - this.setCenter(lat, lng); - this.setMarker(lat, lng); - reslove({ - msg: "success", - data: { - lng, - lat, - address: address + name, - }, - }); - } else { - reslove({ - msg: "failed", - error: "未检索到相关位置坐标", - }); - } - }); - }; - this.on = function (eventType, fn) { if (eventType == "dragend") { this.map.on("dragend", (e) => { @@ -250,5 +249,11 @@ export default function init(ele, position, params) { }; } + this.searchNearby = async function (keyword) { + const ret = await searchNearby(this.map, keyword); + + return ret; + }; + return this; } diff --git a/src/views/modules/visual/command/cpts/map.vue b/src/views/modules/visual/command/cpts/map.vue index e49ce08f1..453832394 100644 --- a/src/views/modules/visual/command/cpts/map.vue +++ b/src/views/modules/visual/command/cpts/map.vue @@ -31,9 +31,11 @@ import { PointLayer, Marker, Popup, + RasterLayer, } from "@antv/l7"; import { GaodeMap, Map } from "@antv/l7-maps"; import { spliceIntoChunks } from "@/utils/index"; +import { mapType, searchNearby } from "@/utils/dai-map"; let myMap; let scene; @@ -327,23 +329,32 @@ export default { styleConfig = lightStyle; } - myMap = new GaodeMap({ - pitch: this.pitch, - style: styleConfig.style, - center: [ - srcGridData.longitude || - this.$store.state.user.longitude || - 116.39743841556731, - srcGridData.latitude || - this.$store.state.user.latitude || - 39.9088810666821, - ], - token: "fc14b42e0ca18387866d68ebd4f150c1", - zoom: 18, - isHotspot: false, - resizeEnable: true, - doubleClickZoom: false, - }); + const iniCenter = [ + srcGridData.longitude || + this.$store.state.user.longitude || + 116.39743841556731, + srcGridData.latitude || + this.$store.state.user.latitude || + 39.9088810666821, + ]; + + if (mapType == "td") { + myMap = new Map({ + center: iniCenter, + zoom: 18, + }); + } else { + myMap = new GaodeMap({ + pitch: this.pitch, + style: styleConfig.style, + center: iniCenter, + token: "fc14b42e0ca18387866d68ebd4f150c1", + zoom: 18, + isHotspot: false, + resizeEnable: true, + doubleClickZoom: false, + }); + } scene = new Scene({ id: "map", @@ -352,6 +363,10 @@ export default { }); scene.on("loaded", async () => { + if (mapType == "td") { + this.iniMapBase(scene); + } + this.iniMapGrid(scene); this.iniMapDot(scene); this.iniMapDot2(scene); @@ -360,6 +375,46 @@ export default { }); }, + // 初始化底图 + iniMapBase(scene) { + // 底图服务 + const baseLayer = new RasterLayer({ + zIndex: 1, + }); + baseLayer.source( + "http://t4.tianditu.com/DataServer?T=vec_w&tk=8a08c117ab9ee45d508686b01cc8d397&x={x}&y={y}&l={z}", + { + parser: { + type: "rasterTile", + tileSize: 256, + // minZoom: 6, + // maxZoom: 15, + zoomOffset: 0, + }, + } + ); + + // 注记服务 + const annotionLayer = new RasterLayer({ + zIndex: 2, + }); + annotionLayer.source( + "https://t4.tianditu.com/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk=8a08c117ab9ee45d508686b01cc8d397", + { + parser: { + type: "rasterTile", + tileSize: 256, + // minZoom: 6, + // maxZoom: 15, + zoomOffset: 0, + }, + } + ); + + scene.addLayer(baseLayer); + scene.addLayer(annotionLayer); + }, + iniMapGrid(scene) { const { darkStyle, lightStyle, polygonData, polygonDotData } = this; @@ -806,20 +861,25 @@ export default { }, searchPos(name) { - return new Promise((reslove) => { - window.AMap.plugin("AMap.PlaceSearch", () => { - const city = this.$store.state.user.areaCodePath[1] || "全国"; - console.log("搜索区域", city); - // 实例化Autocomplete - let autoOptions = { - //city 限定城市，默认全国 - city, - }; - let autoComplete = new window.AMap.PlaceSearch(autoOptions); - autoComplete.search(name, function (status, result) { - reslove(result); + console.log("=----------------------=searchPos", name); + return new Promise(async (reslove) => { + if (mapType == "td") { + reslove([]); + } else { + window.AMap.plugin("AMap.PlaceSearch", () => { + const city = this.$store.state.user.areaCodePath[1] || "全国"; + console.log("搜索区域", city); + // 实例化Autocomplete + let autoOptions = { + //city 限定城市，默认全国 + city, + }; + let autoComplete = new window.AMap.PlaceSearch(autoOptions); + autoComplete.search(name, function (status, result) { + reslove(result); + }); }); - }); + } }); }, }, From 07a761374d5ab9106a9432535d3952270a10302a Mon Sep 17 00:00:00 2001 From: dai <851733175@qq.com> Date: Mon, 24 Oct 2022 14:34:17 +0800 Subject: [PATCH 10/12] 11 --- src/utils/dai-map.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/utils/dai-map.js b/src/utils/dai-map.js index dd608e902..712bc5b4d 100644 --- a/src/utils/dai-map.js +++ b/src/utils/dai-map.js @@ -28,7 +28,7 @@ export function searchNearby(map, keyword) { lng, lat, address, - data, + resultList: data, }, }); } else { @@ -68,7 +68,7 @@ export function searchNearby(map, keyword) { lng, lat, address: address + name, - data, + resultList: data, }, }); } else { From 65e4044b272a401d20944072ff38680b68524875 Mon Sep 17 00:00:00 2001 From: jiangyy Date: Mon, 24 Oct 2022 14:57:49 +0800 Subject: [PATCH 11/12] =?UTF-8?q?=E7=A4=BE=E5=8C=BA=E8=87=AA=E7=BB=84?= =?UTF-8?q?=E7=BB=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../communityService/sqzzz/cpts/edit.vue | 535 ++++++++++-------- .../modules/shequzhili/event/cpts/add.vue | 219 +++---- 2 files changed, 361 insertions(+), 393 deletions(-) diff --git a/src/views/modules/communityService/sqzzz/cpts/edit.vue b/src/views/modules/communityService/sqzzz/cpts/edit.vue index d18430a0b..a7302d375 100644 --- a/src/views/modules/communityService/sqzzz/cpts/edit.vue +++ b/src/views/modules/communityService/sqzzz/cpts/edit.vue @@ -1,246 +1,217 @@ @@ -263,10 +234,15 @@ var geocoder; // 新建一个正逆地址解析类 export default { components: {}, props: {}, - data() { + data () { return { formType: "add", //表单操作类型 add新增，edit编辑，detail详情 + searchOptions: [], + searchValue: '', + resultList: [], + loading: false, + btnDisable: false, orgId: "", @@ -289,7 +265,7 @@ export default { }; }, computed: { - dataRule() { + dataRule () { return { organizationName: [ { required: true, message: "组织名称 不能为空", trigger: "blur" }, @@ -324,25 +300,67 @@ export default { }, watch: {}, - async mounted() { + async mounted () { this.getCategoryList(); this.getVolunteerList(); - this.initMap(); + }, methods: { - querySearchVolunteer(queryString, cb) { + + async remoteMethod (query) { + + if (query !== '') { + this.loading = true; + + const { msg, data } = await map.searchNearby(query); + this.loading = false; + this.resultList = [] + + if (msg == "success" && data.resultList && data.resultList.length > 0) { + + if (data.resultList && data.resultList.length > 0) { + this.resultList = data.resultList + this.searchOptions = this.resultList.map(item => { + return { value: `${item.hotPointID}`, label: `${item.address + item.name}` }; + + }); + } + } else { + this.searchOptions = [ + { + value: '0', + label: '未检索到结果' + } + ] + } + } else { + this.searchOptions = []; + } + }, + + handleClickKey (index) { + let selPosition = this.resultList[index] + let lonlat = selPosition.lonlat.split(" ") + map.setCenter(lonlat[1], lonlat[0]); + map.setMarker(lonlat[1], lonlat[0]); + this.dataForm.latitude = lonlat[0]; + this.dataForm.longitude = lonlat[1]; + this.dataForm.address = selPosition.address + selPosition.name + }, + + querySearchVolunteer (queryString, cb) { const { volunteerList } = this; var results = queryString ? volunteerList.filter((item) => { - return item.value.indexOf(queryString) !== -1; - }) + return item.value.indexOf(queryString) !== -1; + }) : volunteerList; // 调用 callback 返回建议列表的数据 cb(results); }, - handleSelectVolunteer(index, vItem) { + handleSelectVolunteer (index, vItem) { this.dataForm.organizationPersonnel[index] = { personName: vItem.name, personPhone: vItem.mobile, @@ -350,7 +368,7 @@ export default { }; }, - async getVolunteerList() { + async getVolunteerList () { const url = "/epmetuser/icresiuser/volunteer-list"; const params = {}; const { data, code, msg } = await requestPost(url, params); @@ -368,7 +386,7 @@ export default { } }, - async getCategoryList() { + async getCategoryList () { const url = "/sys/dict/data/dictlist"; const params = { dictType: "self_org_category", @@ -380,21 +398,42 @@ export default { this.$message.error(msg); } }, - handleAddStaff() { + handleAddStaff () { this.dataForm.organizationPersonnel = [ ...this.dataForm.organizationPersonnel, { personName: "", personPhone: "", icResiUserId: "" }, ]; }, - handleDelStaff(index) { + handleDelStaff (index) { const { organizationPersonnel } = this.dataForm; organizationPersonnel.splice(index, 1); this.dataForm.organizationPersonnel = organizationPersonnel; }, - // 地图初始化函数，本例取名为init，开发者可根据实际情况定义 - initMap() { + async initForm (type, row) { + this.$refs.ref_form.resetFields(); + + this.formType = type; + console.log(row); + let { latitude, longitude } = this.$store.state.user; + if (row) { + this.dataForm = { ...this.dataForm, ...row }; + this.orgId = this.dataForm.orgId; + + } else { + this.dataForm.latitude = latitude + this.dataForm.longitude = longitude + } + if (!map) { + this.initMap(this.dataForm.latitude, this.dataForm.longitude); + } + + + }, + + // 地图初始化函数，本例取名为init，开发者可根据实际情况定义 + initMap (latitude, longitude) { map = new daiMap( document.getElementById("app"), @@ -410,22 +449,27 @@ export default { map.on("dragend", (e) => { this.handleMoveCenter(e); }); - }, - async handleSearchMap() { - const { msg, data } = await map.searchNearby(this.dataForm.address); - if (msg == "success") { - const { lat, lng } = data; - map.setCenter(lat, lng); - map.setMarker(lat, lng); - this.dataForm.latitude = lat; - this.dataForm.longitude = lng; - } else { - this.$message.error("未检索到相关位置坐标"); - } + map.setCenter(latitude, longitude); + map.setMarker(latitude, longitude); + }, - async handleMoveCenter(e) { + // async handleSearchMap () { + // const { msg, data } = await map.searchNearby(this.keyWords); + // if (msg == "success") { + // const { lat, lng } = data; + // map.setCenter(lat, lng); + // map.setMarker(lat, lng); + // this.dataForm.latitude = lat; + // this.dataForm.longitude = lng; + // this.handleMoveCenter() + // } else { + // this.$message.error("未检索到相关位置坐标"); + // } + // }, + + async handleMoveCenter () { //修改地图中心点 const { lat, lng } = map.getCenter(); this.dataForm.latitude = lat; @@ -434,28 +478,16 @@ export default { let { msg, data } = await map.getAddress(lat, lng); if (msg == "success") { - this.dataForm.address = data.address; + this.dataForm.address = data.address + this.searchValue = data.address + this.searchOptions = [] + } }, - async initForm(type, row) { - this.$refs.ref_form.resetFields(); - - this.formType = type; - console.log(row); - if (row) { - this.dataForm = { ...this.dataForm, ...row }; - this.orgId = this.dataForm.orgId; - await nextTick(800); - if (map) { - map.setCenter(row.latitude, row.longitude); - map.setMarker(row.latitude, row.longitude); - } - } - }, - async handleComfirm() { + async handleComfirm () { this.btnDisable = true; setTimeout(() => { this.btnDisable = false; @@ -488,7 +520,7 @@ export default { }); }, - async submit() { + async submit () { let url = ""; if (this.formType === "add") { url = "/heart/iccommunityselforganization/addcommunityselforganization"; @@ -516,11 +548,16 @@ export default { } }, - handleCancle() { + handleCancle () { this.resetData(); this.$emit("dialogCancle"); }, - resetData() { + resetData () { + + this.searchValue = '' + this.searchOptions = [] + this.resultList = [] + this.orgId = ""; this.dataForm = { organizationName: "", @@ -538,7 +575,7 @@ export default { }; }, // 开启加载动画 - startLoading() { + startLoading () { loading = Loading.service({ lock: true, // 是否锁定 text: "正在加载……", // 加载中需要显示的文字 @@ -546,7 +583,7 @@ export default { }); }, // 结束加载动画 - endLoading() { + endLoading () { // clearTimeout(timer); if (loading) { loading.close(); diff --git a/src/views/modules/shequzhili/event/cpts/add.vue b/src/views/modules/shequzhili/event/cpts/add.vue index b3dd77459..0219f9df8 100644 --- a/src/views/modules/shequzhili/event/cpts/add.vue +++ b/src/views/modules/shequzhili/event/cpts/add.vue @@ -143,36 +143,35 @@ label-width="150px" style="display: block">
-
-
-
- - - 查询 -
-
- - + + + 查询 +
+
@@ -238,7 +237,7 @@ import { Loading } from "element-ui"; // 引入Loading服务 import { requestPost } from "@/js/dai/request"; import formVltHelper from "dai-js/tools/formVltHelper"; - +import daiMap from "@/utils/dai-map"; import { isCard } from "@/utils/validate"; let loading; // 加载动画 @@ -388,6 +387,7 @@ export default { async mounted () { const { user } = this.$store.state; this.agencyId = user.agencyId; + let { latitude, longitude } = this.$store.state.user; if (!latitude || latitude == "" || latitude == "0") { latitude = 39.9088810666821; @@ -398,6 +398,10 @@ export default { this.formData.longitude = longitude; this.initMap(); + map.setCenter(this.formData.latitude, this.formData.longitude); + map.setMarker(this.formData.latitude, this.formData.longitude); + this.handleMoveCenter() + this.loadGrid(); this.getCategoryList(); }, @@ -567,126 +571,47 @@ export default { // 地图初始化函数，本例取名为init，开发者可根据实际情况定义 initMap () { - // 定义地图中心点坐标 - var center = new window.TMap.LatLng( - this.formData.latitude, - this.formData.longitude - ); - // 定义map变量，调用 TMap.Map() 构造函数创建地图 - map = new window.TMap.Map(document.getElementById("app"), { - center: center, // 设置地图中心点坐标 - zoom: 16.2, // 设置地图缩放级别 - pitch: 43.5, // 设置俯仰角 - rotation: 45, // 设置地图旋转角度 - }); - - search = new window.TMap.service.Search({ pageSize: 10 }); - // 新建一个地点搜索类 - markers = new TMap.MultiMarker({ - map: map, - geometries: [], - }); - infoWindowList = Array(10); + let { latitude, longitude } = this.$store.state.user; - geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类 + map = new daiMap( + document.getElementById("map_event"), + { latitude, longitude }, + { + zoom: 16.2, // 设置地图缩放级别 + pitch: 43.5, // 设置俯仰角 + rotation: 45, // 设置地图旋转角度 + } + ); // 监听地图平移结束 - map.on("panend", () => { - this.handleMoveCenter(); + map.on("dragend", (e) => { + this.handleMoveCenter(e); }); - this.handleMoveCenter(); - // this.convert() }, - - setMarker (lat, lng) { - markers.setGeometries([]); - markers.add([ - { - id: "4", - styleId: "marker", - position: new TMap.LatLng(lat, lng), - properties: { - title: "marker4", - }, - }, - ]); - }, - - handleSearchMap () { - infoWindowList.forEach((infoWindow) => { - infoWindow.close(); - }); - infoWindowList.length = 0; - markers.setGeometries([]); - // 在地图显示范围内以给定的关键字搜索地点 - search - .searchNearby({ - keyword: this.keyWords, - radius: 1000, - autoExtend: true, - center: map.getCenter(), - }) - .then((result) => { - let { data } = result; - if (Array.isArray(data) && data.length > 0) { - const { - location: { lat, lng }, - } = data[0]; - - map.setCenter(new TMap.LatLng(lat, lng)); - this.setMarker(lat, lng); - this.formData.latitude = lat; - this.formData.longitude = lng; - this.convert(); - } else { - this.$message.error("未检索到相关位置坐标"); - } - }); + async handleSearchMap () { + const { msg, data } = await map.searchNearby(this.formData.address); + if (msg == "success") { + const { lat, lng } = data; + map.setCenter(lat, lng); + map.setMarker(lat, lng); + this.formData.latitude = lat; + this.formData.longitude = lng; + } else { + this.$message.error("未检索到相关位置坐标"); + } }, - handleMoveCenter () { + async handleMoveCenter (e) { //修改地图中心点 - const center = map.getCenter(); - const lat = center.getLat(); - const lng = center.getLng(); + const { lat, lng } = map.getCenter(); this.formData.latitude = lat; this.formData.longitude = lng; - this.setMarker(lat, lng); - this.convert(lat, lng); - }, + map.setMarker(lat, lng); - convert (lat, lng) { - markers.setGeometries([]); - // var input = document.getElementById('location').value.split(','); - let location; - if (lat && lng) { - location = new TMap.LatLng(lat, lng); - } else { - location = new TMap.LatLng( - this.formData.latitude, - this.formData.longitude - ); + let { msg, data } = await map.getAddress(lat, lng); + if (msg == "success") { + this.formData.address = data.address; } - - // map.setCenter(location); - markers.updateGeometries([ - { - id: "main", // 点标注数据数组 - position: location, - }, - ]); - geocoder - .getAddress({ location: location }) // 将给定的坐标位置转换为地址 - .then((result) => { - if (!this.isFirst) { - //再次查询时再赋值 - this.formData.address = result.result.address; - } - - if (this.isFirst) { - this.isFirst = false; - } - }); }, resetData () { @@ -711,11 +636,17 @@ export default { }, }; - +