中屏常见问题

1.通过开始时间和结束时间，获取之间的时间值

// 通过起始时间，获取区间值
getDayArr (startDay, endDay) {
 // new Date(startDay)中国标准时间
  let startVal = moment(new Date(startDay)).format('YYYY-MM-DD')
  const dayArr = []
  while (moment(startVal).isBefore(endDay)) {
    dayArr.push(startVal)
    // 自增
  startVal = moment(new Date(startVal)).add(1, 'day').format('YYYY-MM-DD')
    }
    // 将结束日期的天放进数组
  dayArr.push(moment(new Date(endDay)).format('YYYY-MM-DD'))
    return dayArr
}
// 时间处理函数
timeFormat (timestamp) {
    var date = new Date(timestamp) // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
    var Y = date.getFullYear() + '-'
    var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
    var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
    return Y + M + D
}
// 当前时间
const startTime = new Date(new Date().setHours(0, 0, 0, 0))
// Mon Mar 07 2022 00:00:00 GMT+0800 (中国标准时间)
// 七天前的时间数据
const SevenDayAgo = startTime - 86400 * 6 * 1000
// 1646064000000
const initArr = getDayArr(timeFormat(SevenDayAgo), timeFormat(startTime))
// ['03-01', '03-03', '03-03', '03-04', '03-05', '03-06', '03-07']

2.在地图中，将形参如何变为数组的实参

说明：将属性dmsx形参，作为实参使用

this.updatePoint2(res1.datarow, 'dmsx', '国考/省考监测断面', {
  国考: '/asserts-ecological-environment/common/guo.png',
  省考: '/asserts-ecological-environment/common/sheng.png'
}, DialogNo1)
// 测试更新点位数据
updatePoint2 (res1, types, titles, iconTypes, Thangkuang) {
  this.map = []
  this.map2 = []
  const res = res1
  res.forEach(el => {
    this.map.push({
      type: el.[types],
      latitude: el.zb.split(',')[1],
      longitude: el.zb.split(',')[0],
      id: el.id,
      items: el,
      boid: 'shj_dbs_gkskjcdmxq',
      title: titles
    })
  })
  const obj = {
    points: this.map,
    iconType: iconTypes,
    iconSize: [45, 45],
    PoupComponent: Thangkuang
  }
  window.eventBus.$emit('addMarke', obj)
}

3.请求gis数据并转换成geojson

• 单独封装成工具类

export function getCoverData (
  queryParameter = {
    name: 'zrzy_xzqh@172.29.5.250_pg_zsyzt',
    attributeFilter: 'SMID > 0',
  },
  datasetNames = ['172.29.5.250_pg_zsyzt:zrzy_xzqh']
) {
  return new Promise((resolve, reject) => {
    const sqlParam = new window.SuperMap.GetFeaturesBySQLParameters({
      queryParameter,
      datasetNames,
      toIndex: -1
    })
    window.L.supermap
      .featureService(`${process.env.VUE_APP_MAP}/iserver/services/data_stzt/rest/data`)
      .getFeaturesBySQL(sqlParam, function (serviceResult) {
        resolve(serviceResult.result.features)
      })
  })
}
Vue.prototype.$getCoverData = getCoverData

• 使用工具类

this.tuData = await this.$getCoverData(
    {
        name: 'stglj_stbhhx@172.29.5.250_pg_zsyzt',
        attributeFilter: 'SMID > 0',
    },
    ['172.29.5.250_pg_zsyzt:stglj_stbhhx']
)
this.tuData.features.forEach(element => {
    this.all += Number(element.properties.面积)
})
// console.log(this.tuData, 333)
window.eventBus.$emit('drawCoverage', {
    operation: 'add',
    CoverageName: '生态保护红线',
    points: this.tuData,
    color: 'rgba(59, 255, 117, 0.3)',
    // PoupComponent: Tangkuang
})

4.地图圈地出弹框

• 打开绘制图层插件，在map.vue中
• 注意：先$on,才能$emit

