【GIS】Vue、Leaflet、highlightmarker、bouncemarker

感谢：

https://github.com/brandonxiang/leaflet.marker.highlight

https://github.com/maximeh/leaflet.bouncemarker

1、导入highlightmarker库

import highlightmarker from "../lib/leaflet/leaflet.marker.highlight.js";
import "../lib/leaflet/leaflet.marker.highlight.css";

2、定制Icon

复制代码
delete L.Icon.Default.prototype._getIconUrl;

L.Icon.Default.mergeOptions({
  iconRetinaUrl: require("../lib/leaflet/images/marker-icon-2x.png"),
  iconUrl: require("../lib/leaflet/images/marker-icon.png"),
  shadowUrl: require("../lib/leaflet/images/marker-shadow.png")
});

import bouncemarker from "../lib/leaflet/leaflet.bouncemarker.js";
复制代码

3、使用Marker

复制代码
        that.markerPoint = L.marker([e.latlng.lat, e.latlng.lng], {
          highlight: "permanent",
          bounceOnAdd: true,
          bounceOnAddOptions: { duration: 500, height: 100, loop: 2 },
          bounceOnAddCallback: function() {
            console.log("done");
          }
        }).addTo(that.mapR);

        that.markerPoint.on("click", function() {
          console.log("click");
          that.markerPoint.bounce({ duration: 500, height: 100 });
        });
复制代码

4、由于webpack编译过程中会删减css信息，导致开发状态有高亮效果，而发布之后没有，所以需要修改leaflet.marker.highlight.css文件，以兼容浏览器

复制代码
.leaflet-marker-pane .light {
    width: 200px!important;
    height: 200px!important;
    margin-top: -100px!important;
    margin-left: -100px!important;
    /*transform: translate(-50%, -50%);*/
    background: transparent!important;
    border: transparent!important;
}

.leaflet-marker-pane .light .glow {
    width: 0px;
    height: 0px;
    border-radius: 50%;
    opacity: 0;
    background: -webkit-radial-gradient(rgba(66, 186, 255, 1), rgba(255, 223, 67, 0) 70%);
    background: -moz-radial-gradient(rgba(66, 186, 255, 1), rgba(255, 223, 67, 0) 70%);
    background: -ms-radial-gradient(rgba(66, 186, 255, 1), rgba(255, 223, 67, 0) 70%);
    background: -o-radial-gradient(rgba(66, 186, 255, 1), rgba(255, 223, 67, 0) 70%);
    background: radial-gradient(rgba(66, 186, 255, 1), rgba(255, 223, 67, 0) 70%);
    /* background: -webkit-radial-gradient(rgba(254, 211, 0, 1), rgba(255, 223, 67, 0) 70%); */
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: all 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -moz-transition: all 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -ms-transition: all 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -o-transition: all 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

img:hover+.light.temporary .glow {
    width: 200px;
    height: 200px;
    opacity: 0.2;
    background: -webkit-radial-gradient(rgba(254, 211, 0, 1), rgba(255, 223, 67, 0) 70%);
    -webkit-transition: all 800ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -moz-transition: all 800ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -ms-transition: all 800ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -o-transition: all 800ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all 800ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.leaflet-marker-pane .light .flare {
    width: 0px;
    height: 0px;
    border-radius: 50%;
    opacity: 0;
    background: rgba(255, 223, 67, 0);
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: all 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -moz-transition: all 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -ms-transition: all 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -o-transition: all 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

img:hover+.light.temporary .flare {
    width: 50px;
    height: 50px;
    opacity: 0.5;
    background: rgba(254, 211, 0, 1);
    -webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -moz-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -ms-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -o-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@-webkit-keyframes highlight1 {
    0% {
        width: 0px;
        height: 0px;
        opacity: 0;
    }
    100% {
        width: 200px;
        height: 200px;
        opacity: 0.4;
    }
}

@-moz-keyframes highlight1 {
    0% {
        width: 0px;
        height: 0px;
        opacity: 0;
    }
    100% {
        width: 200px;
        height: 200px;
        opacity: 0.4;
    }
}

@-ms-keyframes highlight1 {
    0% {
        width: 0px;
        height: 0px;
        opacity: 0;
    }
    100% {
        width: 200px;
        height: 200px;
        opacity: 0.4;
    }
}

@-o-keyframes highlight1 {
    0% {
        width: 0px;
        height: 0px;
        opacity: 0;
    }
    100% {
        width: 200px;
        height: 200px;
        opacity: 0.4;
    }
}

@keyframes highlight1 {
    0% {
        width: 0px;
        height: 0px;
        opacity: 0;
    }
    100% {
        width: 200px;
        height: 200px;
        opacity: 0.4;
    }
}

@-webkit-keyframes highlight {
    0% {
        width: 0px;
        height: 0px;
        opacity: 0;
    }
    100% {
        width: 50px;
        height: 50px;
        opacity: 0.8;
    }
}

@-o-keyframes highlight {
    0% {
        width: 0px;
        height: 0px;
        opacity: 0;
    }
    100% {
        width: 50px;
        height: 50px;
        opacity: 0.8;
    }
}

@-moz-keyframes highlight {
    0% {
        width: 0px;
        height: 0px;
        opacity: 0;
    }
    100% {
        width: 50px;
        height: 50px;
        opacity: 0.8;
    }
}

@-ms-keyframes highlight {
    0% {
        width: 0px;
        height: 0px;
        opacity: 0;
    }
    100% {
        width: 50px;
        height: 50px;
        opacity: 0.8;
    }
}

@keyframes highlight {
    0% {
        width: 0px;
        height: 0px;
        opacity: 0;
    }
    100% {
        width: 50px;
        height: 50px;
        opacity: 0.8;
    }
}

.permanent .glow {
    background: -webkit-radial-gradient(rgba(66, 186, 255, 1), rgba(255, 223, 67, 0) 70%);
    background: -moz-radial-gradient(rgba(66, 186, 255, 1), rgba(255, 223, 67, 0) 70%);
    background: -ms-radial-gradient(rgba(66, 186, 255, 1), rgba(255, 223, 67, 0) 70%);
    background: -o-radial-gradient(rgba(66, 186, 255, 1), rgba(255, 223, 67, 0) 70%);
    background: radial-gradient(rgba(66, 186, 255, 1), rgba(255, 223, 67, 0) 70%);
    -webkit-animation: highlight1 2s infinite cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -moz-animation: highlight1 2s infinite cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -ms-animation: highlight1 2s infinite cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -o-animation: highlight1 2s infinite cubic-bezier(0.68, -0.55, 0.265, 1.55);
    animation: highlight1 2s infinite cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.permanent .flare {
    background: rgba(66, 186, 255, 1) !important;
    -webkit-animation: highlight 2s infinite cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -moz-animation: highlight 2s infinite cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -ms-animation: highlight 2s infinite cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -o-animation: highlight 2s infinite cubic-bezier(0.68, -0.55, 0.265, 1.55);
    animation: highlight 2s infinite cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
复制代码

5、高亮marker之后，在删除marker时候，marker删除了，高亮的光圈没有删除，故需要修改leaflet.marker.highlight.js，增加删除高亮光圈功能，增加onRemove方式

    onRemove: function (map) {
        originalOnRemove.call(this, map);
        L.DomUtil.remove(this._light);
    },

6、效果展示

 

posted @   咸鱼翻身  阅读(557)  评论(0)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
阅读排行：
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· 单线程的Redis速度为什么快？
· 展开说说关于C#中ORM框架的用法！
· Pantheons：用 TypeScript 打造主流大模型对话的一站式集成库
点击右上角即可分享
微信分享提示