| | |
| | | /** |
| | | * 固废 |
| | | */ |
| | | const WasteSolidIndex = require('@components/BaseNav/WasteSolid/WasteSolidIndex').default |
| | | const WasteSolidIndex = require('../../../components/BaseNav/WasteSolid/WasteSolidIndex').default |
| | | // 区分不同类型 使用不同img |
| | | const defaultImg = '/assets/images/map/solidwaste/voc.png' |
| | | const setting = '/assets/images/map/solidwaste/gf_green2.png' |
| | | |
| | | // 公共方法 panTo() 引用 |
| | | const { setPanTo } = require('../../../utils/utils') |
| | | // 请求接口数据 |
| | | const mapApi = require('../../../api/mapApi').default |
| | | // 使用封装方法 |
| | | const AnimalService = require('../service/AnimalService').default |
| | | |
| | | // const publicBounced = require('../../BaseNav/PublicBounced/PublicBounced').default |
| | | |
| | | module.exports = function () { |
| | | /** |
| | |
| | | // 定义类型 用来区分数据的不同 1.接口接口数据来进行数据的判断 2.根据数据类型的不同,进行不同类型的图片显示 |
| | | const judgeValue = getSolidWasteData[i].StorageQty |
| | | var iconUrl = this.differentTypes(judgeValue) |
| | | // console.log(getSolidWasteData[i].Latitude, getSolidWasteData[i].Longitude) |
| | | // console.log(getSolidWasteData[i]) |
| | | |
| | | const marker = L.marker([positionX, positionY], { |
| | | totransferData: getSolidWasteData[i], |
| | | icon: L.icon({ |
| | |
| | | iconAnchor: [15, 15] |
| | | }) |
| | | }) |
| | | // console.log(L.icon) |
| | | // console.log(iconUrl) |
| | | // console.log(marker) |
| | | layer.addLayer(marker) |
| | | } |
| | | } |
| | | |
| | | this.bindTooltip = (layer) => { |
| | | // '<div class="company-bindTooltip-hover"><h3>天津石化</h3></div>' + |
| | | return layer.options.totransferData.Name |
| | | } |
| | | |
| | | this.clickListener = (e) => { |
| | | // 点击marker的pulse()光波 |
| | | this.animalService.pulseEffect(e.latlng) |
| | | /* 点击数据的接口请求 */ |
| | | this.requestSolidWasteData(e).then(e) |
| | | /* flyTo()弹出框平移事件 */ |
| | | setPanTo(e.latlng, 200) |
| | | // 弹框标题 |
| | | const title = e.layer.options.totransferData.Name |
| | | window.$layer.open({ |
| | | content: { |
| | | comp: WasteSolidIndex, // 组件 |
| | | parent: this, // 父组件 |
| | | data: { // 传递的参数 |
| | | storagePlaceId: e.layer.options.totransferData.StoragePlaceId |
| | | } |
| | | }, |
| | | title: title // 标题 |
| | | }) |
| | | } |
| | | |
| | | // 不同类型图片封装 |
| | |
| | | effectOfChange = setting |
| | | } |
| | | return effectOfChange |
| | | } |
| | | |
| | | // 根据点击不同数据 进行接口的数据请求 |
| | | this.requestSolidWasteData = async (e) => { |
| | | // 基本信息 和 详细信息 展示数据所需参数 |
| | | // const dataValue = { |
| | | // StoragePlaceId: e.layer.options.totransferData.StoragePlaceId |
| | | // } |
| | | // console.log(e.layer.options.totransferData.Name) |
| | | // 弹框标题 |
| | | const title = e.layer.options.totransferData.Name |
| | | // 基本信息 tabs |
| | | // const resultBasic = await mapApi.getSolidWasteBaseInfo(dataValue) |
| | | // 详细信息展示 table |
| | | // const resultDetailed = await mapApi.getSolidWasteDetail(dataValue) |
| | | |
| | | // // 绑定弹框实例 |
| | | // const PublicBounced = window.Vue.extend(publicBounced) |
| | | // const instance = new PublicBounced().$mount() |
| | | // document.body.appendChild(instance.$el) |
| | | // // document.body.removeChild(instance.$el) |
| | | // // 通过方法 向绑定弹框传递数据 |
| | | // instance.setData(title, resultBasic.Result.DataInfo, resultDetailed.Result.DataInfo, 'gufei') |
| | | /* flyTo()弹出框平移事件 */ |
| | | this.setPanTo(e.latlng, 300) |
| | | window.$layer.open({ |
| | | content: { |
| | | content: WasteSolidIndex, // 组件 |
| | | parent: this, // 父组件 |
| | | data: { // 传递的参数 |
| | | info: this.info, |
| | | storagePlaceId: e.layer.options.totransferData.StoragePlaceId |
| | | } |
| | | }, |
| | | title: title // 标题 |
| | | }) |
| | | } |
| | | |
| | | // 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) |
| | | } |
| | | } |