// 绘制地图
const state = {
    map: null,
    // 圈地的图形
    enclosureOption: []
}
// 设置监听器
setEventBus () {
    const eventArr = [
        'openDrawMap', // 开启绘制
    ]
    eventArr.forEach(item => {
        window.eventBus.$on(item, e => {
            this[item](e)
        })
    })
}
mounted () {
  this.setEventBus()
}
openDrawMap () {
    const pmOptions = {
        position: 'bottomleft', // 控件位置
        drawMarker: false, // marker绘制是否可选
        drawPolygon: true, // drawPolygon绘制是否可选
        drawPolyline: true, // drawPolyline绘制是否可选
        editPolygon: false, // editPolygon编辑是否可选
        deleteLayer: true, // 删除图层
        drawCircle: false, // 画圆
        drawCircleMarker: false, // 画圆标记
        drawRectangle: false, // 绘制矩形
        dragMode: false, // 移动图层
        cutPolygon: false, // 切割图层
        removalMode: false,
        pinningOption: false,
        snapingOption: false,
        editMode: false,
        scaleMode: false,
        rotateMode: false, // 旋转模式
    }
    state.map.pm.addControls(pmOptions)
    state.map.pm.setLang('zh')
    state.map.on('pm:create', opt => {
        state.enclosureOption.push(opt.marker)
        if (opt.shape === 'Polygon') {
            window.eventBus.$emit('drawEnd', { marker: opt.marker })
        } else if (opt.shape === 'Line') {
            this.getMeasureData(opt.marker, 'line').then(res => {
                // 测量距离的统计结果
                window.eventBus.$emit('measureDistance', res.result.distance.toFixed(2))
            })
        }
    })
}

• 在代码中使用，开启圈地

window.eventBus.$emit('openDrawMap')

• 圈地完成，弹出弹框，获取圈地数据，请求接口弹出信息

• 代码使用文件

// 应急预案 弹窗
<yjya-side-dialog :show.sync='yjyaDialogShow' :item='tableItem'></yjya-side-dialog>
// mounted中
// 圈地完成
window.eventBus.$on('drawEnd', (obj) => {
  // 显示弹框 
  this.typeDialogShow = true
  // 赋值属性
  this.typeProps = obj
})
// 调用地图获取数据, 点击下拉框传入数据信息
typeChange (value) {
    console.log(value, '危化品泄漏', 777)
    this.typeProps.type = value
    window.eventBus.$emit('getAreaInfo', this.typeProps)
    this.typeDialogShow = false
}

• map文件，process.env.VUE_APP_MAP为http://172.29.5.111:8090

import DATASET from './dataset.json'
// 设置监听器
setEventBus () {
    const eventArr = [
        'getAreaInfo', // 自定义圈地统计数据
    ]
    eventArr.forEach(item => {
        window.eventBus.$on(item, e => {
            this[item](e)
        })
    })
}
mounted () {
  this.setEventBus()
}
data--typeProps: {}
// 监听绘制
async getAreaInfo ({ marker, type }) {
    // marker里面的信息，危化品泄漏，888
    console.log(marker, type, 888)
    const latlngs = marker._latlngs[0]
    const polygonList = []
    latlngs.forEach(item => {
        polygonList.push({ x: item.lng, y: item.lat })
    })
    const { peopleCount } = await this.filterBoundsByPolygon(polygonList, DATASET.peopleDataset)
    window.eventBus.$emit('polygonPeopleCount', peopleCount)
    console.log('圈地人口数据', peopleCount)
    const result = await this.$http.zhongshanApi('A_GGAQYJ_ZM_SGLXYLX', this.getParams('lx', type))
    const datasetList = this.getCategoryDataset(result)
    const handleData = await this.filterBoundsByPolygon(polygonList, datasetList)
    console.log('圈地类型数据', handleData)
    const list = []
    result.forEach(keys => {
        const filterData = handleData.handleData.filter(item => item.properties.LX === keys.gllxdw)
        if (!list.some(el => el.title === keys.gllx)) {
            list.push({
                title: keys.gllx,
                children: [...filterData],
            })
        } else {
            const index = list.findIndex(el => el.title === keys.gllx)
            list[index].children.push(...filterData)
        }
    })
    const obj = {
        select: false,
        list,
    }
    window.eventBus.$emit('associatedMsgByDraw', obj)
    const { area } = await this.getMeasureData(marker, 'polygon')
    console.log('圈地面积数据', area)
    window.eventBus.$emit('polygonAreaCount', area.toFixed(2))
}
// 过滤多边形中的数据
async filterBoundsByPolygon (polygon, datasetNames) {
    const boundPoints = await this.$http.post(`${process.env.VUE_APP_MAP}/iserver/services/data_ggaqzt/rest/data/featureResults.json?returnContent=true&fromIndex=0&toIndex=-1`, {
        body: {
            getFeatureMode: 'SPATIAL',
            datasetNames,
            type: 'REGION',
            geometry: {
                id: 0,
                style: null,
                parts: [
                    1
                ],
                points: polygon,
                type: 'REGION'
            },
            spatialQueryMode: 'INTERSECT'
        },
        headers: {
            'Content-Type': 'application/json'
        }
    })
    return this.transformObject(boundPoints.features)
}

