Dan*_*y D 3 google-maps geojson
我正在谷歌地图中加载某个国家/地区的数据层(这是一个国家/地区的绘图):
map.data.addGeoJson(geoJsonObject);
Run Code Online (Sandbox Code Playgroud)
我很确定没有,但是......有没有办法检查地图的边界是否在数据层的边界内?
(基本上,我想知道,当用户在地图上导航时,当前视口是否位于数据层内);
var bounds = this.map.getBounds();
var sw = bounds.getSouthWest();
Run Code Online (Sandbox Code Playgroud)
也许我可以查询西南方向位置的数据层并检查一些道具。表明我在该数据层内?
或者至少:
有谁知道如何以编程方式获取某个特征对象,知道纬度和经度?
这里谷歌地图使用事件来获取要素对象:
map.data.addListener('click', function(event) {
event.feature.setProperty('isColorful', true);
});
Run Code Online (Sandbox Code Playgroud)
但我不想使用事件。有没有一种方法可以提供点的坐标并获取特征对象? 就像是:
map.getFeature(lat, long).setProperty('isColorful', true);
Run Code Online (Sandbox Code Playgroud)
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);
});
Run Code Online (Sandbox Code Playgroud)
2) 判断地图边界是否在图层边界内:
if (layerBounds.contains(map.getBounds().getNorthEast()) && layerBounds.contains(map.getBounds().getSouthWest())) {
//...
}
Run Code Online (Sandbox Code Playgroud)
工作示例
在提供的示例中,如果地图边界在图层边界内,则将显示绿色区域,反之则显示红色区域:
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);
});
Run Code Online (Sandbox Code Playgroud)
if (layerBounds.contains(map.getBounds().getNorthEast()) && layerBounds.contains(map.getBounds().getSouthWest())) {
//...
}
Run Code Online (Sandbox Code Playgroud)
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);
});
}
}Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
4037 次 |
| 最近记录: |