เพิ่มเลเยอร์ GeoJSON ใน OpenLayers 3

9

ฉันมีไฟล์ GeoJSON ชื่อ mygeojson.json และฉันต้องการเพิ่มเป็นเลเยอร์ใน OpenLayers 3 ด้านบนของเลเยอร์ openstreetmap จนถึงตอนนี้ฉันสามารถแสดงโลก openstreetmap รวมถึงการซูมเป็นต้น แต่ด้วยเหตุผลบางอย่างที่ฉันไม่สามารถรับ mygeojson.json ได้

geojson มีรูปหลายเหลี่ยมและมีลักษณะดังนี้:

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

— Germán Carrillo
แหล่งที่มา

ขอบคุณมันใช้งานได้! ฉันจะต้องทำยังไงถ้า mygeojson.json อยู่ใน EPSG: 3857?

— Selphiron

1

ฉันไม่คิดอย่างนั้น

— Germán Carrillo

1

มีการเปลี่ยนแปลงไวยากรณ์ดูคำตอบ @sevenboarder

— jjmontes

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

— sevenboarder
แหล่งที่มา

7

OpenLayers Vector API กำลังเปลี่ยนแปลงไปอย่างมาก ฉันมีตัวอย่างการทำงานกับ OpenLayers 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);

หมายเหตุ: styleFunction

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
แหล่งที่มา