From 47006059d7ac3e3de30aba02a4d0375074f79407 Mon Sep 17 00:00:00 2001 From: dai <851733175@qq.com> Date: Mon, 31 Oct 2022 17:48:41 +0800 Subject: [PATCH] =?UTF-8?q?=E7=94=A8ol=E5=81=9A=E4=BA=86=E4=B8=80=E4=B8=AA?= =?UTF-8?q?demo=EF=BC=8C=E6=94=B9=E4=BA=86=E4=B8=80=E4=B8=AAbug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/dai-map.js | 15 +- src/views/modules/cpts/base/cpts/edit.vue | 561 +++++---- .../modules/visual/command/cpts/map-ol.vue | 1081 +++++++++++++++++ src/views/modules/visual/command/cpts/map.vue | 20 - src/views/modules/visual/command/index.vue | 4 +- src/views/modules/workSys/mapConfig.vue | 51 +- 6 files changed, 1414 insertions(+), 318 deletions(-) create mode 100644 src/views/modules/visual/command/cpts/map-ol.vue diff --git a/src/utils/dai-map.js b/src/utils/dai-map.js index 785c521f8..0edd0fa9c 100644 --- a/src/utils/dai-map.js +++ b/src/utils/dai-map.js @@ -40,7 +40,8 @@ export function searchNearby(map, keyword) { let { data } = result; if (Array.isArray(data) && data.length > 0) { const { - location: { lat, lng, address }, + location: { lat, lng }, + address, } = data[0]; reslove({ msg: "success", @@ -48,7 +49,11 @@ export function searchNearby(map, keyword) { lng, lat, address, - resultList: data, + resultList: data.map((item) => { + item.lonlat = lng + " " + lat; + item.name = item.name || ""; + return item; + }), }, }); } else { @@ -124,7 +129,11 @@ export function searchNearby(map, keyword) { lng, lat, address: address + name, - resultList: result.features, + resultList: result.features.map((item) => { + item.lonlat = lng + " " + lat; + item.name = item.name || ""; + return item; + }), }, }); } else { diff --git a/src/views/modules/cpts/base/cpts/edit.vue b/src/views/modules/cpts/base/cpts/edit.vue index 61b36ae4f..77ef87175 100644 --- a/src/views/modules/cpts/base/cpts/edit.vue +++ b/src/views/modules/cpts/base/cpts/edit.vue @@ -1,209 +1,238 @@ @@ -384,12 +426,9 @@ export default { }, }, - data () { + data() { return { iniLoaded: false, - searchOptions: [], - searchValue: '', - resultList: [], loading: false, btnDisable: false, @@ -401,25 +440,27 @@ export default { uploadUrl: window.SITE_CONFIG["apiURL"] + "/oss/file/uploadqrcodeV2", customerId: localStorage.getItem("customerId"), - addressItem: {} + // 做搜索地址用 + searchAddressOptions: [], + searchAddressKeyword: "", }; }, computed: {}, watch: { editParams: { - handler () { + handler() { this.computeFmData(); }, deep: true, }, }, - async mounted () { + async mounted() { this.initForm(); }, methods: { - async initForm () { + async initForm() { this.iniFmData(); if (this.formId && this.formType != "add") { @@ -427,11 +468,11 @@ export default { } }, - computeFmData () { + computeFmData() { console.log(this.fmData); }, - iniFmData () { + iniFmData() { const { editParams, fmData, editParamsDiv } = this; editParams.forEach((item, index) => { if (typeof item.value == "function") { @@ -487,7 +528,6 @@ export default { this.$nextTick(async () => { await nextTick(300); - this.addressItem = item this.initMap(item); }); } @@ -504,7 +544,7 @@ export default { this.iniLoaded = true; }, - handleClickHtmlNode (e) { + handleClickHtmlNode(e) { //在判断事件目标节点的时候，考虑到兼容性应该统一转换成大写或小写进行判断 if (e.target.localName.toLowerCase() === "a") { // 通过判端目标节点以后，就能在这里对其进行操作啦。 @@ -513,7 +553,7 @@ export default { } }, - async getFmOptions (index, url, params, cookFn) { + async getFmOptions(index, url, params, cookFn) { const { data, code, msg } = await requestPost(url, { ...params, }); @@ -526,13 +566,13 @@ export default { } }, - handleChangeCascader (vals, item) { + handleChangeCascader(vals, item) { this.fmData[item["keyName"]] = vals; if (typeof item.handleChangeFn == "function") { item.handleChangeFn(vals, item, this); } }, - handleChangeSelect (vals, item) { + handleChangeSelect(vals, item) { console.log(vals, item); this.fmData[item["keyName"]] = vals; if (typeof item.handleChangeFn == "function") { @@ -540,14 +580,14 @@ export default { } }, - beforeImgUpload (file, item) { + beforeImgUpload(file, item) { if (typeof item.beforeImgUpload == "function") { if (!item.beforeImgUpload(file, item, this)) return false; } return true; }, - handleImgRemove (file, item) { + handleImgRemove(file, item) { console.log("handleImgRemove", file); let url = file.response ? file.response.data.url : file.url; if (url) { @@ -569,7 +609,7 @@ export default { } }, - handleImgExceed (res, item) { + handleImgExceed(res, item) { console.log(res); // this.$message({ // type: "warning", @@ -577,7 +617,7 @@ export default { // }); }, - handleImgSuccess (res, file, item) { + handleImgSuccess(res, file, item) { console.log("handleImgSuccess", res); if (res.code === 0 && res.msg === "success") { let { fmData } = this; @@ -613,12 +653,12 @@ export default { } }, - handleImgError (res, file, item) { + handleImgError(res, file, item) { console.log(res); }, // 地图初始化函数，本例取名为init，开发者可根据实际情况定义 - initMap (item) { + initMap(item) { let { latitude, longitude } = this.$store.state.user; map = new daiMap( @@ -639,9 +679,7 @@ export default { map.setMarker(latitude, longitude); }, - - - async handleSearchMap (item) { + async handleSearchMap(item) { const { msg, data } = await map.searchNearby(this.fmData[item.keyName]); if (msg == "success") { const { lat, lng } = data; @@ -654,72 +692,63 @@ export default { } }, - async handleMoveCenter (item, e) { + async handleMoveCenter(item, e) { console.log("handleMoveCenter", e); //修改地图中心点 const { lat, lng } = map.getCenter(); - this.fmData[item.supKeys[0]] = lng; - this.fmData[item.supKeys[1]] = lat; + this.fmData[item.supKeys[0]] = parseFloat(lng); + this.fmData[item.supKeys[1]] = parseFloat(lat); map.setMarker(lat, lng); let { msg, data } = await map.getAddress(lat, lng); if (msg == "success") { this.fmData[item.keyName] = data.address; - this.searchValue = data.address - this.searchOptions = [] + this.searchAddressOptions = []; } }, - async remoteMethod (query) { - - if (query !== '') { + async remoteMethod(query) { + if (query !== "") { this.loading = true; const { msg, data } = await map.searchNearby(query); this.loading = false; - this.resultList = [] + console.log("搜索结果", data); 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}` }; - - }); - } + this.searchAddressOptions = data.resultList.map((item, index) => { + return { + ...item, + value: `${item.lonlat + item.address}`, + label: `${item.address + item.name}`, + }; + }); } else { - this.searchOptions = [ + this.searchAddressOptions = [ { - value: '0', - label: '未检索到结果' - } - ] + value: "0", + label: "未检索到结果", + }, + ]; } } else { - this.searchOptions = []; + this.searchAddressOptions = []; } }, - handleClickKey (index) { - let selPosition = this.resultList[index] - let lonlat = selPosition.lonlat.split(" ") + handleClickKey(item, fmItem) { + console.log("搜索结果", item); + let lonlat = item.lonlat.split(" "); map.setCenter(lonlat[1], lonlat[0]); map.setMarker(lonlat[1], lonlat[0]); - - - this.fmData[this.addressItem.supKeys[0]] = lonlat[1]; - this.fmData[this.addressItem.supKeys[1]] = lonlat[0]; - // this.formData.latitude = lonlat[1]; - // this.formData.longitude = lonlat[0]; - // this.formData.address = selPosition.address + selPosition.name - this.fmData[this.addressItem.keyName] = selPosition.address + selPosition.name + this.fmData[fmItem.supKeys[0]] = parseFloat(lonlat[1]); + this.fmData[fmItem.supKeys[1]] = parseFloat(lonlat[0]); + this.fmData[fmItem.keyName] = item.label; }, - - async getInfo () { + async getInfo() { let url = this.infoUrl; if (!url) return; const { idName, formId } = this; @@ -739,6 +768,12 @@ export default { if (editConfig && typeof editConfig.cookInfoFn == "function") { data = editConfig.cookInfoFn(data); } + + if (data.latitude && data.longitude) { + data.latitude = parseFloat(data.latitude); + data.longitude = parseFloat(data.longitude); + } + this.fmData = { ...this.fmData, ...data, @@ -760,12 +795,12 @@ export default { } }, - watchImg (src) { + watchImg(src) { window.open(src); }, // 过滤文本 - dormatHtml (content) { + dormatHtml(content) { if ( content.startsWith( "\n\n\n\n\n" @@ -777,7 +812,7 @@ export default { return content; }, - cookBeforeSubmit (data) { + cookBeforeSubmit(data) { Object.keys(data).forEach((k) => { if (typeof data[k] == "string") { data[k] = this.dormatHtml(data[k]); @@ -786,7 +821,7 @@ export default { return data; }, - async handleComfirm () { + async handleComfirm() { this.btnDisable = true; setTimeout(() => { this.btnDisable = false; @@ -818,7 +853,7 @@ export default { }); }, - async submit () { + async submit() { const { editConfig, fmData, formType, editFixedParams } = this; if ( typeof editConfig.beforeSubmit == "function" && @@ -858,7 +893,7 @@ export default { } }, - handleCancle () { + handleCancle() { this.$emit("close"); }, }, diff --git a/src/views/modules/visual/command/cpts/map-ol.vue b/src/views/modules/visual/command/cpts/map-ol.vue new file mode 100644 index 000000000..355973b3a --- /dev/null +++ b/src/views/modules/visual/command/cpts/map-ol.vue @@ -0,0 +1,1081 @@ + + + + + diff --git a/src/views/modules/visual/command/cpts/map.vue b/src/views/modules/visual/command/cpts/map.vue index ba7472e8a..216a75316 100644 --- a/src/views/modules/visual/command/cpts/map.vue +++ b/src/views/modules/visual/command/cpts/map.vue @@ -64,26 +64,6 @@ let searchMarker; let searchBgLayer; let tdtSearchMap; -function reversePix(pixelsTemp) { - //蓝色 - for (var i = 0; i < pixelsTemp.length; i += 4) { - var r = pixelsTemp[i]; - var g = pixelsTemp[i + 1]; - var b = pixelsTemp[i + 2]; - //运用图像学公式，设置灰度值 - var grey = r * 0.3 + g * 0.59 + b * 0.11; - //将rgb的值替换为灰度值 - pixelsTemp[i] = grey; - pixelsTemp[i + 1] = grey; - pixelsTemp[i + 2] = grey; - - //基于灰色，设置为蓝色，这几个数值是我自己试出来的，可以根据需求调整 - pixelsTemp[i] = 55 - pixelsTemp[i]; - pixelsTemp[i + 1] = 255 - pixelsTemp[i + 1]; - pixelsTemp[i + 2] = 305 - pixelsTemp[i + 2]; - } -} - export default { name: "l7", inject: ["refresh"], diff --git a/src/views/modules/visual/command/index.vue b/src/views/modules/visual/command/index.vue index 4971f977d..fd33754a7 100644 --- a/src/views/modules/visual/command/index.vue +++ b/src/views/modules/visual/command/index.vue @@ -234,6 +234,7 @@ 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/command/cpts/map"; +import gridMapOl from "@/views/modules/visual/command/cpts/map-ol"; import sidemenu1 from "@/views/modules/visual/command/cpts/yantai-sidemenu1"; import sidemenu2 from "@/views/modules/visual/command/cpts/yantai-sidemenu2"; import sidemenuLeft from "@/views/modules/visual/command/cpts/sidemenu-left"; @@ -243,6 +244,7 @@ import eventInfo from "@/views/modules/visual/command/cpts/eventInfo"; import serviceInfo from "@/views/modules/visual/command/cpts/serviceInfo"; import demandInfo from "@/views/modules/visual/command/cpts/demandInfo"; import qsydw from "@/views/modules/visual/command/cpts/qsydw"; +import { mapType } from "@/utils/dai-map"; let loading; //加载动画 @@ -286,7 +288,7 @@ export default { People, cptCard, ScreenLoading, - gridMap, + gridMap: mapType == "tdzw" ? gridMapOl : gridMap, sidemenu1, sidemenu2, sidemenuLeft, diff --git a/src/views/modules/workSys/mapConfig.vue b/src/views/modules/workSys/mapConfig.vue index 662ad1776..96f209a03 100644 --- a/src/views/modules/workSys/mapConfig.vue +++ b/src/views/modules/workSys/mapConfig.vue @@ -736,37 +736,6 @@ const vueGis = { const resolutions = getResolutions(); - //切片名 - // const matrixIds = [ - // "7", // EPSG:4490: - // "8", - // "9", - // "10", - // "11", - // "12", - // "13", - // "14", - // "15", - // "16", - // "17", - // "18", - // ]; - - // const resolutions = [ - // (0.025399998 * 4622334) / (96 * 111000), - // (0.025399998 * 2311166.84) / (96 * 111000), - // (0.025399998 * 1155583.42) / (96 * 111000), - // (0.025399998 * 577791.71) / (96 * 111000), - // (0.025399998 * 288895.85) / (96 * 111000), - // (0.025399998 * 144447.93) / (96 * 111000), - // (0.025399998 * 72223.96) / (96 * 111000), - // (0.025399998 * 36111.98) / (96 * 111000), - // (0.025399998 * 18055.99) / (96 * 111000), - // (0.025399998 * 9028) / (96 * 111000), - // (0.025399998 * 4514) / (96 * 111000), - // (0.025399998 * 2257) / (96 * 111000), - // ]; - console.log("========= getProjection", getProjection("EPSG:4490")); let url = "http://59.206.203.34/tileservice/SDPubMap"; @@ -791,6 +760,26 @@ const vueGis = { style: "default", tilematrixset: "c", // wrapX: true, + tileLoadFunction(imageTile, src) { + // 使用滤镜 将白色修改为深色 + let img = new Image(); + // img.crossOrigin = '' + // 设置图片不从缓存取，从缓存取可能会出现跨域，导致加载失败 + img.setAttribute("crossOrigin", "anonymous"); + img.onload = function () { + let canvas = document.createElement("canvas"); + let w = img.width; + let h = img.height; + canvas.width = w; + canvas.height = h; + let context = canvas.getContext("2d"); + context.filter = + "grayscale(92%) invert(100%) sepia(20%) hue-rotate(140deg) saturate(2000%) brightness(70%) contrast(80%)"; + context.drawImage(img, 0, 0, w, h, 0, 0, w, h); + imageTile.getImage().src = canvas.toDataURL("image/png"); + }; + img.src = src; + }, }), });