पत्रक के मानचित्र में बाहरी GeoJSON फ़ाइल लोड हो रही है?

53

मैं अपने पत्रक मानचित्र में जियोसन (बहुभुज) फ़ाइल लोड करना चाहूंगा। मैंने ऐसे उदाहरण देखे हैं जहां जेजसन को जावास्क्रिप्ट कोड में एम्बेड किया गया है, लेकिन मुझे यह दिखाने के लिए कोई उदाहरण नहीं मिल रहा है कि यह बाहरी फ़ाइल के साथ कैसे किया जाता है।

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
    <script src="usStates.geojson" type="text/javascript"></script>
    <style>
        html, body, #map {
            height: 100%;
        }
        body {
            padding: 0;
            margin: 0;
        }
    </style>
</head>

<body>
    <div id="map" style="height: 100%"</div>
    <script src="http://d3js.org/d3.v2.min.js?2.9.3"></script>
    <script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>

    <script type="text/javascript"> 

    var map = L.map('map').setView([38.57, -94.71], 4);

    L.tileLayer('http://{s}.tile.cloudmade.com/9067860284bc491e92d2342cc51d47d9/998/256/{z}/{x}/{y}.png', {attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> Imagery © <a href="http://cloudmade.com">CloudMade</a>'}).addTo(map);

    var featureStyle = {
        "color": "#ff7800",
        "weight": 5, 
        "opacity": 0.2
    };

    L.geoJson(usStates).addTo(map);

    </script>

</body>

leaflet geojson

— आंगन
स्रोत

खींचें और पर GeoJSON ड्रॉप geojson.io

— Mapperz

@ मैपरज़ ओपी यह नहीं पूछ रहा था कि उनके जियोजोन की सामग्री को स्क्रिप्ट में कैसे पेस्ट किया जाए।

— डेव-इवांस

35

USC-Ajax में देखें। यह सब कुछ सुव्यवस्थित करता है। उल्लेख करने के लिए नेओगेमोट को वोट देंगे।

यहां स्क्रिप्ट प्राप्त करें ( github repo ) और इसे अपने हेडर में जोड़ें:

<script src="/js/leaflet-0.7.2/leaflet.ajax.min.js"></script>

फिर फ़ाइल नाम के साथ अपलोड करने की बात है।

var geojsonLayer = new L.GeoJSON.AJAX("foo.geojson");       
geojsonLayer.addTo(map);

वास्तव में सीधे आगे तय है और यह काम करता है। तो याय।

— FredFury
स्रोत

26

आप डेटा लोड करने के लिए jquery Ajax का उपयोग कर सकते हैं और फिर इसे जोड़ सकते हैं।

var district_boundary = new L.geoJson();
district_boundary.addTo(map);

$.ajax({
dataType: "json",
url: "data/district.geojson",
success: function(data) {
    $(data.features).each(function(key, data) {
        district_boundary.addData(data);
    });
}
}).error(function() {});

या आप पत्रक-अजाक्स प्लगइन का उपयोग कर सकते हैं

— neogeomat
स्रोत

14

यहाँ मेरा न्यूनतम वेनिला js समाधान है। देखो माँ, एक फ़ाइल के लिए एक त्वरित AJAX कॉल के लिए कोई jquery की जरूरत नहीं है।

let xhr = new XMLHttpRequest();
xhr.open('GET', 'uk_outline.geojson');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.responseType = 'json';
xhr.onload = function() {
    if (xhr.status !== 200) return
    L.geoJSON(xhr.response).addTo(map);
};
xhr.send();

— डेनिस बाऊज़स
स्रोत

उदाहरण के लिए धन्यवाद - मैंने फ़ैक्टरी फ़ंक्शन के newलिए कीवर्ड निकाला geoJSON, लेकिन इसमें setRequestHeader लाइन के साथ एक कोर त्रुटि मिली, इसलिए इसे हटा दिया और यह ठीक काम किया (मेरे सर्वर में कुछ सेटिंग होना चाहिए)।

— ब्रायन बर्न्स

मुझे एक XML Parsing Error: not well-formedत्रुटि देता है Line Number 1, Column 1:। खैर, चूंकि डेटा एक जियोसन है, इसलिए इसे एक्सएमएल के रूप में पार्स करने की कोशिश क्यों की जा रही है? मुझे समस्या समझ में नहीं आती, लेकिन मैं अजाक्स के बिना अपना डेटा आयात करना चाहूंगा।

— हारून ब्रैमसन

@AaronBramson की एक और कोशिश है। यह काफी पुराना कोड बिट था जो मैंने किया। मुझे responseType सेट करना चाहिए और responseText को पार्स न करने वाली प्रतिक्रिया का उपयोग करना चाहिए। बस कोड स्निपेट अपडेट किया गया।

— डेनिस बाऊजस

हाँ, यह बहुत अच्छा है! यह किसी भी अतिरिक्त बाहरी पैकेज की आवश्यकता के बिना और डेटा फ़ाइल को संपादित किए बिना बॉक्स से बाहर काम करता है। यह स्पष्ट रूप से सबसे अच्छा जवाब है।

— हारून ब्रैमसन

11

मुख्य तत्व में, आप अपनी फ़ाइलों को संदर्भित करते हैं:

    <link rel="stylesheet" type="text/css" href="leaflet/leaflet.css" />
    <!--[if lte IE 8]>
        <link rel="stylesheet" type="text/css" href="css/leaflet.ie.css" />
    <![endif]-->
    <script src="leaflet/leaflet.js"></script>
    <script src="hydro_s.geojson" type="text/javascript"></script>
    <script src="hydro_l.geojson" type="text/javascript"></script>
    <style>
        html, body, #map {
            height: 100%;
        }
        body {
            padding: 0;
            margin: 0;
        }
    </style>
    <title>Leaflet Map with GeoJson</title>
 </head>

और फिर शरीर में:

<body>
    <div id="map"></div>
    <script type="text/javascript">

        var map = L.map('map', {
            center: [45.57, -73.5648],
            zoom: 10
        });

         /* Hydro */
        var hydro = new L.LayerGroup();
        L.geoJson(hydro_s, {style: hydrosStyle}).addTo(hydro);
        L.geoJson(hydro_l, {style: hydrolStyle}).addTo(hydro);

    </script>
</body>

आपको उन्हें एक परत समूह में "रखना" नहीं है ...

— fgcartographix
स्रोत

उत्तम! यह वही है जिसे मैं देख रहा था!

— बेली

1

फ़ायरफ़ॉक्स के लिए फायरबग वेब डेवलपर का उपयोग करके मुझे "ReferenceError: usStates परिभाषित नहीं किया गया है" ("L.geoJson (usStates) .addTo (मैप);") मैंने फ़ाइल को संदर्भित किया जैसे आपने दिखाया <script src="usStates.geojson" type="text/javascript"></script>और L.geoJson(usStates).addTo(map);मेरे कोड के नीचे जोड़ा । विचारों?

— बेली

यह src के साथ कुछ होना चाहिए ... मेरा दस्तावेज़ के सिर में है (मैंने इसे पूरी तरह से जोड़ने के लिए अपना उत्तर संपादित किया)

— fgcartographix

1

संदर्भ के लिए किसी चर की जरूरत नहीं है? इससे कोई फर्क नहीं पड़ता कि मेरा फ़ाइल एक्सटेंशन .joj के बजाय .json का है?

— बेली

2

यह एक भ्रमित करने वाला उत्तर है, क्योंकि इसके लिए आपको अपनी डेटा फ़ाइल में वैरिएबल Hydro_s, Hydro_l को परिभाषित करना होगा, जो तकनीकी रूप से भी अवैध GeoJSON बना देगा! अधिक जानकारी के लिए अन्य उत्तर देखें ...

— फ्लोरियन लेडरमैन

10

var usStates =मेरे जियोजोन फ़ाइल के शीर्ष में जोड़ने के बाद कोड ने काम किया।

— आंगन
स्रोत

5

यह लेख एक और अच्छा दृष्टिकोण lyzidiamond.com/posts/osgeo-august-meeting

— जॉन

उपर्युक्त लेख की वेकबैक मशीन की प्रतिलिपि , जैसा कि मूल ने लिंकरोट को सौंप दिया है, और हम दूसरों की टिप्पणियों को संपादित नहीं कर सकते हैं।

— अल्बर्ट