感谢:

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:;
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:;
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:;
}
100% {
width: 200px;
height: 200px;
opacity: 0.4;
}
} @-moz-keyframes highlight1 {
0% {
width: 0px;
height: 0px;
opacity:;
}
100% {
width: 200px;
height: 200px;
opacity: 0.4;
}
} @-ms-keyframes highlight1 {
0% {
width: 0px;
height: 0px;
opacity:;
}
100% {
width: 200px;
height: 200px;
opacity: 0.4;
}
} @-o-keyframes highlight1 {
0% {
width: 0px;
height: 0px;
opacity:;
}
100% {
width: 200px;
height: 200px;
opacity: 0.4;
}
} @keyframes highlight1 {
0% {
width: 0px;
height: 0px;
opacity:;
}
100% {
width: 200px;
height: 200px;
opacity: 0.4;
}
} @-webkit-keyframes highlight {
0% {
width: 0px;
height: 0px;
opacity:;
}
100% {
width: 50px;
height: 50px;
opacity: 0.8;
}
} @-o-keyframes highlight {
0% {
width: 0px;
height: 0px;
opacity:;
}
100% {
width: 50px;
height: 50px;
opacity: 0.8;
}
} @-moz-keyframes highlight {
0% {
width: 0px;
height: 0px;
opacity:;
}
100% {
width: 50px;
height: 50px;
opacity: 0.8;
}
} @-ms-keyframes highlight {
0% {
width: 0px;
height: 0px;
opacity:;
}
100% {
width: 50px;
height: 50px;
opacity: 0.8;
}
} @keyframes highlight {
0% {
width: 0px;
height: 0px;
opacity:;
}
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、效果展示

【GIS】Vue、Leaflet、highlightmarker、bouncemarker的更多相关文章

  1. 【GIS】Vue esri-leaflet

    1.npm install esri-leaflet --save 2.引入包 import Leaflet from "leaflet"; var esri = require( ...

  2. 【GIS】Vue修改图层透明度

    1.添加透明度控制条 <input id="slider" type="range" min="0" max="1" ...

  3. 【JeecgBoot】关于 jeecg-boot 的项目理解、使用心得和改进建议

    工欲善其事,必先利其器. 脚手架选型 一年前,我接到为团队落地一个快速开发脚手架的任务. 在月底这节骨眼上,时间紧,任务急,有想自己撸一个脚手架的人都赶紧把这想法收起来吧!这劳民又伤身的事咱肯定是不能 ...

  4. 【VNC】Linux环境VNC服务安装、配置与使用

     [VNC]Linux环境VNC服务安装.配置与使用 2009-06-25 15:55:31 分类: Linux   前言:作为一名DBA,在创建Oracle数据库的过程中一般要使用dbca和netc ...

  5. 【MySQL】Linux下MySQL 5.5、5.6和5.7的RPM、二进制和源码安装

      [MySQL]Linux下MySQL 5.5.5.6和5.7的RPM.二进制和源码安装 1.1  BLOG文档结构图 1.2  前言部分 1.2.1  导读和注意事项 各位技术爱好者,看完本文后, ...

  6. 【转】Python基础-封装与扩展、静态方法和类方法

    [转]Python基础-封装与扩展.静态方法和类方法 一.封装与扩展 封装在于明确区分内外,使得类实现者可以修改封装内的东西而不影响外部调用者的代码:而外部使用者只知道一个接口(函数),只要接口(函数 ...

  7. 【转】shell编程下 特殊变量、test / [ ]判断、循环、脚本排错

    [转]shell编程下 特殊变量.test / [ ]判断.循环.脚本排错 第1章 shell中的特殊变量 1.1 $# $# 表示参数的个数 1.1.1 [示例]脚本内容 [root@znix ~] ...

  8. 【树莓派】树莓派与XBMC及Kodi、LibreELEC插件(二)

    之前的相关文章参考: [树莓派]树莓派与XBMC及Kodi.LibreELEC插件(一) [树莓派]树莓派与XBMC及Kodi.LibreELEC插件(二) [树莓派]树莓派与XBMC及Kodi.Li ...

  9. 【树莓派】树莓派与XBMC及Kodi、LibreELEC插件(一)

    网上高人多. 高手在民间,饭桶在机关. 越用树莓派,越发现这玩意儿的潜力,我想,未来我们用它,可以做很多事情. 最近在看树莓派的应用场景,看到网上有人用它做电视盒子. 参考相关文章,简单实践了一下,整 ...

随机推荐

  1. pthread_once详解和使用

    转自:pthread_once()函数详解 .pthread_once()使用 在多线程环境中,有些事仅需要执行一次.通常当初始化应用程序时,可以比较容易地将其放在main函数中.但当你写一个库时,就 ...

  2. windows命令行下杀死进程的方法

    xp和win7下有两个好东东tasklist和tskill.tasklist能列出所有的进程,和相应的信息.tskill能查杀进程,语法很简单:tskill程序名!或者是tskill 进程id 例如: ...

  3. Java高编译低运行错误(ConcurrentHashMap.keySet)

    Java高编译低运行错误(ConcurrentHashMap.keySet) 调了一天: https://www.jianshu.com/p/f4996b1ccf2f

  4. Openstack配置文件管理的变迁之路

    在管理一个Openstack集群时,如何维护配置文件无疑是其中最艰难和繁琐的任务之一.因为你不仅要面对众多的核心服务(nova,keystone,glance,cinder,etc)的配置文件,还需要 ...

  5. Android中windowTranslucentStatus与windowTranslucentNavigation的一些设置(转)

    在iOS中,你可能发现页面会整体拉升到状态栏,整个页面效果就会显得更加的高端大气上档次,在Android4.4以后其实也有这种效果的实现,下面我就说一下在进行这种效果实现时碰到的一些坑,希望对大家有一 ...

  6. SpringBoot集成redis的LBS功能

    下面的代码实现了添加经纬度数据 和 搜索经纬度数据的功能: import java.util.List; import com.longge.goods.dto.BuildingDto; import ...

  7. OpenWrt 18.06.1的ss-redir, 以及在乐视超4 X40上看Youtube

    在18.06里面要设个透明代理, 就一直不成功 各种TIME OUT, PRIVATE SSL ERROR, 换回旧版的luci-app-shadowsocks也不行. 我就一直想, 到底这东西还能有 ...

  8. hdoj 2594 Simpsons’ Hidden Talents 【KMP】【求串的最长公共前缀后缀】

    Simpsons' Hidden Talents Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java ...

  9. javascript中return function与return function()的区别

    参考https://stackoverflow.com/questions/7629891/functions-that-return-a-function-javascript 问题:唯一的区别是r ...

  10. Swift 类型桥接

    前言 iOS 中的 API 基本都是在许多年前由 OC 写成的,现在通过桥接的方法在 Swift 中可以用,基本看不出区别,非常自然.但是一些特殊的类型,在两种语言进行桥接的时候需要特别注意. 1.N ...