Question

我正在某个国家/地区的谷歌地图中加载数据图层（它是一个国家/地区的图纸）：

gem install

我很确定没有，但是......我有一种方法可以检查地图的边界是否在数据层的范围内？

（基本上，我想知道，当用户在地图上导航时，如果当前视口位于数据层内）;

map.data.addGeoJson(geoJsonObject);

也许我可以在西南边界的位置查询数据层并检查一些道具。表明我在那个数据层内？

或者至少：

有没有人知道如何以编程方式获取某个特征对象，知道lat和long？

此处谷歌地图使用事件来访问要素对象：

var bounds = this.map.getBounds();
var sw = bounds.getSouthWest();

但我不想使用事件。 是否有方法提供点的坐标并获取要素对象？ 类似的东西：

 map.data.addListener('click', function(event) {
    event.feature.setProperty('isColorful', true);
  });

Answer 1

google.maps.LatLngBounds.contains函数可用于此目的，但由于它接受单个位置，因此建议使用以下解决方案：

1）从GeoJSON坐标初始化数据层边界：

var dataLayer = map.data;
var layerBounds = new google.maps.LatLngBounds();
//1.collect all coordinates from data layer
dataLayer.forEach(function(f) {
    var geometry = f.getGeometry();
    processCoordinates(geometry, layerBounds.extend, layerBounds);
});

2）确定地图边界是否在图层边界内：

if (layerBounds.contains(map.getBounds().getNorthEast()) && layerBounds.contains(map.getBounds().getSouthWest())) {
  //...   
}

工作示例

在提供的示例中，如果是地图，将显示绿色区域边界在图层边界内，红色在相反的情况：

＆＃13;

var area;
function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        center: {
            lat: 53.349248,
            lng: -6.255323
        },
        zoom: 6,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    });

    displayDataLayer(map);

    document.getElementById("btnShow").onclick = function() {
        var result = displayDataLayerBoundsArea(map);
    };
}


function displayDataLayer(map) {
    var dataLayer = map.data;
    dataLayer.loadGeoJson('https://gist.githubusercontent.com/vgrem/440708612b574764c309/raw/2a4e2feadc204806440c51a14c2ef1f54f4fc3d8/Census2011_Province_generalised20m.json');
    dataLayer.setMap(map);
}

function displayDataLayerBoundsArea(map) {
    var dataLayer = map.data;
    var layerBounds = new google.maps.LatLngBounds();
    //1.collect all coordinates from data layer
    dataLayer.forEach(function(f) {
        var geometry = f.getGeometry();
        processCoordinates(geometry, layerBounds.extend, layerBounds);
    });

    if (area != null) {
        area.setMap(null);
    }

    //2.determine whether map bounds are contained within a layer bounds
    if (layerBounds.contains(map.getBounds().getNorthEast()) && layerBounds.contains(map.getBounds().getSouthWest())) {
        //map.fitBounds(bounds);
        area = new google.maps.Rectangle({
            strokeColor: '#00FF00',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#00FF00',
            fillOpacity: 0.35,
            map: map,
            bounds: {
                north: layerBounds.getNorthEast().lat(),
                south: layerBounds.getSouthWest().lat(),
                east: layerBounds.getNorthEast().lng(),
                west: layerBounds.getSouthWest().lng()
            }
        });
    } else {
        //map.fitBounds(bounds);
        area = new google.maps.Rectangle({
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#FF0000',
            fillOpacity: 0.35,
            map: map,
            bounds: {
                north: layerBounds.getNorthEast().lat(),
                south: layerBounds.getSouthWest().lat(),
                east: layerBounds.getNorthEast().lng(),
                west: layerBounds.getSouthWest().lng()
            }
        });
    }
}


function processCoordinates(geometry, callback, thisArg) {
    if (geometry instanceof google.maps.LatLng) {
        callback.call(thisArg, geometry);
    } else if (geometry instanceof google.maps.Data.Point) {
        callback.call(thisArg, geometry.get());
    } else {
        geometry.getArray().forEach(function(g) {
            processCoordinates(g, callback, thisArg);
        });
    }
}

＆＃13;

#map {
   width: 800px;
   height: 640px;
}

＆＃13;

<button id="btnShow">Show</button>
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>

＆＃13;

JSFiddle

Google地图检查当前边界是否在数据层的边界内

1 个答案: