gpt4 book ai didi

javascript - 适合 map 内的边界

转载 作者:行者123 更新时间:2023-12-02 01:55:54 28 4
gpt4 key购买 nike

我使用 OSM 显示县的边界。它在大多数情况下工作得很好,但在某些情况下,县更大并且不适合 map 。

如何在开始渲染之前调整缩放级别?

var map = L.map("mapCnty").setView([31.2506372, -102.3385429], 5);

map.attributionControl.setPrefix();

L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: \'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors\'
}).addTo(map);

function drawCountyBoundary(county, state) {
url = "https://nominatim.openstreetmap.org/search.php?county=" + county + "&state=" + state + "&polygon_geojson=1&format=jsonv2";
fetch(url).then(function(response) {
return response.json();
})
.then(function(json) {
map.flyTo([json[0].lat, json[0].lon], 9);
setTimeout(function(){
geojsonFeature = json[0].geojson;
L.geoJSON(geojsonFeature).addTo(map);
}, 1900);
});
}

drawCountyBoundary("Cibola", "NM");

最佳答案

缩放级别可以通过_getBoundsCenterZoom()计算

<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="355950545359504175041b021b04" rel="noreferrer noopener nofollow">[email protected]</a>/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
</head>
<body>
<div id="mapCnty" style="width:500px;height:500px;"></div>
<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="610d0400070d041521504f564f50" rel="noreferrer noopener nofollow">[email protected]</a>/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script>
var map = L.map("mapCnty").setView([31.2506372, -102.3385429], 5);

map.attributionControl.setPrefix();

L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

function drawCountyBoundary(county, state) {
url = "https://nominatim.openstreetmap.org/search.php?county=" + county + "&state=" + state + "&polygon_geojson=1&format=jsonv2";
fetch(url).then(function(response) {
return response.json();
})
.then(function(json) {
let geojsonFeature = json[0].geojson;
let layer = L.geoJSON(geojsonFeature);
// calc the zoom level
let z = map._getBoundsCenterZoom(layer.getBounds());
// fly duration, unit: second
let flyDuration = 1.5;
map.flyTo([json[0].lat, json[0].lon], z.zoom, {duration:flyDuration});
setTimeout(function(){
layer.addTo(map);
}, flyDuration*1000);
});
}

drawCountyBoundary("Cibola", "NM");
</script>
</body>
</html>

关于javascript - 适合 map 内的边界,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69608749/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com