| | |
| | | /** |
| | | * 环境风险 |
| | | * 环境风险统计图 |
| | | */ |
| | | // const EnvironmentRiskIndex = require('@components/base-page/').default |
| | | |
| | | // 请求接口数据 |
| | | const mapApi = require('../../../api/mapApi').default |
| | | // 使用封装方法 |
| | |
| | | const echarts = require('echarts/lib/echarts') |
| | | |
| | | module.exports = function () { |
| | | // 环形统计图数组 |
| | | let riskLayerGroup = null |
| | | |
| | | /** |
| | | * 返回marker对象数组 |
| | | * 初始化图层数组 |
| | | * @param L leaflet对象 |
| | | */ |
| | | this.init = async (layer, L) => { |
| | |
| | | L: L, |
| | | layer: layer |
| | | }) |
| | | const result = await mapApi.getRiskEnterprise() |
| | | } |
| | | |
| | | /** |
| | | * 加载图层 |
| | | * @returns {Promise<void>} |
| | | */ |
| | | this.start = async () => { |
| | | if (riskLayerGroup) { // 图层全选时,清理图层数组并重新加载 |
| | | riskLayerGroup.remove() |
| | | riskLayerGroup = null |
| | | } |
| | | riskLayerGroup = this.animalService.L.featureGroup().addTo(this.animalService.layer) |
| | | const result = await mapApi.getEnvironmentRisk() |
| | | const features = result.features |
| | | for (var i = 0; i < features.length; i++) { |
| | | for (let i = 0; i < features.length; i++) { |
| | | const feature = features[i] |
| | | const geometry = feature.geometry |
| | | const properties = feature.properties |
| | | const qyId = properties.QY_ID |
| | | // const qyJc = properties.QY_JC |
| | | const distract = properties.DISTRACT |
| | | const coordinates = geometry.coordinates |
| | | if (distract !== '长江沿线') { |
| | | continue |
| | | } |
| | | const bgMarker = L.marker([coordinates[1], coordinates[0]], { |
| | | icon: L.divIcon({ |
| | | this.animalService.L.marker([coordinates[1], coordinates[0]], { |
| | | icon: this.animalService.L.divIcon({ |
| | | className: '', |
| | | iconAnchor: [15, 45], |
| | | iconSize: [40, 40], |
| | | html: '<div style="width: 40px; height: 40px; background-color: rgba(255,255,255,1); position: relative; border-radius: 50%;"></div>' |
| | | }) |
| | | }) |
| | | layer.addLayer(bgMarker) |
| | | const chartMarker = L.marker([coordinates[1], coordinates[0]], { |
| | | icon: L.divIcon({ |
| | | }).addTo(riskLayerGroup) |
| | | this.animalService.L.marker([coordinates[1], coordinates[0]], { |
| | | icon: this.animalService.L.divIcon({ |
| | | className: '', |
| | | iconAnchor: [30, 60], |
| | | iconSize: [70, 70], |
| | | html: '<div id="qy_id_' + qyId + '" style="width: 70px; height: 70px; background-color: transparent; position: relative; border-radius: 50%;"></div>' |
| | | }) |
| | | }) |
| | | layer.addLayer(chartMarker) |
| | | }).addTo(riskLayerGroup) |
| | | chartRender(properties) |
| | | } |
| | | } |
| | | |
| | | /** |
| | | * tips |
| | | * @param layer |
| | | * @returns {string} |
| | | * 清除图层 |
| | | */ |
| | | this.bindTooltip = (layer) => { |
| | | |
| | | this.destory = () => { |
| | | if (riskLayerGroup) { |
| | | riskLayerGroup.remove() |
| | | riskLayerGroup = null |
| | | } |
| | | } |
| | | |
| | | /** |
| | | * 点击弹窗 |
| | | * @param e |
| | | */ |
| | | this.clickListener = (e) => { |
| | | |
| | | } |
| | | |
| | | /** |
| | | * 环形饼图 |
| | | * Echarts环形饼图 |
| | | * @param properties |
| | | */ |
| | | function chartRender (properties) { |
| | | const qyId = properties.QY_ID |
| | | const qyjc = properties.QY_JC |
| | | // const qyQc = properties.QY_QC |
| | | const num = properties.QY_NUM |
| | | const oneLevel = properties.QY_ONELEVEL |
| | | const twoLevel = properties.QY_TWOLEVEL |
| | |
| | | }] |
| | | } |
| | | o.setOption(option) |
| | | /* o.on('click', function (params) { |
| | | map.flyTo(L.latLng([params.data.y, params.data.x]), 15) |
| | | }) */ |
| | | } |
| | | } |