Question

我试图在我的asp.net mvc app中使用openlayers 3绘制拉丁美洲国家的地图。

我有国家的geojsonobject，我尝试了下面的代码但是没有显示地图..

我的要求是只展示LAC与不同国家的互动和不同颜色填充。

<html>
<head>
<title>Modify features test</title>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet"                         href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">    </script>
<link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.7.0/ol.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.7.0/ol.js"> </script>

<style>
.map {
background: grey;
}

</style>
</head>
<body>
<div class="container-fluid">

<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>

</div>
<script>
var styleFunction = (function() {
var styles = {};
var image = new ol.style.Circle({
radius: 5,
fill: null,
stroke: new ol.style.Stroke({color: 'orange', width: 2})
});
 styles['Point'] = [new ol.style.Style({image: image})];
styles['Polygon'] = [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)'
})
})];
styles['MultiLinestring'] = [new ol.style.Style({
stroke: new ol.style.Stroke({
  color: 'green',
  width: 3
})
})];
styles['MultiPolygon'] = [new ol.style.Style({
stroke: new ol.style.Stroke({
  color: 'yellow',
  width: 1
}),
fill: new ol.style.Fill({
  color: 'rgba(255, 255, 0, 0.1)'
})
})];
styles['default'] = [new ol.style.Style({
stroke: new ol.style.Stroke({
  color: 'red',
  width: 3
}),
fill: new ol.style.Fill({
  color: 'rgba(255, 0, 0, 0.1)'
}),
image: image
})];
return function(feature, resolution) {
return styles[feature.getGeometry().getType()];
  };
  })();
  var source = new ol.source.Vector({
  features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
  });

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

 var overlayStyle = (function() {
 var styles = {};
 styles['Polygon'] = [
 new ol.style.Style({
  fill: new ol.style.Fill({
    color: [255, 255, 255, 0.5]
  })
 }),
 new ol.style.Style({
  stroke: new ol.style.Stroke({
    color: [255, 255, 255, 1],
    width: 5
  })
}),
new ol.style.Style({
  stroke: new ol.style.Stroke({
    color: [0, 153, 255, 1],
    width: 3
  })
 })
 ];
styles['MultiPolygon'] = styles['Polygon'];

 styles['LineString'] = [
 new ol.style.Style({
  stroke: new ol.style.Stroke({
    color: [255, 255, 255, 1],
    width: 5
  })
 }),
 new ol.style.Style({
  stroke: new ol.style.Stroke({
    color: [0, 153, 255, 1],
    width: 3
  })
})
 ];
 styles['MultiLineString'] = styles['LineString'];

 styles['Point'] = [
 new ol.style.Style({
  image: new ol.style.Circle({
    radius: 7,
    fill: new ol.style.Fill({
      color: [0, 153, 255, 1]
    }),
    stroke: new ol.style.Stroke({
      color: [255, 255, 255, 0.75],
      width: 1.5
    })
  }),
  zIndex: 100000
})
 ];
styles['MultiPoint'] = styles['Point'];

styles['GeometryCollection'] = styles['Polygon'].concat(styles['Point']);

return function(feature, resolution) {
return styles[feature.getGeometry().getType()];
};

})();

var select = new ol.interaction.Select({
style: overlayStyle
});

var modify = new ol.interaction.Modify({
features: select.getFeatures(),
style: overlayStyle
});

var map = new ol.Map({
interactions: ol.interaction.defaults().extend([select, modify]),
layers: [layer],
target: 'map',
view: new ol.View({
center: [0, 1000000],
zoom: 2
})
});

</script>
</body>
</html>

我的geojsonObject现在只给出了一个..

var geojsonObject = {'type':'FeatureCollection','crs':     {'type':'name','properties':{'name':'EPSG:3857'}},"features":[{"type":"Feature","id":"BOL","properties":{"name":"Bolivia"},"geometry":{"type":"Polygon","coordinates":[[[-62.846468,-22.034985],[-63.986838,-21.993644],[-64.377021,-22.798091],[-64.964892,-22.075862],[-66.273339,-21.83231],[-67.106674,-22.735925],[-67.82818,-22.872919],[-68.219913,-21.494347],[-68.757167,-20.372658],[-68.442225,-19.405068],[-68.966818,-18.981683],[-69.100247,-18.260125],[-69.590424,-17.580012],[-68.959635,-16.500698],[-69.389764,-15.660129],[-69.160347,-15.323974],[-69.339535,-14.953195],[-68.948887,-14.453639],[-68.929224,-13.602684],[-68.88008,-12.899729],[-68.66508,-12.5613],[-69.529678,-10.951734],[-68.786158,-11.03638],[-68.271254,-11.014521],[-68.048192,-10.712059],[-67.173801,-10.306812],[-66.646908,-9.931331],[-65.338435,-9.761988],[-65.444837,-10.511451],[-65.321899,-10.895872],[-65.402281,-11.56627],[-64.316353,-12.461978],[-63.196499,-12.627033],[-62.80306,-13.000653],[-62.127081,-13.198781],[-61.713204,-13.489202],[-61.084121,-13.479384],[-60.503304,-13.775955],[-60.459198,-14.354007],[-60.264326,-14.645979],[-60.251149,-15.077219],[-60.542966,-15.09391],[-60.15839,-16.258284],[-58.24122,-16.299573],[-58.388058,-16.877109],[-58.280804,-17.27171],[-57.734558,-17.552468],[-57.498371,-18.174188],[-57.676009,-18.96184],[-57.949997,-19.400004],[-57.853802,-19.969995],[-58.166392,-20.176701],[-58.183471,-19.868399],[-59.115042,-19.356906],[-60.043565,-19.342747],[-61.786326,-19.633737],[-62.265961,-20.513735],[-62.291179,-21.051635],  [-62.685057,-22.249029],[-62.846468,-22.034985]]]}}]};

不为玻利维亚绘制的多边形请帮助...

Answer 1

投影/ CRS

您的GeoJSON指定使用EPSG：3857（crs: {'type':'name','properties':{'name':'EPSG:3857'}}），但您的坐标似乎不在EPSG：3857中。 EPSG：3857的单位是米，[-62.846468,-22.034985]的坐标距离赤道和格林威治子午线不到100米。

您的坐标可能是EPSG：4326（纬度和经度，以度为单位）。如果这是真的，请更改GeoJSON以反映（设置crs: {'type':'name','properties':{'name':'EPSG:4326'}}。

使用EPSG：4326中的功能，您还必须将视图投影更改为EPSG：4326或将功能重新投影到EPSG：3857。 EPSG：3857通常用于全球Web制图应用程序。

为了阅读EPSG中的GeoJSON：4326并获取EPSG中的功能：3857，请更改

(new ol.format.GeoJSON()).readFeatures(geojsonObject)

到

(new ol.format.GeoJSON()).readFeatures(geojsonObject, 
  {'featureProjection': ol.proj.get('EPSG:3857')})

初始中心

地图的初始中心似乎并不专注于您的数据。您可以在初始化地图后插入此内容：

map.getView().fit(source.getExtent(), map.getSize())

如何使用开放图层仅使用交互绘制LAC国家/地区地图

1 个答案:

投影/ CRS

初始中心