показать простой значок с открытыми слоями и внешним файлом геойсона - PullRequest
Новая
       20

показать простой значок с открытыми слоями и внешним файлом геойсона

0 голосов
/ 04 октября 2019

Мне нужна помощь, у меня есть этот код ниже, он работает, но я бы хотел поместить de "geojsonObject" не в переменную, а в файл .geojson и загрузить его, я не слишком знакомс JavaScript и геойсон. 

import 'ol/ol.css';
import Feature from 'ol/Feature';
import Map from 'ol/Map';
import View from 'ol/View';
import GeoJSON from 'ol/format/GeoJSON';
import Circle from 'ol/geom/Circle';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
import {OSM, Vector as VectorSource} from 'ol/source';
import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style';
import {Icon} from 'ol/style';

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

var styles = {
  'Point': new Style({
               image: new Icon({
        rotation: 180 / 180 * 3.14,
                src: 'data/test.svg'
               })
    })
};

var geojsonObject = {
  'type': 'FeatureCollection',
  'crs': {
    'type': 'name',
    'properties': {
  'name': 'EPSG:3857'
    }
  },
  'features': [{
    'type': 'Feature',
    'rotation': 180 / 180 * 3.14,
    'geometry': {
      'type': 'Point',
      'coordinates': [0, 0]
    }
  }]
};

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

var vectorSource = new VectorSource({
  features: (new GeoJSON()).readFeatures(geojsonObject)
});

vectorSource.addFeature(new Feature(new Circle([5e6, 7e6], 1e6)));

var vectorLayer = new VectorLayer({
  source: vectorSource,
  style: styleFunction
});

var map = new Map({
  layers: [
    new TileLayer({
      source: new OSM()
    }),
    vectorLayer
  ],
  target: 'map',
  view: new View({
    center: [0, 0],
    zoom: 2
  })
});

Я попытался с файлом test.geojson ниже, но я не знаю, правильно ли это, а также я хотел бы знать, как изменить "vectorSource", чтобы загрузить его 

{
  "type": "FeatureCollection",
  "crs": {
    "type": "name",
    "properties": {
      "name": "EPSG:3857"
    }
  },
  "features": [{
    "type": "Feature",
    "rotation": 90 / 180 * 3.14,
    "geometry": {
      "type": "Point",
      "coordinates": [0, 0]
    }
  }]
}

1 Ответ

1 голос
/ 05 октября 2019

OpenLayers загрузит и проанализирует URL-адрес 

var vectorSource = new VectorSource({
  format: new GeoJSON(),
  url: 'test.geojson'
});

Если вы используете расширение файла .geojson, убедитесь, что оно включено в типах MIME вашего сервера (в противном случае просто используйте .json)

Если вы хотите получить доступ к нестандартным свойствам из вашего геойсона, они должны быть в объекте свойств 

  "features": [{
    "type": "Feature",
    "properties" : {
      "rotation": 90 / 180 * 3.14
    },
    "geometry": {
      "type": "Point",
      "coordinates": [0, 0]
    }
  }]
...