// gis 合并数组 - 数据处理
transformObject (list) {
    let count = 0
    const handleData = []
    list.forEach(item => {
        const obj = {}
        item.fieldNames.forEach((v, i) => {
            obj[item.fieldNames[i]] = item.fieldValues[i]
            if (item.fieldNames[i] === '人口数') {
                count += parseFloat(item.fieldValues[i])
            }
        })
        const geometry = {
            coordinates: [obj.SMX, obj.SMY]
        }
        handleData.push({ properties: obj, ...item, geometry })
    })
    return { handleData, peopleCount: count }
}

// 根据传入的类目数组返回改类目数组的dataset集合
getCategoryDataset (categoryList) {
    const list = []
    categoryList.forEach(item => {
        const filter = DATASET.categoryDataset.find(key => key.name === item.gllxdw)
        if (filter) {
            filter.dataset.forEach(item => list.push(`172.29.5.250_pg_zsyzt:${item}`))
        }
    })
    return list
}
// 获取请求参数
getParams () {
    const paramsArr = []
    const length = arguments.length >= 4 ? arguments.length : 4
    for (let i = 0; i < length; i += 2) {
        paramsArr.push({
            field: (i % 2 === 0 && arguments[i]) ? arguments[i] : '1',
            value: ((i + 1) % 2 !== 0 && arguments[i + 1]) ? arguments[i + 1] : '1',
        })
    }
    return paramsArr
}
// 获取矩形面积 || 线段长度
getMeasureData (polygon, type) {
    return new Promise((resolve, reject) => {
        const MeasureParam = new window.SuperMap.MeasureParameters(polygon)
        const url = `${process.env.VUE_APP_MAP}/iserver/services/map-ZSmapBlue4490yidongduan/rest/maps/ZSmapBlue4490yidongduan`
        const services = state.L.supermap.measureService(url)
        if (type === 'polygon') {
            services.measureArea(MeasureParam, function (serviceResult) {
                resolve(serviceResult.result)
            })
        } else {
            services.measureDistance(MeasureParam, function (serviceResult) {
                resolve(serviceResult)
            })
        }
    })
},

• 接受人数，修改统计值

// 监听圈地人口数据 , 更改 四标四实人口统计
window.eventBus.$on('polygonPeopleCount', (num) => {
  const tempList = this.list.filter(item => item.label.match('四标四实人口统计'))
  tempList[0].value = Number(num)
})
window.eventBus.$on('associatedMsgByDraw', this.handleAssociatedDataByDraw)
handleAssociatedDataByDraw (obj) {
    this.searchStatus = obj.select
    this.associatedMsgList = obj.list
    this.renderTab(obj.list)
}
// 渲染tab标签
renderTab (res) {
    const arr = []
    res.forEach(element => {
        arr.push({
            title: element.title,
            num: element.children.length,
        })
    })
    this.typeData = arr
    this.searchStatus = true
    this.tabChange(arr[0])
}
// 监听圈地面积 , 更改面积统计
window.eventBus.$on('polygonAreaCount', (num) => {
    const tempList = this.list.filter(item => item.label.match('圈地面积'))
    tempList[0].value = Number(num)
})

• 清空点选面，线地图，清楚控件
• 移除控件，用的是state.map.pm.removeControls()，注意C是大写

window.eventBus.$emit('clearRoute')
/* 不要删 */
// 清除绘制路线
clearRoute () {
    // 清除原定路线 + 实时路线 + 车辆点位 + geoJson图层
    this.polyline && this.polyline.remove()
    this.polyline1 && this.polyline1.remove()
    this.pointEnd && this.pointEnd.remove()
    this.pointStart && this.pointStart.remove()
    this.pointCar && this.pointCar.remove()
    // 清空绘制的图层
    this.clearDrawPolygon()
    clearInterval(this.carTimer)
    state.markers.length > 0 && state.markers.forEach(i => i.remove())
    state.geoLayer.forEach(i => state.map.removeLayer(i))
    state.markers = []
    // 清除事故点位
    this.deletePreCircleAndPoint()
    state.map.pm.removeControls()
    window.eventBus.$emit('tabListStatus', false)
    // 清楚 途径点数据
    state.approachPoint.forEach(item => {
        item.remove()
    })
}
// 清空绘制的多边形
clearDrawPolygon () {
    state.enclosureOption.forEach(i => state.map.removeLayer(i))
}
// 删除上一次的类型点位与圆， 圆心点
deletePreCircleAndPoint () {
    state.circles.forEach(item => item.remove())
    state.accidentPoint.forEach(item => item.remove())
    state.typePoint.forEach(item => item.remove())
    this.resultLayer.forEach(item => {
        state.map.removeLayer(item.resultLayer)
    })
    this.resultLayer = []
    state.circles = []
    state.accidentPoint = []
    state.typePoint = []
    window.eventBus.$emit('closeTab')
}
window.eventBus.$on('tabListStatus', status => {
    this.visible = status
})
beforeDestroy () {
    window.eventBus.$off('tabListStatus')
}