ওপেনলায়ার্স 3 এ জিওজেএসন স্তর যুক্ত করুন

9

আমার কাছে একটি জিওজেএসন ফাইল রয়েছে যার নাম মাইজোজসন.জসন এবং আমি এটিকে ওপেনলায়ার্স 3 এ একটি ওপেন স্ট্রিটম্যাপ স্তরের উপরে স্তর হিসাবে যুক্ত করতে চাই। এখনও অবধি আমি জুম ইত্যাদি সহ ওপেনস্ট্রিটম্যাপ ওয়ার্ল্ডটি প্রদর্শন করতে পারি তবে কোনও কারণে আমি এতে মাইজেজসন.জেসন পেতে পারি না।

জিওজসনে অনেকগুলি বহুভুজ রয়েছে এবং এর মতো দেখতে:

{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },

"features": [
      { "type": "Feature", "properties": { "DN": 2 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 13.559093915055664, 52.545214330050563 ], [ 13.559633429050496, 52.545205649772548 ], [ 13.559633415380715, 52.545214636296755 ], [ 13.559093915055664, 52.545214330050563 ] ] ] } }
]
}

আমার মূল html:

<!doctype html>
<html lang="en">
  <head>
    <link rel='stylesheet' href='http://ol3js.org/en/master/css/ol.css'>
    <style>
      #map {
        height: 100%;
        width: 100%;
      }
    </style>
    <title>OpenLayers 3 example</title>
    <script src="ol3/ol.js" type="text/javascript"></script>
  </head>
  <body>
    <h1>My Map</h1>
    <div id="map"></div>
    <script type="text/javascript">
      var map = new ol.Map({
        target: 'map',
        layers: [
           new ol.layer.Tile({
              source: new ol.source.OSM()
           }),
           new ol.layer.Vector({
              title: 'added Layer',
              source: new ol.source.GeoJSON({
                 projection : 'EPSG:4326',
                 url: 'mygeojson.json'
              })
           })
        ],
        view: new ol.View({
          center:[52.5243700 , 13.4105300],
          zoom:2

        })
      });
    </script>
  </body>
</html>

আমি প্রজেকশন তথ্য অপসারণ করার চেষ্টা করেছি কিন্তু কোনও ব্যবহার নেই।

— Selphiron
সূত্র

8

আপনি যখন আপনার ভেক্টর উত্সটি সংজ্ঞায়িত করেন, লক্ষ্য সমন্বয় রেফারেন্স সিস্টেমটির দিকে নির্দেশ করে প্রজেকশন সেটিংটি রাখুন ( দস্তাবেজগুলি দেখুন ):

new ol.layer.Vector({
      title: 'added Layer',
      source: new ol.source.GeoJSON({
         projection : 'EPSG:3857',
         url: 'mygeojson.json'
      })
  })

এই উদাহরণটি দেখুন (আপনার নমুনা ডেটা ব্যবহার করে): http://jsfiddle.net/zzahmbff/4/

সম্ভবত এই সম্পদ ভেক্টর ডেটা লোড বিভিন্ন উপায় দেখতে আপনাকে সহায়তা করতে পারে: http://acanimal.github.io/thebookofopenlayers3/chapter03_03_vector_source.html

— জার্মানি ক্যারিলো
সূত্র

ধন্যবাদ, এটা কাজ! মাইজেজসন.জসন ইপিএসজি: 3857 এ থাকলে আমি কি এখনও তা করতে পারি?

— সেলফিরন

1

আমি তাই মনে করি না.

— জার্মানি ক্যারিলো

1

সিনট্যাক্স পরিবর্তিত হয়েছে, দেখুন @ সাইনবোর্ডার উত্তর।

— jjmontes

16

এফওয়াইআই ... আমি বিশ্বাস করি এটি ওল 3 ভি 3.5.0 এর জন্য পরিবর্তিত হয়েছে, সুতরাং গ্রিকারিলো এর উত্তর হবে:

new ol.layer.Vector({
      title: 'added Layer',
      source: new ol.source.Vector({
         url: 'mygeojson.json',
         format: new ol.format.GeoJSON()
      })
  })

আপনি এখানে পরিবর্তনগুলি দেখতে পারেন: https://github.com/openlayers/ol3/blob/master/changelog/upreg-notes.md#v350

— sevenboarder
সূত্র

7

ওপেনলায়ার্স ভেক্টর এপিআই অনেক পরিবর্তন করছে। আমার ওপেনলায়ার্স 3.16.0 এর সাথে একটি কাজের নমুনা রয়েছে।

এটি গুরুত্বপূর্ণ যে আপনি এই featureProjection: 'EPSG:3857'জাতীয় বিকল্পগুলির মধ্যে সংজ্ঞা দিতে হবে readFeatures:

.readFeatures(_geojson_object, { featureProjection: 'EPSG:3857' })

রেফারেন্সটি https://github.com/openlayers/ol3/blob/master/changelog/upgrade-notes.md#v350 তে পাওয়া যাবে

উদাহরণ:

_geojson_vectorSource = new ol.source.Vector({
  features: (new ol.format.GeoJSON()).readFeatures(_geojson_object, { featureProjection: 'EPSG:3857' })
});

_geojson_vectorLayer = new ol.layer.Vector({
  source: _geojson_vectorSource,
  style: styleFunction
});

map.addLayer(_geojson_vectorLayer);

দ্রষ্টব্য: স্টাইলফানশন

var image = new ol.style.Circle({
  radius: 5,
  fill: null,
  stroke: new ol.style.Stroke({ color: 'red', width: 1 })
});

var styles = {
  'Point': new ol.style.Style({
    image: image
  }),
  'LineString': new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'green',
      width: 1
    })
  }),
  'MultiLineString': new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'green',
      width: 1
    })
  }),
  'MultiPoint': new ol.style.Style({
    image: image
  }),
  'MultiPolygon': new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'yellow',
      width: 1
    }),
    fill: new ol.style.Fill({
      color: 'rgba(255, 255, 0, 0.1)'
    })
  }),
  'Polygon': new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'blue',
      lineDash: [4],
      width: 3
    }),
    fill: new ol.style.Fill({
      color: 'rgba(0, 0, 255, 0.1)'
    })
  }),
  'GeometryCollection': new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'magenta',
      width: 2
    }),
    fill: new ol.style.Fill({
      color: 'magenta'
    }),
    image: new ol.style.Circle({
      radius: 10,
      fill: null,
      stroke: new ol.style.Stroke({
        color: 'magenta'
      })
    })
  }),
  'Circle': new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'red',
      width: 2
    }),
    fill: new ol.style.Fill({
      color: 'rgba(255,0,0,0.2)'
    })
  })
};

var styleFunction = function (feature) {
  return styles[feature.getGeometry().getType()];
};

— hoogw
সূত্র