简体   繁体   中英

Cannot import GeoJSON into Openlayers

I'm trying to load in a GeoJSON file to an OpenLayers web app and can't for the life of me work out why this won't work. I have the following js code:

import TileLayer from 'ol/layer/Tile.js';
var base_layer = new ol.layer.Group({
  'title': 'Base maps',
  layers: [
    new TileLayer({
      title: 'OSM Data',
      type: 'base',
      visible: true,
      source: new ol.source.OSM()
    })
  ]
});

var vector_overlays = new ol.layer.Group({
  'title': 'Vector Overlays',
  layers: [
    new ol.layer.Vector({
      title: 'Soum boundaries',
      visible: true,
      source: new ol.source.Vector({
        projection: 'EPSG:4326',
        url: 'geofiles/test.geojson',
        format: new ol.format.GeoJSON()
      })
    })
  ]
});

var map = new Map({
  layers: [base_layer, vector_overlays],
  target: 'map',
  view: new View({
  projection: 'EPSG:4326',
    center: [102.376126,48.031532],
    zoom: 6
  })
});

And I keep getting the following error relating to the GeoJSON:

SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

With the GeoJSON having the following structure (which jsonlint said was a valid GeoJSON):

{"type": "FeatureCollection",
"name": "soums",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "ID": 1104, "OBJECTID": 25, "AREA_M2": 156387542.76619899, "LENGTH_M": 49278.986543539999, "TYPE": 3, "NAME": "Bagaxangai", "NAME_L1": "??????????", "PARENT_ID": 11, "UNIT_STATU": 2, "SHAPE_AREA": 0.01862, "SHAPE_LEN": 0.54868 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 107.488336568318374, 47.436899185450194 ], [ 107.489774709328984, 47.434026718450731 ], [ 107.495859151369757, 47.424669266453314 ], [ 107.499013906391355, 47.419637680454585 ], [ 107.500501638401317, 47.417390823455229 ], [ 107.500936513403644, 47.41711235045544 ], [ 107.505739217436854, 47.409326553457433 ], [ 107.509119039460501, 47.40374183745881 ], [ 107.516798024514614, 47.39104652446202 ], [ 107.519193654531065, 47.387380600463018 ], [ 107.528028493593624, 47.373025894466807 ], [ 107.528253560595189, 47.372671127466873 ], [ 107.529497152604023, 47.37064552346741 ], [ 107.529825216606397, 47.370115280467537 ], [ 107.530122762608514, 47.369634628467644 ], [ 107.53040505061054, 47.369176865467786 ], [ 107.541345601688874, 47.351480484472447 ], [ 107.551515584762541, 47.33506202747683 ], [ 107.552148824767386, 47.333909988477139 ], [ 107.552873616772274, 47.332963943477417 ], [ 107.554182058780611, 47.331571579478023 ], [ 107.554227834781955, 47.33090782247799 ], [ 107.545320516743928, 47.328996658473685 ], [ 107.532812124690608, 47.32650184646765 ], [ 107.530157094679709, 47.325731277466389 ], [ 107.519140249633281, 47.323453903461136 ], [ 107.509058004591253, 47.32120323245644 ], [ 107.50864983158958, 47.321115494456251 ], [ 107.50836754358842, 47.321054459456093 ], [ 107.50619698157935, 47.320600510455115 ], [ 107.504934316574094, 47.320329666454512 ], [ 107.501577382560143, 47.319620132452954 ], [ 107.50076866655678, 47.319448471452539 ], [ 107.500165944554411, 47.319250107452284 ], [ 107.499048238549975, 47.318880081451738 ], [ 107.497632985544101, 47.318574905451086 ], [ 107.497129445542029, 47.318468094450893 ], [ 107.472394948440453, 47.313173294439565 ], [ 107.440416341310964, 47.306631088425306 ], [ 107.434911733288885, 47.305501938422907 ], [ 107.417737966220656, 47.301958084415411 ], [ 107.394849782080144, 47.332387924406603 ], [ 107.393877034074279, 47.333669662406223 ], [ 107.392713552066866, 47.335481644405839 ], [ 107.388719564042603, 47.340860367404282 ], [ 107.376668934970681, 47.356714249399715 ], [ 107.370676045934985, 47.364812851397481 ], [ 107.362928395889284, 47.375173569394597 ], [ 107.357919697859273, 47.382310867392746 ], [ 107.351121906820339, 47.390932083390197 ], [ 107.346796040794445, 47.397344589388624 ], [ 107.347578053794678, 47.399400711388992 ], [ 107.353464131796457, 47.414918900391712 ], [ 107.356546406795289, 47.424524307393213 ], [ 107.402032856952559, 47.441427231412383 ], [ 107.428442006072856, 47.432771683423468 ], [ 107.488336568318374, 47.436899185450194 ] ] ] ] } }
]
}

I've looked around at the other questions on Stack Overflow but haven't been able to locate any regarding an error this this, and I tried implementing solutions to more general json file with this error, but nothing so fa has worked. I have no idea what to do next!

Link to GeoJSON file

UPDATE

Based off the helpful suggestions below and noticing that the file geocodezip uploaded based off my GeoJSON worked, I think this is definitely a MIME type issue. I'm now getting:

The script from “ http://localhost:1234/04d3cf9866d7a5d5ca27b8351f6969ac.js ” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.

I've been having a look to see how to get OpenLayers to work for GeoJSON mime types but haven't had any luck yet.

When you define your new ol.format.GeoJSON , set the dataProjection and featureProjection appropriately and use ol.proj.fromLonLat to set the center from ESPG:4326 coordinates.

format: new ol.format.GeoJSON({
  dataProjection: 'EPSG:4326',
  featureProjection: 'EPSG:3857'
})
var map = new ol.Map({
    layers: [base_layer, vector_overlays],
    target: 'map',
    view: new ol.View({
      center: ol.proj.fromLonLat([102.376126, 48.031532]),
      zoom: 6
    })
  });

proof of concept page

code snippet:

 html, body, #map { width: 100%; height: 100%; margin: 0; padding: 0; }
 <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css"> <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script> <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v5.3.0/build/ol.js"></script> <div id="map" class="map"></div> <script> var base_layer = new ol.layer.Group({ 'title': 'Base maps', layers: [ new ol.layer.Tile({ title: 'OSM Data', type: 'base', visible: true, source: new ol.source.OSM() }) ] }); var vector_overlays = new ol.layer.Group({ 'title': 'Vector Overlays', layers: [ new ol.layer.Vector({ title: 'Soum boundaries', visible: true, source: new ol.source.Vector({ projection: 'EPSG:4326', url: 'https://api.myjson.com/bins/upkqh', format: new ol.format.GeoJSON({ dataProjection: 'EPSG:4326', featureProjection: 'EPSG:3857' }) }) }) ] }); var map = new ol.Map({ layers: [base_layer, vector_overlays], target: 'map', view: new ol.View({ center: ol.proj.fromLonLat([102.376126, 48.031532]), zoom: 6 }) }); </script>

For starters, check if something from this link will steer you in right direction.

How to get GeoJSON into OpenLayers?

If nothing here helps then try changing crs in geojson file. From this:

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

To this

{"type": "FeatureCollection",
"name": "soums",
"crs": { "type": "name", "properties": {"name":"EPSG:4326"} },
...

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM