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

最新推荐文章于 2024-08-15 17:17:10 发布

Afeyer

最新推荐文章于 2024-08-15 17:17:10 发布

阅读量1.7k

点赞数

分类专栏： Webgis 文章标签： Leaflet WebGis

本文链接：https://blog.csdn.net/zhu1500527791/article/details/81273060

版权

本文档展示了如何在基于Leaflet的WebGIS应用中，详细展示点位数据。作者在忙碌的工作中挤出时间分享了直接有效的代码片段。

摘要由CSDN通过智能技术生成

不加班会死星人正在发烧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,