我正在尝试使用开放层画一条线,我在这里看到了示例-https://openlayers.org/en/latest/examples/geojson.html。
{
'type': 'Feature',
'geometry': {
'type': 'LineString',
'coordinates': [[4e6, -2e6], [8e6, 2e6]]
}
这里的困惑是规则纬度坐标如何转换为该指数表示法。如果我使用常规纬度,地图上什么都没画?
{
'type': 'Feature',
'geometry': {
'type': 'LineString',
'coordinates': [[42.12154, -20.14515], [80.7845241, 20.4545741]]
}
如何将坐标转换为该指数符号?
是否可以使用常规坐标系在OL中绘制geojson?
答案 0 :(得分:1)
这些坐标不是纬度,而是3857。
要使用lat-long,您需要通过删除CRS属性来更改Json声明
var geojsonObject = {
'type': 'FeatureCollection',
'crs': {
'type': 'name',
'properties': {
'name': 'EPSG:3857'
}
}, ...
答案 1 :(得分:1)
要在GeoJSON中使用经度/纬度,您需要将正确的投影添加到GeoJSON格式:
var vectorSource = new ol.source.Vector({ // VectorSource({
features: (new ol.format.GeoJSON({
featureProjection: 'EPSG:3857',
dataProjection: 'EPSG:4326'})).readFeatures(geojsonObject)
});
OSM地图图块使用EPSG:3857,GeoJSON使用EPSG:4326(默认设置)。
代码段:
var styles = {
'LineString': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'green',
width: 2
})
})
};
var styleFunction = function(feature) {
return styles[feature.getGeometry().getType()];
};
var geojsonObject = {
'type': 'FeatureCollection',
'features': [{
'type': 'Feature',
'geometry': {
'type': 'LineString',
'coordinates': [[42.12154, -20.14515], [80.7845241, 20.4545741]]
}
}]
};
var vectorSource = new ol.source.Vector({ // VectorSource({
features: (new ol.format.GeoJSON({
featureProjection: 'EPSG:3857',
dataProjection: 'EPSG:4326'
})).readFeatures(geojsonObject)
});
var vectorLayer = new ol.layer.Vector({ // VectorLayer({
source: vectorSource,
style: styleFunction
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({ // TileLayer({
source: new ol.source.OSM()
}),
vectorLayer
],
target: 'map',
controls: ol.control.defaults({ // defaultControls({
attributionOptions: {
collapsible: false
}
}),
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
html,
body,
.map {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
<link rel="stylesheet" href="https://openlayers.org/en/v5.1.3/css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/build/ol.js"></script>
<div id="map" class="map"></div>