From b620b2f8962a0a1fea3846db83b98704820e16b9 Mon Sep 17 00:00:00 2001 From: 徐旺旺 <11530253@qq.com> Date: 星期三, 07 四月 2021 17:54:11 +0800 Subject: [PATCH] 修改图标大小 --- src/components/LayerController/logic/WasteGas.js | 76 ++++++++++++++++++++++++++------------ 1 files changed, 52 insertions(+), 24 deletions(-) diff --git a/src/components/LayerController/logic/WasteGas.js b/src/components/LayerController/logic/WasteGas.js index bf0a41c..2fba1fa 100644 --- a/src/components/LayerController/logic/WasteGas.js +++ b/src/components/LayerController/logic/WasteGas.js @@ -5,12 +5,13 @@ // const AjaxUtils = require('../../../utils/AjaxUtils').default // 鍖哄垎涓嶅悓绫诲瀷 浣跨敤涓嶅悓img -const ImgBlue = '/assets/images/map/exhaust/fq_blue.png' -const ImgGray = '/assets/images/map/exhaust/fq_gray.png' -const ImagGreen = '/assets/images/map/exhaust/fq_green.png' -const ImagBright = '/assets/images/map/exhaust/fq_bright_green.png' +// const ImgBlue = '/assets/images/map/exhaust/fq_blue.png' +// const ImgGray = '/assets/images/map/exhaust/fq_gray.png' +const ImagGreen = '/assets/images/map/exhaust/fq_green_new.png' +// const ImagBright = '/assets/images/map/exhaust/fq_bright_green.png' const mapApi = require('../../../api/mapApi').default +const publicBounced = require('../../BaseNav/PublicBounced/PublicBounced').default module.exports = function () { /** * 杩斿洖marker瀵硅薄鏁扮粍 @@ -18,9 +19,10 @@ */ this.init = async (layer, L) => { this.animalService = new AnimalService({ L: L, layer: layer }) - const res = await mapApi.GetWasteGas() + const res = await mapApi.getWasteGas() + // console.log(res) const data = res.Result.DataInfo || {} - console.log(data) + // console.log(data) for (let i = 0; i < data.length; i++) { // 缁忕含搴� 浣嶇疆 const positionX = data[i].Latitude @@ -28,12 +30,18 @@ // 瀹氫箟绫诲瀷 鐢ㄦ潵鍖哄垎鏁版嵁 const ContrLevel = data[i].ContrLevel var iconUrl = this.differentTypes(ContrLevel) - - const marker = L.marker.magic([positionX, positionY], { + // const marker = L.canvasMarker([positionX, positionY], { + // img: { + // // url: 'assets/images/map/marker-icon.png', + // url: iconUrl, + // size: STYLES.ICON_SIZE + // } + const marker = L.marker([positionX, positionY], { + test: data[i], icon: L.icon({ iconUrl: iconUrl, - iconSize: [50, 50], - iconAnchor: [25, 25] + iconSize: [20, 20], + iconAnchor: [10, 20] }) }) layer.addLayer(marker) @@ -42,26 +50,46 @@ } this.bindTooltip = (layer) => { - console.log(layer) - return '娴嬭瘯搴熸皵' + return layer.options.test.Name } - this.clickListener = (e) => { - console.log(e) + this.clickListener = async (e) => { + // console.log(e) this.animalService.pulseEffect(e.latlng) + const dataValue = { + StoragePlaceId: e.layer.options.test.StoragePlaceId + } + const result = await mapApi.getWasteGasDetails(dataValue) + // console.log(result.Result.DataInfo) + const PublicBounced = window.Vue.extend(publicBounced) + const instance = new PublicBounced() + instance.setGasData(e.layer.options.test, result.Result.DataInfo, 'feiqi') + // console.log(e.layer.options.test) + instance.$mount() + document.body.appendChild(instance.$el) + this.setPanTo(e.latlng, 240) } - // 涓嶅悓绫诲瀷鍥剧墖灏佽 + // 涓嶅悓绫诲瀷鍥剧墖鍔犺浇 this.differentTypes = (ContrLevel) => { var effectOfChange - if (ContrLevel === 1) { - effectOfChange = ImgBlue - } else if (ContrLevel === 2) { - effectOfChange = ImagGreen - } else if (ContrLevel === 3) { - effectOfChange = ImagBright - } else { - effectOfChange = ImgGray - } + /* + if (ContrLevel === 1) { + effectOfChange = ImgBlue + } else if (ContrLevel === 2) { + */ + effectOfChange = ImagGreen + // } else if (ContrLevel === 3) { + // effectOfChange = ImagBright + // } else { + // effectOfChange = ImgGray + // } return effectOfChange } + this.setPanTo = (pos, value) => { + var position = pos + position = window.map.latLngToLayerPoint(position) + position.y += value + position = window.map.layerPointToLatLng(position) + window.map.flyTo(position) + } } -- Gitblit v1.8.0