2016-12-30 33 views
0

我對OpenLayers和JavaScript非常陌生,我遇到以下問題。如何在openlayers中設置多邊形的座標?

我代表我想它們可視化使用的OpenLayers地圖上的點的座標的.csv表。

我發現的OpenLayers頁下面的例子中,

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

但是,我無法理解有座標的表示。更具體地說,例如,我不知道e在座標[-5e6, 6e6]中的含義。

不過,我想用我的座標繪製在我的地圖上一個簡單的方形,但它只是給了我一個點,在地圖的中央,如下:

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

回答

0

OK,我找到了答案。 以下座標[-5e6, 6e6]是在X,Y格式,和基於所述EPSG:3857投影。 XeY等於X * 10^Y。通常,開放層使用EPSG:3857投影,但爲了使用經度/緯度座標格式,我們必須使用投影:EPSG:4326投影,並且我們將其明確指定爲:projection: 'EPSG:4326