मैं एक mapboxgl.GeoJSONSource वस्तु का सीमांकन बॉक्स कैसे मिलता है?

वोट
4

मैं इस तरह एक MapBox जीएल जे एस नक्शा सेट कर रहा हूं:

mapboxgl.accessToken = 'pk.my_token';
var cityBoundaries   = new mapboxgl.GeoJSONSource({ data: 'http://domain.com/city_name.geojson' } );
var map              = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v8',
  center: [cityLongitude,cityLatitude],
  zoom: 13
});

तब मैं नक्शे पर कि GeoJSON डेटा लोड हो रहा हूँ के बाद इसे इस तरह से लोड करता है:

map.on('style.load', function(){
  map.addSource('city', cityBoundaries);
  map.addLayer({
    'id': 'city',
    'type': 'line',
    'source': 'city',
    'paint': {
      'line-color': 'blue',
      'line-width': 3
    }
  });
});

इस बिंदु पर, मैं एक मानचित्र उस स्थान मैं में निर्दिष्ट पर केंद्रित रहा है new mapboxgl.Map, और यह ज़ूम स्तर 13. तो पर है, केवल GeoJSON डेटा का एक टुकड़ा मानचित्र पर दिख रहा है। मैं फिर से केंद्र के लिए और नक्शे फिर से ज़ूम करें, ताकि पूरे GeoJSON डेटा दिखाई दे रहा है करना चाहते हैं।

MapBox जे एस में, मैं एक में GeoJSON डेटा लोड हो रहा द्वारा इस करते हैं featureLayerऔर फिर से अपनी सीमा के लिए नक्शे फिटिंग:

map.fitBounds(featureLayer.getBounds());

FitBounds प्रलेखन MapBox जीएल जे एस के लिए इंगित करता है कि यह के प्रारूप में सीमा चाहता है [[minLng, minLat], [maxLng, maxLat]]

वहाँ इस GeoJSON परत के मिश्रण / अधिकतम अक्षांश व देशांतर मान निर्धारित करने के लिए एक रास्ता है?

27/02/2016 को 16:29
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


4 जवाब

वोट
5

'एक बाउंडिंग बॉक्स प्राप्त करने' की धारा के आधार पर इस पोस्ट , मैं इस प्रक्रिया के साथ आ गए हैं ...

map.on('style.load', function(){
  $.getJSON('http://citystrides.dev/city_name.geojson', function(response){
    var boundingBox = getBoundingBox(response);
    var cityBoundary = new mapboxgl.GeoJSONSource({ data: response } );

    map.addSource('city', cityBoundary);
    map.addLayer({
      'id': 'city',
      'type': 'line',
      'source': 'city',
      'paint': {
        'line-color': 'blue',
        'line-width': 3
      }
    });
    map.fitBounds([[boundingBox.xMin, boundingBox.yMin], [boundingBox.xMax, boundingBox.yMax]]);
  })
});

function getBoundingBox(data) {
  var bounds = {}, coords, point, latitude, longitude;

  for (var i = 0; i < data.features.length; i++) {
    coords = data.features[i].geometry.coordinates;

    for (var j = 0; j < coords.length; j++) {
      longitude = coords[j][0];
      latitude = coords[j][1];
      bounds.xMin = bounds.xMin < longitude ? bounds.xMin : longitude;
      bounds.xMax = bounds.xMax > longitude ? bounds.xMax : longitude;
      bounds.yMin = bounds.yMin < latitude ? bounds.yMin : latitude;
      bounds.yMax = bounds.yMax > latitude ? bounds.yMax : latitude;
    }
  }

  return bounds;
}

