Question

由于某些原因，一旦渲染了地图图块，我的多边形就不会显示。它们在地图上绘制，但在渲染地图图块后消失。

我已经创建了JSFiddle问题的示例。多边形应位于地图的中心，只要将鼠标悬停在多边形区域上，鼠标指针就会发生变化。有时我会在渲染切片之前看到红色多边形显示一秒钟。所以，我知道它正在地图上绘制。这也发生在我的地图引脚上。但是，我没有在JSFiddle示例中包含地图引脚。

var tdata = '{"Latitude":79.07181,"Longitude":-100.63477,"Polygons":[[{"Item1":79,"Item2":-100},{"Item1":79,"Item2":-99},{"Item1":78.5,"Item2":-99},{"Item1":78.5,"Item2":-100}]]}';

dta = JSON.parse(tdata);

var map = new L.Map('map', { center: new L.LatLng(dta.Latitude, dta.Longitude), zoom: 6, maxZoom: 16, minZoom: 5 });
var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
var ggl = new L.Google();
var ggl2 = new L.Google('TERRAIN');
map.addLayer(ggl2);
map.addControl(new L.Control.Layers({ 'Street': osm }, {}));

for (var x = 0; x < dta.Polygons.length; x++) {
    var polygon = dta.Polygons[x];
    var coordinates = [[]];
    coordinates.pop();
    for (var j = 0; j < polygon.length; j++) {
        var point = polygon[j];
        coordinates.push(new Array(point.Item1, point.Item2));
    }

    var mapPolygon = L.polygon(coordinates,{fillColor: "#FF0000", fillOpacity: dta.Opacity, weight: '1px'});
    mapPolygon.addTo(map);
}

Answer 1

weight option必须是数字，而不是包含CSS单位的字符串。

Answer 2

发生这种情况，因为矩形在地图窗格上呈现，但Goggle图层显示在地图窗格的顶部。

一种解决方案是通过CSS设置z-index来改变地图窗格和Google图层的顺序：

.leaflet-map-pane {
    z-index: 2 !important;
}

.leaflet-google-layer {
    z-index: 1 !important;
}

示例

＆＃13;

$(function () {

    var tdata = '{"Latitude":79.07181,"Longitude":-100.63477,"Polygons":[[{"Item1":79,"Item2":-100},{"Item1":79,"Item2":-99},{"Item1":78.5,"Item2":-99},{"Item1":78.5,"Item2":-100}]]}';

    var dta = JSON.parse(tdata);

    var map = new L.Map('map', { center: new L.LatLng(dta.Latitude, dta.Longitude), zoom: 6, maxZoom: 16, minZoom: 5 });
    var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
    var ggl = new L.Google('TERRAIN');
    var layer = map.addLayer(ggl);
    map.addControl(new L.Control.Layers({ 'Street': osm }, {}));

    for (var x = 0; x < dta.Polygons.length; x++) {
        var polygon = dta.Polygons[x];
        var coordinates = [[]];
        coordinates.pop();
        for (var j = 0; j < polygon.length; j++) {
            var point = polygon[j];
            coordinates.push(new Array(point.Item1, point.Item2));
        }

        var mapPolygon = L.polygon(coordinates, { fillColor: "#FF0000", fillOpacity: dta.Opacity, weight: 1 });
        mapPolygon.addTo(map);
    }

});

＆＃13;

#map { 
    height: 600px; 
}



.leaflet-map-pane {
    z-index: 2 !important;
}

.leaflet-google-layer {
    z-index: 1 !important;
}

＆＃13;

<link rel="stylesheet" type="text/css" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css">
<script type="text/javascript" src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>
<script type="text/javascript" src="http://matchingnotes.com/javascripts/leaflet-google.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<div id="map"></div>

＆＃13;

Modified JSFiddle

使用传单消除地图多边形和标记

2 个答案: