/** * 环境风险源 */ // 信息组件 const RiskSourceIndex = require('../../base-page/RiskSource/RiskSourceIndex.vue').default const riskRed = '/assets/images/map/environmentRisk/risk_red.png' const riskSandybrown = '/assets/images/map/environmentRisk/risk_sandybrown.png' const riskYellow = '/assets/images/map/environmentRisk/risk_yellow.png' const riskGreen = '/assets/images/map/environmentRisk/risk_green.png' // 公共方法 panTo() 引用 const { setPanTo } = require('../../../utils/utils') // 请求接口数据 const mapApi = require('../../../api/mapApi').default // 使用封装方法 const AnimalService = require('../service/AnimalService').default module.exports = function () { /** * 初始化并加载图层 * @param L leaflet对象 */ this.init = async (layer, L, config) => { this.animalService = new AnimalService({ L: L, layer: layer }) const result = await mapApi.getEnvironmentRiskPoint() // 数据 const data = result[config.level] // 此处级别对应data数组下标,作为参数取数标识 for (let i = 0; i < data.length; i++) { const postion = [data[i].Latitude, data[i].Longitude] // 坐标 const iconUrl = this.riskIconUrl(data[i].riskLevel) // 风险源图标 const marker = L.marker(postion, { totransferData: data[i], icon: L.icon({ iconUrl: iconUrl, iconSize: [20, 20], iconAnchor: [10, 10] }) }) layer.addLayer(marker) } } /** * 提示窗 * @param layer * @returns {string} */ this.bindTooltip = (layer) => { return layer.options.totransferData.riskname } /** * 信息弹窗 * @param e */ this.clickListener = (e) => { // 脉冲效果 this.animalService.pulseEffect(e.latlng) // 信息弹窗平移 setPanTo(e.latlng, 200) // 弹框标题 const title = e.layer.options.totransferData.Name window.$layer.open({ content: { comp: RiskSourceIndex, // 组件 parent: this, // 父组件 data: { // 传递的参数 riskSourceId: e.layer.options.totransferData.no } }, title: title // 标题 }) } // 图标配置 this.riskIconUrl = (t) => { let iconUrl = null switch (t) { case 1: iconUrl = riskRed break case 2: iconUrl = riskSandybrown break case 3: iconUrl = riskYellow break case 4: iconUrl = riskGreen break default: iconUrl = riskGreen break } return iconUrl } }