如何为绘制在L.canvas渲染器上的小叶标记设置动画？
如何为绘制在L.canvas渲染器上的小叶标记设置动画？
提问于 2020-01-29 00:06:00
我有一个带有标记的单张图表，这些标记扩展了L.CircleMarker类，然后定义了一个用户定义的路径，允许我们在画布上绘制定制的形状。在这篇精彩的answer中，rioV8展示了这一点。我想动画这些标记，如果可能的话，请。附加的代码显示了两个标记，一个是脉动的circleMarker，一个是自定义的，尽管我希望它是静态的。
有没有可能让它动起来/跳动？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--jquery -->
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<!--d3 -->
<script src='https://d3js.org/d3.v4.min.js'></script>
<!-- leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet-src.js"></script>
<style>
#map {
height: 800px;
}
.pulse {
animation: pulsate 1s ease-out;
-webkit-animation: pulsate 1s ease-out;
-webkit-animation-iteration-count: infinite;
opacity: 0.0
}
@keyframes pulsate {
0% {
transform: opacity: 1.0;
}
75% {
opacity: 1.0;
}
100% {
transform: opacity: 0.0;
}
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var uk = [
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {'city': 'Paris'},
"geometry": {
"type": "Point",
"coordinates": [2.3522, 48.8566]
}
},
]
}];
var france = [
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {'city': 'London'},
"geometry": {
"type": "Point",
"coordinates": [-0.133869, 51.510067
]
}
}
]
}];
L.Canvas.include({
_updateMarkerSquare: function (layer) {
if (!this._drawing || layer._empty()) {
return;
}
var p = layer._point,
ctx = this._ctx,
r = Math.max(Math.round(layer._radius), 5);
this._drawnLayers[layer._leaflet_id] = layer;
ctx.beginPath();
ctx.moveTo(p.x - r, p.y - r);
ctx.lineTo(p.x + r, p.y - r);
ctx.lineTo(p.x + r, p.y + r);
ctx.lineTo(p.x - r, p.y + r);
ctx.lineTo(p.x - r, p.y - r);
ctx.closePath();
this._fillStroke(ctx, layer);
}
});
var myMarker = L.CircleMarker.extend({
_updatePath: function () {
if (this.options.shape === "square")
this._renderer._updateMarkerSquare(this);
}
});
var myRenderer = L.canvas({
padding: 0.5,
});
var map = L.map("map").setView([49.2, 0], 6)
var myRenderer = L.canvas({
padding: 0.5,
});
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
//create marker layer and display it on the map
ukLayer = L.geoJson(uk, {
pointToLayer: function (feature, latlng) {
return new myMarker(latlng, {
shape: 'square',
color: 'red',
// interactive: false,
renderer: myRenderer,
className: 'pulse'
})
}
}).addTo(map);
franceLayer = L.geoJson(france, {
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, {
className: 'pulse'
})
}
}).addTo(map);
</script>
</body>
</html>
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-01-29 00:13:24
将css类添加到画布层。
var myRenderer = L.canvas({
padding: 0.5,
});
//...
L.DomUtil.addClass(myRenderer._container, "pulse");页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59952702
复制相关文章
相似问题
腾讯云开发者
