Javascript google地图中的多Geojson源层排序问题

我尝试将多个geojson文件加载到我的google地图中，所有这些文件都显示出来。但是谷歌地图显示它们的方式确实是随机的

以下是我的想法：

• 我有一个多边形，我打算作为一个基础层，假设出现在第一

• 我还有其他多边形和线串，它们将从数据库中动态更改，并假设显示在基础层的顶部

有时基础层会出现在顶部，反之亦然。有时，一些线串显示在基础层的底部，而另一些线串显示在顶部。是否有任何方法可以排序geojson层的显示方式

我发现了类似的问题： 但是，这是针对kml而不是geojson的

var map;
var src = '<?php echo base_url() ?>assets/map_files/global/barudt.json';

function initMap() {
map = new google.maps.Map(document.getElementById('googlemapsBorders'), {
    center: new google.maps.LatLng(-0.7, 115.2422315),
    zoom: 9,
    mapTypeId: 'roadmap'
});

var infoWindows = new google.maps.InfoWindow({
    disableAutoPan: true
});
var infoJalan = new google.maps.InfoWindow();

map.data.loadGeoJson(src);
map.data.setStyle(function(feature) {
    var color = feature.getProperty('color');

    return /** @type {!google.maps.Data.StyleOptions} */ ({
        fillColor: color,
        strokeColor: color,
        strokeWeight: 2
    });
});

// When the user clicks, set 'isColorful', changing the color of the letters.
map.data.addListener('click', function(event) {
    event.feature.setProperty('isColorful', true);
});


map.data.addListener('mouseover', function(event) {
    map.data.revertStyle();
    map.data.overrideStyle(event.feature, {
        strokeWeight: 5
    });

    var title = event.feature.getProperty('Name');
    var lt = parseFloat(event.feature.getProperty('lat'));
    var lg = parseFloat(event.feature.getProperty('lng'));

    infoWindows.setContent(title);
    infoWindows.setPosition({
        lat: lt,
        lng: lg
    });
    infoWindows.open(map);
});

map.data.addListener('mouseout', function(event) {
    map.data.revertStyle();
    infoWindows.close();
});


var jalan = JSON.parse(`<?php echo $detail; ?>`);
var jembatan = JSON.parse(`<?php echo $jembatan_detail; ?>`);
var infoWindow = new google.maps.InfoWindow(),
    marker, i;
var infoWindowContent = JSON.parse(`<?php echo ($infowindow); ?>`);
console.log(jalan);
console.log(jembatan);
console.log(infoWindowContent);


jalanLayer = new google.maps.Data({
    map: map,
    style: {
        strokeColor: 'red',
        strokeWeight: 5
    }
});

for (i = 0; i < jalan.length; i++) {
    jalanLayer[i] = new google.maps.Data({
        map: map,
        style: {
            strokeColor: 'red',
            strokeWeight: 3,
            fillColor: 'blue'
        }
    });

    jalanLayer[i].loadGeoJson('<?php echo base_url('
        assets / map_files / ') ?>' + jalan[i][1]);

    var lt;
    var lg;

    jalanLayer[i].addListener('click', function(event) {
        //alert("Latitude: " + event.latLng.lat() + " " + ", longitude: " + event.latLng.lng());
        lt = parseFloat(event.latLng.lat());
        lg = parseFloat(event.latLng.lng());
        console.log(event.latLng.lat() + ',' + event.latLng.lng());
    });

    google.maps.event.addListener(jalanLayer[i], 'click', (function(nama, i) {
        return function() {

            var title;
            jalanLayer[i].forEach(function(feature) {


                title = "<div id=content>\n\
                                    <div id=bodyContent>\n\
                                    <table><tr><td>Nama Ruas Jalan</td><td>:</td><td><b>" + jalan[i][2] + "</b></td></tr><tr><td>Status Ruas Jalan</td><td>:</td><td><b>" + jalan[i][4] + "</b></td></tr><tr><td>Fungsi Ruas Jalan</td><td>:</td><td><b>" + jalan[i][3] + "</b></td></tr></table></div></div>";
            });




            infoJalan.setContent(title);
            infoJalan.setPosition({
                lat: lt,
                lng: lg
            });
            infoJalan.open(map);

            map.setZoom(14);
            map.setCenter(infoJalan.getPosition());
        };
    })(jalanLayer[i], i));

    google.maps.event.addListener(jalanLayer[i], 'mouseover', (function(nama, i) {
        return function() {
            jalanLayer[i].setStyle({
                strokeColor: 'yellow'
            });
        };
    })(jalanLayer[i], i));

    google.maps.event.addListener(jalanLayer[i], 'mouseout', (function(nama, i) {
        return function() {
            jalanLayer[i].setStyle({
                strokeColor: 'red'
            });
        };
    })(jalanLayer[i], i));



}


for (i = 0; i < jembatan.length; i++) {
    if (jembatan[i][4]) {
        var icon = {
            url: 'https://dispupr.baritoutarakab.go.id/assets/map_icon/jembatan.png',
            scaledSize: new google.maps.Size(40, 40)
        };
        var position = new google.maps.LatLng(jembatan[i][2], jembatan[i][3]);
        marker = new google.maps.Marker({
            position: position,
            map: map,
            icon: icon,
            title: jembatan[i][1]
        });

        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
            };
        })(marker, i));
    }
}

