我试图在我的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]]]}}]};
不为玻利维亚绘制的多边形请帮助...
答案 0 :(得分：0)
您的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())