【问题标题】:How to set the coordinates for a polygon in openlayers?如何在openlayers中设置多边形的坐标?
【发布时间】:2016-12-30 10:18:18
【问题描述】:

我对 OpenLayers 和 JavaScript 非常陌生,我遇到了以下问题。

我有一个.csv 表,表示我想使用 OpenLayers 在地图上将它们可视化的点的坐标。

我在 OpenLayers 页面上找到了以下示例,

https://openlayers.org/en/latest/examples/polygon-styles.html

但是,我无法理解那里的坐标表示。更具体地说,例如,我不知道坐标 [-5e6, 6e6] 中的 e 是什么意思。

但是,我尝试使用我的坐标在我的地图上绘制一个简单的正方形,但它只是给了我一个位于地图中心的点,如下所示:

https://jsfiddle.net/api/post/library/pure/#&togetherjs=bD5bfPm7vz

所以我不知道到底出了什么问题,我应该改变什么?我认为这完全是坐标的书写方式,但不确定。

这是我的代码:

var styles = [
  new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'blue',
      width: 3
    }),
    fill: new ol.style.Fill({
      color: 'rgba(0, 0, 255, 0.1)'
    })
  }),
  new ol.style.Style({
    image: new ol.style.Circle({
      radius: 5,
      fill: new ol.style.Fill({
        color: 'orange'
      })
    }),
    geometry: function(feature) {
      // return the coordinates of the first ring of the polygon
      var coordinates = feature.getGeometry().getCoordinates()[0];
      return new ol.geom.MultiPoint(coordinates);
    }
  })
];

var geojsonObject = {
  'type': 'FeatureCollection',
  'crs': {
    'type': 'name',
    'properties': {
      'name': 'EPSG:3857'
    }
  },
  'features': [{
    'type': 'Feature',
    'geometry': {
      'type': 'Polygon',
      'coordinates': [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6],
          [-3e6, 6e6], [-5e6, 6e6]]]
    }
  }]
};

var source = new ol.source.Vector({
  features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
});

var layer = new ol.layer.Vector({
  source: source,
  style: styles
});

    var basic = new ol.layer.Tile({
      source: new ol.source.OSM()
    });

var map = new ol.Map({
  layers: [basic, layer],
  target: 'map',
  view: new ol.View({
    center: [0, 3000000],
    zoom: 2
  })
});

【问题讨论】:

    标签: coordinates polygon openlayers-3


    【解决方案1】:

    好的,我找到了答案。 以下坐标[-5e6, 6e6] 采用X,Y 格式,基于EPSG:3857 投影。 XeY 等于 X * 10 ^ Y。通常openlayers使用EPSG:3857投影,但是为了使用经纬度坐标格式,我们必须使用投影:EPSG:4326投影,我们明确指定它为:projection: 'EPSG:4326

    【讨论】:

      猜你喜欢
      • 2011-04-19
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-11-04
      • 2012-07-05
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多