OpenLayers 3 में GeoJSON लेयर जोड़ें

9

मेरे पास mygeojson.json नामक एक जियोजोन फाइल है और मैं इसे ओपनस्टायरमैप लेयर के ऊपर OpenLayers 3 में एक लेयर के रूप में जोड़ना चाहता हूं। अब तक मैं ओपनस्ट्रीटमैप दुनिया को ज़ूम इत्यादि सहित प्रदर्शित कर सकता था, लेकिन किसी कारण से मैं इस पर mygeojson.json नहीं प्राप्त कर सका।

जियोजोन में कई बहुभुज होते हैं और ऐसा दिखता है:

{
"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 ] ] ] } }
]
}

मेरा main.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

— जर्मेन कैरिलो
स्रोत

धन्यवाद, यह काम किया! क्या मुझे अभी भी ऐसा करना होगा कि अगर mygeojson.json EPSG: 3857 में था?

— सेलफिरोन

1

मुझे ऐसा नहीं लगता।

— जर्मेन कैरिलो

1

सिंटैक्स बदल गया है, @sevenboarder जवाब देखें।

— 13

16

FYI करें ... मेरा मानना है कि यह OL3 V3.5.0 के लिए बदल गया है, इसलिए gcarrillo का उत्तर होगा:

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/upgrad-notes.md#v350

— sevenboarder
स्रोत

7

OpenLayers वेक्टर एपीआई बहुत बदल रहा है। मेरे पास OpenLayers 3.16.0 के साथ काम करने का नमूना है।

यह महत्वपूर्ण है कि आपको इस तरह featureProjection: 'EPSG:3857'के विकल्पों में परिभाषित करना होगा readFeatures:

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

संदर्भ https://github.com/openlayers/ol3/blob/master/changelog/upgrad-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
स्रोत