From 68d9f6b85690aa6402a69a1bc748be7129f39ed1 Mon Sep 17 00:00:00 2001
From: chenzeping <ChenZeping02609@163.com>
Date: 星期一, 12 四月 2021 17:42:12 +0800
Subject: [PATCH] 功能底图切换标注
---
src/components/LayerController/logic/SolidWaste.js | 109 ++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 80 insertions(+), 29 deletions(-)
diff --git a/src/components/LayerController/logic/SolidWaste.js b/src/components/LayerController/logic/SolidWaste.js
index c92dca2..8f9e12b 100644
--- a/src/components/LayerController/logic/SolidWaste.js
+++ b/src/components/LayerController/logic/SolidWaste.js
@@ -1,51 +1,102 @@
/**
* 鍥哄簾
*/
+
+// 鍖哄垎涓嶅悓绫诲瀷 浣跨敤涓嶅悓img
+const defaultImg = '/assets/images/map/solidwaste/voc.png'
+const setting = '/assets/images/map/solidwaste/gf_green2.png'
+
+// 璇锋眰鎺ュ彛鏁版嵁
+const mapApi = require('../../../api/mapApi').default
+// 浣跨敤灏佽鏂规硶
const AnimalService = require('../service/AnimalService').default
-const AjaxUtils = require('../../../utils/AjaxUtils').default
+
+const publicBounced = require('../../BaseNav/PublicBounced/PublicBounced').default
module.exports = function () {
/**
* 杩斿洖marker瀵硅薄鏁扮粍
* @param L leaflet瀵硅薄
*/
- this.init = (layer, L) => {
+ this.init = async (layer, L) => {
this.animalService = new AnimalService({
L: L,
- layer: layer,
- LayerPopup: null
+ layer: layer
})
- // AjaxUtils.get4JsonDataByUrl('http://10.246.162.140:8080/EPInterface/DataService/EPMapService.asmx/QueryStoragePlaceListByCompanyAndName', {
- // AjaxUtils.get4JsonDataByUrl('http://xearth.cn:3000/wasteSolid/getSolidWaste', {
- AjaxUtils.get4JsonDataByUrl('http://localhost:8888/static/SolidWaste.json', {
- companyId: 3900100145,
- userCode: 'wenchun.deng',
- name: '',
- marginWarr: '',
- longDayWarr: ''
- }, function (res) {
- const data = res.data.Result.DataInfo
- for (let i = 0; i < data.length; i++) {
- // 缁忕含搴� 浣嶇疆
- const positionX = data[i].Latitude
- const positionY = data[i].Longitude
- layer.addLayer(L.marker([positionX, positionY], {}))
- }
- })
+ const result = await mapApi.getSolidWaste()
+ const getSolidWasteData = result.Result.DataInfo || {}
+ // 寰幆閬嶅巻鏁版嵁 鏍规嵁杩涜marker 鐨勫垱寤�
+ for (let i = 0; i < getSolidWasteData.length; i++) {
+ // 缁忕含搴� 浣嶇疆
+ const positionX = getSolidWasteData[i].Latitude
+ const positionY = getSolidWasteData[i].Longitude
+
+ // 瀹氫箟绫诲瀷 鐢ㄦ潵鍖哄垎鏁版嵁鐨勪笉鍚� 1.鎺ュ彛鎺ュ彛鏁版嵁鏉ヨ繘琛屾暟鎹殑鍒ゆ柇 2.鏍规嵁鏁版嵁绫诲瀷鐨勪笉鍚岋紝杩涜涓嶅悓绫诲瀷鐨勫浘鐗囨樉绀�
+ const judgeValue = getSolidWasteData[i].StorageQty
+ var iconUrl = this.differentTypes(judgeValue)
+
+ const marker = L.marker([positionX, positionY], {
+ totransferData: getSolidWasteData[i],
+ icon: L.icon({
+ iconUrl: iconUrl,
+ iconSize: [30, 30],
+ iconAnchor: [15, 15]
+ })
+ })
+ layer.addLayer(marker)
+ }
}
this.bindTooltip = (layer) => {
- return '娴嬭瘯鍥哄簾'
+ return layer.options.totransferData.Name
}
this.clickListener = (e) => {
+ // 鐐瑰嚮marker鐨刾ulse()鍏夋尝
this.animalService.pulseEffect(e.latlng)
- console.log(e)
- console.log(this.PublicBounced)
- // return this.PublicBounced.$el
+ /* 鐐瑰嚮鏁版嵁鐨勬帴鍙ｈ姹� */
+ this.requestSolidWasteData(e).then(e)
}
- // 鍥哄簾鐐瑰嚮杩涜鐨� 鍐呭鐨勮缃�
- // SetSolidWasteContent (config, containerPopup) {
- // this.SolidWastePopup = containerPopup
- // }
+
+ // 涓嶅悓绫诲瀷鍥剧墖灏佽
+ this.differentTypes = (judgeValue) => {
+ var effectOfChange
+ if (judgeValue === 1) {
+ effectOfChange = defaultImg
+ } else {
+ effectOfChange = setting
+ }
+ return effectOfChange
+ }
+
+ // 鏍规嵁鐐瑰嚮涓嶅悓鏁版嵁 杩涜鎺ュ彛鐨勬暟鎹姹�
+ this.requestSolidWasteData = async (e) => {
+ // 鍩烘湰淇℃伅 鍜� 璇︾粏淇℃伅 灞曠ず鏁版嵁鎵�闇�鍙傛暟
+ const dataValue = {
+ StoragePlaceId: e.layer.options.totransferData.StoragePlaceId
+ }
+ // 鍩烘湰淇℃伅 tabs
+ const resultBasic = await mapApi.getSolidWasteBaseInfo(dataValue)
+ // 璇︾粏淇℃伅灞曠ず table
+ const resultDetailed = await mapApi.getSolidWasteDetail(dataValue)
+
+ // 缁戝畾寮规瀹炰緥
+ const PublicBounced = window.Vue.extend(publicBounced)
+ const instance = new PublicBounced()
+ instance.$mount()
+ document.body.appendChild(instance.$el)
+ // 閫氳繃鏂规硶 鍚戠粦瀹氬脊妗嗕紶閫掓暟鎹�
+ instance.setData(resultBasic.Result.DataInfo, resultDetailed.Result.DataInfo, 'gufei')
+ /* flyTo()寮瑰嚭妗嗗钩绉讳簨浠� */
+ this.setPanTo(e.latlng, 200)
+ }
+
+ // flayTo() 寮规鐨勫彲婊戝姩浜嬩欢
+ 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