开放层无法通过geojson获得准确的区域

时间:2019-04-23 08:28:54

标签: angular5 geojson openlayers-5

我正在尝试通过使用json对象设置多边形,但是我的多边形位于地图上的不同位置。我是第一次使用openlayers。我在开放层文档中提到了一些示例,但没有一个可以解决我的问题。我附上了一些相同的屏幕截图。请帮我。如果需要我提供的任何文档,将对我有很多帮助。

我尝试了以下链接:

  1. https://gis.stackexchange.com/questions/134688/add-geojson-layer-to-openlayers-3
  2. GeoJSON feature coordinates not displaying on OpenLayers map
  3. Trying to display a GeoJSON on Openlayers 3
var image = new CircleStyle({
      radius: 5,
      fill: null,
      stroke: new Stroke({color: 'red', width: 1})
    });

    var styles = {
      'Point': new Style({
        image: image
      }),
      'LineString': new Style({
        stroke: new Stroke({
          color: 'green',
          width: 1
        })
      }),
      'MultiLineString': new Style({
        stroke: new Stroke({
          color: 'green',
          width: 1
        })
      }),
      'MultiPoint': new Style({
        image: image
      }),
      'MultiPolygon': new Style({
        stroke: new Stroke({
          color: 'yellow',
          width: 1
        }),
        fill: new Fill({
          color: 'rgba(255, 255, 0, 0.1)'
        })
      }),
      'Polygon': new Style({
        stroke: new Stroke({
          color: 'blue',
          lineDash: [4],
          width: 3
        }),
        fill: new Fill({
          color: 'rgba(0, 0, 255, 0.1)'
        })
      }),
      'GeometryCollection': new Style({
        stroke: new Stroke({
          color: 'magenta',
          width: 2
        }),
        fill: new Fill({
          color: 'magenta'
        }),
        image: new CircleStyle({
          radius: 10,
          fill: null,
          stroke: new Stroke({
            color: 'magenta'
          })
        })
      }),
      'Circle': new Style({
        stroke: new Stroke({
          color: 'red',
          width: 2
        }),
        fill: new Fill({
          color: 'rgba(255,0,0,0.2)'
        })
      })
    };

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

 var geojsonObject = {
"type": "FeatureCollection",
"features": [
...
],
"totalFeatures": 12,
"numberMatched": 12,
"numberReturned": 12,
"timeStamp": "2019-04-23T05:39:42.875Z",
"crs": {
"type": "name",
"properties": {
"name": "urn:ogc:def:crs:EPSG::3997"
}
}
}

var vectorSource = new VectorSource({
      features: (new GeoJSON({
        featureProjection: 'EPSG:3997',
        dataProjection: 'EPSG:4326'
      })).readFeatures(geojsonObject),

    });
    // var center = fromLonLat([0, 0], 'EPSG:4326', 'EPSG:3997');
    vectorSource.addFeature(new Feature());

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

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

      })
    });

我正在获取位于非洲而不是阿联酋地区的样式。

1 个答案:

答案 0 :(得分:0)

如果geojson数据为EPSG:3997,并且您正在使用默认的OSM视图,则需要

    dataProjection: 'EPSG:3997',
    featureProjection: 'EPSG:3857'

您还需要为EPSG:3997注册proj4定义

  import {register} from 'ol/proj/proj4.js';
  import proj4 from 'proj4';

  proj4.defs('EPSG:3997',
      '+proj=tmerc +lat_0=0 +lon_0=55.33333333333334 +k=1 +x_0=500000 +y_0=0 +datum=WGS84 +units=m +no_defs');
  register(proj4);