লিফলেট মানচিত্রে বাহ্যিক জিওজেএসন ফাইলটি লোড হচ্ছে?

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

লিফলেট-আজাক্স দেখুন। এটি সবকিছু প্রবাহিত করে। নিওজিওম্যাটকে উল্লেখ করার জন্য আপ-ভোট দেবে।

স্ক্রিপ্টটি এখানে পান ( গিথুব রেপো ) এবং এটি আপনার শিরোনামে যুক্ত করুন:

<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

এখানে আমার সর্বনিম্ন ভ্যানিলা জেএস সমাধান। মা দেখুন, কোনও ফাইলে দ্রুত এজ্যাক্স কল করার জন্য কোনও জেকুরির প্রয়োজন নেই।

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, তবে সেখানে সেটরয়েস্টহাইডার লাইনটি দিয়ে একটি কর্স ত্রুটি পেয়েছি, সুতরাং এটি সরিয়ে নিয়েছে এবং এটি দুর্দান্ত কাজ করেছে (অবশ্যই আমার সার্ভারে কিছু সেটিংস থাকতে হবে)।

— ব্রায়ান বার্নস

আমাকে XML Parsing Error: not well-formedত্রুটি দেয় Line Number 1, Column 1:। ঠিক আছে, যেহেতু ডেটা একটি জিওজসন তাই এটি কেন এটি এক্সএমএল হিসাবে বিশ্লেষণের চেষ্টা করছে? আমি সমস্যাটি বুঝতে পারি না তবে আমি আজাক্স ছাড়াই আমার ডেটা আমদানি করতে চাই।

— অ্যারন ব্রামসন

অ্যারনব্র্যামসনের আরও একটি চেষ্টা আছে। এটি বেশ পুরাতন কোড বিট ছিল যা আমি করেছি। আমার রেসপন্স টাইপ সেট করা উচিত ছিল এবং রেসপন্সটি পার্স না করে রেসপন্সটি ব্যবহার করা উচিত। সবেমাত্র কোড স্নিপেট আপডেট হয়েছে।

— ডেনিস বাউসুস

হ্যাঁ, এই দুর্দান্ত! এটি কোনও অতিরিক্ত বাহ্যিক প্যাকেজগুলির প্রয়োজন ছাড়াই এবং ডেটা ফাইল সম্পাদনা করার প্রয়োজন ছাড়াই বাক্সটির বাইরে কাজ করে। এটি পরিষ্কারভাবে সেরা উত্তর।

— অ্যারন ব্রামসন

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

ফায়ারফক্সের জন্য ফায়ারবাগ ওয়েব ডেভেলপারকে ব্যবহার করে আমি "রেফারেন্সেরর: মার্কিনস্টেটগুলি সংজ্ঞায়িত করা হয়নি" "(এল.জিওজেসন (ইউএসস্টেটস)। অ্যাডটি টো (মানচিত্র);" আমি আপনার ফাইলের মতো ফাইলটি উল্লেখ করেছি <script src="usStates.geojson" type="text/javascript"></script>এবং L.geoJson(usStates).addTo(map);আমার কোডের নীচে যুক্ত করেছি। ধারণা?

— বেইলি

এটি অবশ্যই এসআরসি-র সাথে কিছু হতে পারে ... আমার নথির

— শিরোনামে রয়েছে

1

রেফারেন্সের জন্য কোনও ভেরিয়েবলের দরকার নেই? আমার ফাইল এক্সটেনশানটি .geojson এর পরিবর্তে .json হয় কি তাতে কিছু আসে যায় না?

— বেইলি

2

এটি একটি বিভ্রান্তিকর উত্তর, কারণ এটির জন্য আপনাকে আপনার ডেটা ফাইলে ভেরিয়েবল হাইড্রো_স, হাইড্রো_এল সংজ্ঞায়িত করতে হবে যা প্রযুক্তিগতভাবে এমনকি অবৈধ জিওজেএসনকে পরিণত করবে! আরও তথ্যের জন্য অন্যান্য উত্তরগুলি দেখুন ...

— ফ্লোরিয়ান লেডারম্যান

10

var usStates =আমার জিওজসন ফাইলের শীর্ষে যুক্ত করার পরে কোডটি কাজ করেছিল।

— দুর্গভবনের বহি: প্রাচীর
সূত্র

5

এই নিবন্ধটি আরও একটি ভাল পদ্ধতির ব্যাখ্যা দিয়েছে লাইজিডিয়ামামন্ডল

— জন

উপরে উল্লিখিত নিবন্ধটির ওয়াকব্যাক মেশিনের অনুলিপি , যেমনটি মূল লিঙ্ক্রোটের কাছে আত্মহত্যা করেছে এবং আমরা অন্যের মন্তব্য সম্পাদনা করতে পারি না।

— আলবার্ট