Невозможно импортировать GeoJSON в Openlayers - PullRequest
Новая
       29

Невозможно импортировать GeoJSON в Openlayers

0 голосов
/ 27 сентября 2019

Я пытаюсь загрузить файл GeoJSON в веб-приложение OpenLayers и не могу понять, почему это не сработает.У меня есть следующий код js: 

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
  })
});

И я продолжаю получать следующую ошибку, относящуюся к GeoJSON: 

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

С GeoJSON, имеющим следующую структуру (которую, по словам jsonlint, былоДействительный 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 ] ] ] ] } }
]
}

Я осмотрел другие вопросы по переполнению стека, но не смог найти ни одного в отношении ошибки, и попытался реализовать решения для более общего файла jsonс этой ошибкой, но ничего так не сработало.Я понятия не имею, что делать дальше!

Ссылка на файл GeoJSON

Ответы [ 2 ]

2 голосов
/ 27 сентября 2019

Когда вы определяете new ol.format.GeoJSON, установите dataProjection и featureProjection соответствующим образом и используйте ol.proj.fromLonLat для установки center из ESPG:4326 координат. 

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
    })
  });

страница подтверждения концепции

фрагмент кода: 

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>
0 голосов
/ 27 сентября 2019

Для начала, проверьте, будет ли что-то из этой ссылки направлять вас в правильном направлении.

Как включить GeoJSON в OpenLayers?

Если здесь ничего не помогло, попробуйте изменить crs в файле geojson.Из этого: 

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

К этому 

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