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

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

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

<template>
    <!--定义GIS初始化的DOM节点-->
    <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>

转载自：https://blog.csdn.net/zhu1500527791/article/details/81273060