var area = new google.maps.Data({
    map: map
});
area.loadGeoJson('<?php echo base_url() ?>assets/map_files/area/danau_butong.geojson');
area.setStyle({
    fillColor: 'blue',
    strokeColor: 'blue',
    strokeWeight: 2
});

area.addListener('click', function(event) {
    lt = parseFloat(event.latLng.lat());
    lg = parseFloat(event.latLng.lng());
    console.log(event.latLng.lat() + ',' + event.latLng.lng());
});

}

var映射；
var src='assets/map_files/global/barudt.json'；
函数initMap（）{
map=new google.maps.map（document.getElementById（'googlemapsBorders'）{
中心：新google.maps.LatLng（-0.7115.2422315），
缩放：9，
mapTypeId:“路线图”
});
var infoWindows=new google.maps.InfoWindow({
真的吗
});
var infoJalan=new google.maps.InfoWindow（）；
map.data.loadGeoJson（src）；
map.data.setStyle（函数（特性）{
var color=feature.getProperty（'color'）；
return/**@type{！google.maps.Data.StyleOptions}*/({
fillColor:color，
strokeColor：颜色，
冲程重量：2
});
});
//当用户单击时，设置“isColorful”，更改字母的颜色。
map.data.addListener（'click'，函数（事件）{
event.feature.setProperty（'isColorful'，true）；
});
map.data.addListener（'mouseover'，函数（事件）{
map.data.revertStyle（）；
map.data.overrideStyle（event.feature{
冲程重量：5
});
var title=event.feature.getProperty（'Name'）；
var lt=parseFloat（event.feature.getProperty（'lat'））；
var lg=parseFloat（event.feature.getProperty（'lng'）；
infoWindows.setContent（标题）；
infoWindows.setPosition({
拉特：上尉，
液化天然气：lg
});
打开（地图）；
});
map.data.addListener（'mouseout'，函数（事件）{
map.data.revertStyle（）；
infoWindows.close（）；
});
var jalan=JSON.parse（``）；
var jembatan=JSON.parse（``）；
var infoWindow=new google.maps.infoWindow（），
马克，我；
var infoWindowContent=JSON.parse（``）；
控制台日志（jalan）；
控制台日志（jembatan）；
console.log（infoWindowContent）；
jalanLayer=新的google.maps.Data({
地图：地图，
风格：{
strokeColor:'红色'，
冲程重量：5
}
});
对于（i=0；i

数据层支持在“样式设置”功能中的多边形上设置

您没有提供GeoJSON，但使用Google的示例数据，您可以执行以下操作：

    map.data.setStyle(function(feature) {
      var color = 'gray';
      var letter = feature.getProperty('letter')
      var zIndex = 0;
      if (letter) {
        zIndex = 1;
        if (feature.getProperty('isColorful')) {
          color = feature.getProperty('color');
        }
      }
      return /** @type {!google.maps.Data.StyleOptions} */({
        fillColor: color,
        strokeColor: color,
        strokeWeight: 2,
        zIndex: zIndex
      });
    });

代码片段：

html，
身体，
#地图{
身高：100%；
保证金：0；
填充：0；
}

var映射；
函数initMap（）{
map=new google.maps.map（document.getElementById（'map'）{
缩放：4，
中心：{
拉丁语：-28，
液化天然气：137