यहाँ कोड क्या कर रहा है वहाँ किसी को जो एक विस्तृत विवरण की जरूरत के लिए, का एक पूर्वाभ्यास है:

  • map.on('style.load', function(){
    • जब नक्शा लोड, चलो इस समारोह में सामान करते हैं।
  • $.getJSON('http://citystrides.dev/city_name.geojson', function(response){
    • शहर के GeoJSON डेटा प्राप्त करें। यह एक अतुल्यकालिक कॉल है, इसलिए हम सभी कोड इस डेटा (का उपयोग करता है डाल करने के लिए है responseइस समारोह के अंदर)।
  • var boundingBox = getBoundingBox(response);
    • इस GeoJSON डेटा का सीमांकन बॉक्स प्राप्त करें। यह बुला रहा है , function(){'शैली लोड पर नक्शा' ब्लॉक के बाद दिखाई देने।
  • var cityBoundary = new mapboxgl.GeoJSONSource({ data: response } );
    • MapBox के GeoJSON डेटा बनाएँ।
  • map.addSource('city', cityBoundary);
    • MapBox के स्रोत जोड़ें।
  • map.addLayer({
    • MapBox को परत जोड़ें।
  • map.fitBounds([[boundingBox.xMin, boundingBox.yMin], [boundingBox.xMax, boundingBox.yMax]]);
    • मानचित्र को समायोजित दृश्य में GeoJSON डेटा ठीक करने के लिए।
  • function getBoundingBox(data) {
    • लौटे GeoJSON डेटा पर इस समारोह दोहराता, न्यूनतम और अधिकतम अक्षांश और देशांतर मूल्यों की खोज।

में नोट करने के लिए एक बात getBoundingBoxसमारोह इस लाइन है:

coords = data.features[i].geometry.coordinates;

मूल पोस्ट, ऊपर लिंक में, इस लाइन के रूप में लिखा गया था coords = data.features[i].geometry.coordinates[0];क्योंकि निर्देशांक की सूची के लिए अपने डेटा सरणियों की एक सरणी था। मेरे डेटा कि जिस तरह से स्वरूपित नहीं है, इसलिए मैं छोड़ना पड़ा [0]। आप इस कोड की कोशिश और इसे चल रही है, तो उस कारण हो सकता है।

28/02/2016 को 15:07
का स्रोत उपयोगकर्ता

वोट
2

मैं मैदान-हद पुस्तकालय है, जो किसी भी तरह MapBox गुच्छा द्वारा किया जाता है का उपयोग करें। https://www.npmjs.com/package/turf-extent नोड मॉड्यूल कड़ी है। अपने कोड में आप बस आयात (ES6) के रूप में या तो की आवश्यकता होती है:

ES6/Webpack: import extent from 'turf-extent';
Via script tag: `<script src='https://api.mapbox.com/mapbox.js/plugins/turf/v2.0.2/turf.min.js'></script>`

तो उदाहरण के लिए, कार्य करने के लिए आपकी प्रतिक्रिया फ़ीड:

ES6/Webpack: let orgBbox = extent(response);
Normal: var orgBbox = turf.extent(geojson);

तो फिर आप अपने मानचित्र केंद्र स्थापित करने के लिए सरणी मूल्यों का उपयोग कर सकते हैं:

center: [orgBbox[0], orgBbox[1]]

या के रूप में आप चाहते हैं, सीमा फिट करने के लिए:

map.fitBounds(orgBbox, {padding: 20});

यहाँ मामले में आप webpack या ब्राउज़र का उपयोग नहीं कर रहे हैं एक नियमित रूप से html टैग में turf.min.js का उपयोग कर एक उदाहरण है: https://bl.ocks.org/danswick/83a8ddff7fb9193176a975a02a896792

मुबारक कोडिंग और मैपिंग!

25/11/2016 को 15:21
का स्रोत उपयोगकर्ता

वोट
1

जेम्स शेवेलियर के जवाब के आधार पर। बहुभुज / multipolygon tilesets कि MapBox स्टूडियो में एक नक्शा मैं इस का उपयोग कर रहा सीमांकन बॉक्स प्राप्त करने के लिए करने के लिए assigend कर रहे हैं:

getPolygonBoundingBox: function(feature) {
    // bounds [xMin, yMin][xMax, yMax]
    var bounds = [[], []];
    var polygon;
    var latitude;
    var longitude;

    for (var i = 0; i < feature.geometry.coordinates.length; i++) {
        if (feature.geometry.coordinates.length === 1) {
            // Polygon coordinates[0][nodes]
            polygon = feature.geometry.coordinates[0];
        } else {
            // Polygon coordinates[poly][0][nodes]
            polygon = feature.geometry.coordinates[i][0];
        }

        for (var j = 0; j < polygon.length; j++) {
            longitude = polygon[j][0];
            latitude = polygon[j][1];

            bounds[0][0] = bounds[0][0] < longitude ? bounds[0][0] : longitude;
            bounds[1][0] = bounds[1][0] > longitude ? bounds[1][0] : longitude;
            bounds[0][1] = bounds[0][1] < latitude ? bounds[0][1] : latitude;
            bounds[1][1] = bounds[1][1] > latitude ? bounds[1][1] : latitude;
        }
    }

    return bounds;
}
17/03/2017 को 11:51
का स्रोत उपयोगकर्ता

वोट
0

सीधे शब्दों में का उपयोग turf.jsपुस्तकालय। यह एक है bboxसमारोह

const bbox = turf.bbox(foo);

https://turfjs.org/docs/#bbox

07/08/2019 को 12:01
का स्रोत उपयोगकर्ता

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more