/** * 固废 */ // 区分不同类型 使用不同img const defaultImg = '/assets/images/map/solidwaste/voc.png' const setting = '/assets/images/map/solidwaste/gf_green.png' // 请求接口数据 const mapApi = require('../../../api/mapApi').default // 使用封装方法 const AnimalService = require('../service/AnimalService').default const publicBounced = require('../../BaseNav/PublicBounced/PublicBounced').default module.exports = function () { /** * 返回marker对象数组 * @param L leaflet对象 */ this.init = async (layer, L) => { this.animalService = new AnimalService({ L: L, layer: layer }) 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], { test: getSolidWasteData[i], icon: L.icon({ iconUrl: iconUrl, iconSize: [50, 50], iconAnchor: [25, 25] }) }) layer.addLayer(marker) } } this.bindTooltip = (layer) => { return layer.options.test.Name } this.clickListener = async (e) => { this.animalService.pulseEffect(e.latlng) const dataValue = { StoragePlaceId: e.layer.options.test.StoragePlaceId } const result = await mapApi.getSolidWasteBaseInfo(dataValue) // console.log(result) const PublicBounced = window.Vue.extend(publicBounced) const instance = new PublicBounced() instance.setData(result, 'gufei') } // 不同类型图片封装 this.differentTypes = (judgeValue) => { var effectOfChange if (judgeValue === 1) { effectOfChange = defaultImg } else { effectOfChange = setting } return effectOfChange } }