在基于leaflet的GIS图中对点位详情数据进行展示

￡神魔★判官ぃ 2022-05-18 03:36 222阅读 0赞

> 不加班会死星人正在发烧ing,但是总感觉今天还要写点东西记录一下，原谅我肆无忌惮的贴代码吧。阿门，长得帅的人总会被原谅的不是吗？

## 直接贴代码了，想打死我的请排队取号… ##

<template>
        
        <div style="width: 100%;height: 100%;" ref='lyMap'>
        </div>
    </template>
    
    <script>
        // 引入leaflet相关文件
        import 'leaflet/dist/leaflet.css'
        import L from 'leaflet'
        import moment from 'moment'
        import geoJson from './data/130000.js'
        import Pointer from '../../../data/request/hbmis/base/pointer'
        import Data from '../../../data/request/hbmis/monitor/data'
        export default {
            name: 'lyMap',
            data() {
                return {
                    map: null,
                    layer_on_line: null,
                    layer_off_line: null,
                    layerGroupArr: [],
                    layerControl: null,
                    markicon_on_line: L.icon({
                        iconUrl: require('./data/icon.png'),
                        iconSize: [15, 15], // size of the icon
                    }),
                    markicon_off_line: L.icon({
                        iconUrl: require('./data/icon2.png'),
                        iconSize: [15, 15], // size of the icon
                    }),
                    pointer_list: [],
                    current_point_data: null
                }
            },
            props: {
                layers: { // 图层列表
                    type: Array,
                    default: function() {
          
                        return []
                    }
                },
                points: { // 点位列表
                    type: Array,
                    default: function() {
          
                        return []
                    }
                },
                bound: { // 显示范围
                    type: Array,
                    default: function() {
          
                        return [
                            [43.186231, 118.422797],
                            [40.081638, 120.796048],
                            [35.605063, 114.982503],
                            [38.41883, 112.811622]
                        ]
                    }
                },
                center: { // 中心点
                    type: Array,
                    default: function() {
          
                        return [38.05, 114.48]
                    }
                },
                zoom: { // 缩放系数
                    type: Number,
                    default: 7
                },
                minZoom: { // 最小缩放系数
                    type: Number,
                    default: 6
                },
                maxZoom: { // 最大缩放系数
                    type: Number,
                    default: 15
                },
                attributionControl: { // 右下角控制点
                    type: Boolean,
                    default: false
                },
                ismouseMark: { // 手动标记
                    type: Boolean,
                    default: false
                },
                showPopup: { // 显示提示
                    type: Boolean,
                    default: true
                },
                pointRemove: { // 标记点移除
                    type: Boolean,
                    default: false
                }
            },
            mounted() {
                this.init()
            },
            created() {
                this.pointerSearch({
                    size: 10000
                });
            },
            methods: {
                // 站点
                pointerSearch(params) {
                    (async() => {
                        try {
                            let info = await Pointer.pointer_search(params)
                            this.pointer_list = info.content
                            this.point_add()
                        } catch(error) {
                            this.$message.error('数据获取失败')
                        }
                    })()
                },
                // 详情
                dataTimeSearch(params, fn) {
                    (async() => {
                        try {
                            let info = await Data.data_time_search(params)
                            this.current_point_data = info.data.content[0]
                            fn && fn()
                        } catch(error) {
                            this.$message.error('数据获取失败')
                        }
                    })()
                },
                // 初始化
                init() {
                    let _this = this;
                    let gdLayer = L.tileLayer('http://t{s}.tianditu.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}', {
                        subdomains: ['0', '1', '2', '3', '4', '5', '6', '7']
                    })
                    var normal = L.layerGroup([gdLayer])
                    this.map = L.map(_this.$refs.lyMap, {
                        attributionControl: _this.attributionControl, // 取消右下角logo
                        zoom: _this.zoom, // 默认缩放级别
                        minZoom: _this.minZoom, // 最新缩放
                        maxZoom: _this.maxZoom, // 最大缩放
                        layers: [normal], // 设置图层
                        maxBounds: [
                            [43.186231, 118.422797],
                            [40.081638, 120.796048],
                            [35.605063, 114.982503],
                            [38.41883, 112.811622]
                        ]
                    }).setView(this.center);
    
                    L.geoJSON(geoJson, {
                        style() {
                            return {
                                color: 'gray',
                                fillColor: '#fff',
                                weight: 2
                            }
                        }
                    }).addTo(this.map);
                },
                // 批量添加Mark标记点
                point_add() {
                    let _this = this
                    this.layer_on_line = new L.layerGroup()
                    this.layer_off_line = new L.layerGroup()
                    let on_line = 0,
                        off_line = 0
                    for(let i = 0; i < this.pointer_list.length; i++) {
                        let li = this.pointer_list[i]
                        let marks = null
                        if(li.state == 1) {
                            marks = L.marker([li.lat, li.lng], {
                                icon: _this.markicon_on_line
                            })
                            marks.addTo(this.layer_on_line)
                        } else {
                            marks = L.marker([li.lat, li.lng], {
                                icon: _this.markicon_off_line
                            })
                            marks.addTo(this.layer_off_line)
                        }
    
                        marks.on('click', function() {
          
                            _this.dataTimeSearch({
                                ptids: li.ptid,
                                dataType: 1,
                                datatime: moment().format('YYYY-MM-DD HH:mm:00')
                            }, function() {
          
                                let jsondata = {
                                    name: li.name,
                                    data: _this.current_point_data,
                                    datatime: moment(_this.current_point_data.datatime).format('YYYY/MM/DD HH:mm')
                                }
                                marks.bindPopup(_this.popupHtml(jsondata)).openPopup()
                            })
                        })
                    }
                    let otherLayer = {}
                    let markerLayer = {
                        "在线": this.layer_on_line,
                        "离线": this.layer_off_line,
                    }
                    _this.map.addLayer(_this.layer_on_line)
                    _this.map.addLayer(_this.layer_off_line)
                    L.control.layers(otherLayer, markerLayer).addTo(this.map);
                },
    
                // 定义标记点弹出内容模板
                popupHtml(json) {
                    let htmls = `
                            <div style="width:300px;height:auto;">
                                <p style='font-size:16px;margin:0 0 10px'>${json.name}</p>
                                <p style='font-size:14px;margin:0 0 10px'>${json.datatime}</p>
                                <table class='ly_tables' style='width: 100%;text-align: center;border-collapse: collapse;border-spacing: 0;'>
                                    <tbody>
                                        <tr>
                                            <td style='border: 1px solid #ccc;line-height: 26px;'>SO2</td>
                                            <td style='border: 1px solid #ccc;line-height: 26px;'>${json.data.value_4402}</td>
                                            <td style='border: 1px solid #ccc;line-height: 26px;'>CO</td>
                                            <td style='border: 1px solid #ccc;line-height: 26px;'>${json.data.value_4404}</td>
                                            <td style='border: 1px solid #ccc;line-height: 26px;'>NO2</td>
                                            <td style='border: 1px solid #ccc;line-height: 26px;'>${json.data.value_4467}</td>
                                        </tr>
                                        <tr>
                                            <td style='border: 1px solid #ccc;line-height: 26px;'>O3-1h</td>
                                            <td style='border: 1px solid #ccc;line-height: 26px;'>${json.data.value_4471}</td>
                                            <td style='border: 1px solid #ccc;line-height: 26px;'>PM10</td>
                                            <td style='border: 1px solid #ccc;line-height: 26px;'>${json.data.value_4486}</td>
                                            <td style='border: 1px solid #ccc;line-height: 26px;'>PM2.5</td>
                                            <td style='border: 1px solid #ccc;line-height: 26px;'>${json.data.value_448A}</td>
                                        </tr>
                                        <tr>
                                            <td style='border: 1px solid #ccc;line-height: 26px;'>湿度</td>
                                            <td style='border: 1px solid #ccc;line-height: 26px;'>${json.data.value_2473}</td>
                                            <td style='border: 1px solid #ccc;line-height: 26px;'>温度</td>
                                            <td style='border: 1px solid #ccc;line-height: 26px;'>${json.data.value_2481}</td>
                                            <td style='border: 1px solid #ccc;line-height: 26px;'>风速</td>
                                            <td style='border: 1px solid #ccc;line-height: 26px;'>${json.data.value_2483}</td>
                                        </tr>
                                        <tr>
                                            <td style='border: 1px solid #ccc;line-height: 26px;'>风向</td>
                                            <td style='border: 1px solid #ccc;line-height: 26px;'>${json.data.value_2484}</td>
                                            <td style='border: 1px solid #ccc;line-height: 26px;'>能见度</td>
                                            <td style='border: 1px solid #ccc;line-height: 26px;'>${json.data.value_4474}</td>
                                            <td style='border: 1px solid #ccc;line-height: 26px;'>大气压</td>
                                            <td style='border: 1px solid #ccc;line-height: 26px;'>${json.data.value_4482}</td>
                                        </tr>
                                    </tbody>
                                </table>
                        </div>
                        `
                    return htmls
                }
            }
        }
    </script>
    
    <style scoped="scoped">
        .leaflet-control-layers-selector {
            opacity: 1 !important;
        }
    
        .ly_tables {
            width: 100%;
            text-align: center;
            border-collapse: collapse;
            border-spacing: 0;
        }
    
        .ly_tables tr td {
            border: 1px solid #ccc;
            line-height: 26px;
        }
    </style>