传单贴图:动画矩形在3秒后淡出

Leaflet Maps: Animate rectangle to fade out after a 3 seconds

本文关键字：3秒 淡出 画矩形 单贴图 动画      更新时间：2023-09-26

在我的传单地图中，我使用绑定函数缩放到某个区域。当地图放大时，由坐标形成一个矩形。

例子http://jsfiddle.net/PHDduggs/u1nqwe9s/4/

是否可以让矩形在3秒后逐渐消失

感谢javascript页面

        // set urls for maps
    var oceans = new L.TileLayer("http://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/{z}/{y}/{x}.png");


    /// location of map load
    var map = L.map('map', {
        center: [53.01478, -10.34157],
        zoom: 4,
        layers: [oceans],
        detectRetina: true,
        minZoom:4

    });
    //add map tp the baselayer group
    var baseLayers = {
        "Oceans": oceans,

    };
    L.control.layers(baseLayers).addTo(map);

// add real map of ireland to the map from marine servers
   // define rectangle geographical bounds
 var bounds = [[54.559322, -5.767822], [56.1210604, -3.021240]];
// create an orange rectangle
  L.rectangle(bounds, { weight: 1.0, color:  "blue", fill:"True" }).addTo(map);

// zoom the map to the rectangle bounds
 map.fitBounds(bounds);
HTML页面

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<!-- Load Esri Leaflet from CDN -->
<script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet/0.0.1-beta.5/esri-leaflet.js"></script>  
<div class="dark" runat="server" id="map" style="width: 100%; height: 400px; border:1px solid black;" ></div>
CSS页

<style>
    #tag {
        width: 100px;
        margin: 3px;
    }
</style>

这是一个可能性(使用jQuery)

为矩形添加一个类

// create an orange rectangle
var rect = L.rectangle(bounds, { weight: 1.0, color:  "blue", fill:"True", className: "auto_hide" });
rect.addTo(map);

当地图被缩放时，添加一个3秒的超时和淡出你的矩形(注意，矩形将是不可见的，但仍然存在)

// wait for 3sec to hide rectangle smoothly
setTimeout(function(){
    $(".auto_hide").animate({ opacity: 0 }, 500, function() {
       // Animation complete.
  });
}, 3000);

下面是一个例子:http://jsfiddle.net/FranceImage/pc9r2s35/

相关文章：