开放层没有通过geojson获得准确的区域

Question

我正在尝试使用 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,

      })
    });

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

Answer 1

如果 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);