leaflet地图+vue 简单效果

西瓜味白桃汽水

已于 2022-08-29 08:47:43 修改

阅读量425

点赞数

文章标签： vue.js javascript 前端

于 2022-08-27 14:30:36 首次发布

本文链接：https://blog.csdn.net/weixin_51109349/article/details/126557730

版权

在这里插入图片描述

实现效果：

左边分页效果每次呈现2个
点击加圆按钮实现地图出现圆圈
页面中心点跟随点击移动
点击标记点出现弹窗
鼠标移入标记点出现提示框
单独一个标记点闪烁
点击左边地址列表实现标记点选中跳转中心点

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
        integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
        crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
        integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
        crossorigin=""></script>
    <style>
        * {
            font-size: 20px;
            box-sizing: border-box;
        }

        body {
            margin: 0;
        }

        #app {
            display: flex;
            height: 100vh;
        }

        aside {
            flex: 0 0 300px;
            background: #f0f0f0;
            padding: 30px;
        }

        aside li {
            cursor: pointer;
        }

        .add {
            position: relative;
            top: 100px;
        }

        #mapid {
            flex: 1;
        }

        @keyframes wxBlinking {
            from {

                opacity: 0;
            }

            to {

                opacity: 1;
            }
        }

        .blinking {
            animation: wxBlinking 0.2s infinite alternate;
        }
    </style>
</head>

<body>

    <div id="app">
        <aside>
            <ul>
                <li v-for="d in currentList" :key="d.title" @click="goPoint(d.title)">{{d.title}}</li>
            </ul>
            <button :disabled="page===1" @click="page--">上一页</button>
            <button :disabled="page===Math.ceil(mapList.length/pageSize)" @click="page++">下一页</button>
            <button @click="pintCircle">加圆</button>
        </aside>
        <div id="mapid"></div>
    </div>


</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
<script>
    // 地图初始化中心点设置在 { lat: 39.8831, lon: 116.4104 }
    new Vue({
        el: '#app',
        data() {
            return {
                mapList: [{
                    lat: 39.939251,
                    lon: 116.377043,
                    title: '平安里',
                    info: '北京市西城区赵登禹路与平安里交叉路口'
                }, {
                    lat: 39.9432,
                    lon: 116.433979,
                    title: '北京中医药大学东直门医院',
                    info: '北京市东城区海运仓5号'
                }, {
                    lat: 39.921342,
                    lon: 116.450437,
                    title: '日坛公园',
                    info: '北京市朝阳区朝阳门外日坛北路6号'
                }, {
                    lat: 39.932909,
                    lon: 116.39548,
                    title: '北海公园',
                    info: '北京市西城区文津街1号'
                }, {
                    lat: 39.924825,
                    lon: 116.363975,
                    title: '金融街国际',
                    info: '北京市西城区金融大街9-11号'
                }, {
                    lat: 39.924091,
                    lon: 116.403414,
                    title: '故宫博物院',
                    info: '北京市东城区景山前街4号'
                }, {
                    lat: 40.007228,
                    lon: 116.399576,
                    title: '北京奥林匹克公园',
                    info: '北京市朝阳区北辰东路15号'
                }],
                page: 1, //页数，数组长度/2向上取整
                pageSize: 2, //每页2页
                // mymap: null,
                circle: null,
            }
        },
        methods: {
            pintCircle() { //点击实现圆圈切换
                if (this.circle) { //如果有就清除
                    this.mymap.removeLayer(this.circle);
                    this.circle = null
                } else { //没有就添加
                    this.circle = L.circle([39.8831, 116.4104], {
                        color: 'red',
                        fillColor: '#f03',
                        fillOpacity: 0.5,
                        radius: 500
                    }).addTo(this.mymap);
                    this.mymap.panTo([39.8831, 116.4104]); //定义圆圈，中心点移动到圆圈
                }
            },
            goPoint(d) { //点击标记点实现移动到页面中心点
                const a = this.mapList.find(i => i.title === d)
                this.mymap.panTo([a.lat, a.lon]);
            }
        },
        computed: {
            currentList() { //分页计算每页显示两个
                return this.mapList.slice((this.page - 1) * this.pageSize, this.page * this.pageSize)

            }
        },
        watch: {
            currentList: { //监听currentList变化，更新页面标记点
                handler() {
                    this.$nextTick(() => {
                        //this.myGroup存储标记点变量
                        if (this.myGroup) { //如果页面有标记点就清除
                            this.myGroup.clearLayers(); //清除地图所有坐标点
                        }
                        var layers = [] //标记点数组
                        this.currentList.forEach(i => {
                            var layer = new L.marker([i.lat, i.lon], {
                                    title: i.title,
                                    panTo: [i.lat, i.lon],
                                }).addTo(this.mymap)
                                .on("click", e => {
                                    var html = `
                                    <p>${ i.title}</p>
                                    <p>${i.info}</p>
                                    <p>${i.lat}-${i.lon}</p>
                                    `
                                    //鼠标移入弹窗
                                    layer.bindPopup(html).openPopup();
                                })

                            layers.push(layer);
                            this.mymap.panTo([i.lat, i.lon]);
                        });

                        this.myGroup = L.layerGroup(layers); //把标记点放到标记点变量上
                        this.mymap.addLayer(this.myGroup); //页面根据标记点变量渲染标记点

                    })
                },
                immediate: true
            },


        },
        mounted() { //页面一开始渲染地图
            this.mymap = L.map('mapid').setView([39.8831, 116.4104], 13); //设置地图和初始中心
            L.tileLayer L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(this.mymap);.addTo(this.mymap);


            let icon = L.icon({ //设置闪烁标记点，添加blinking闪烁类名
                iconUrl: 'https://unpkg.com/leaflet@1.8.0/dist/images/marker-icon.png',
                iconSize: [25, 41],
                className: 'blinking'
            })

            var layer1 = L.marker([39.91006, 116.40277], { //自定义标记点样式
                icon: icon
            }).addTo(this.mymap).openPopup()
        },
    })
</script>

</html>