<!DOCTYPE html>
|
<html>
|
|
<head>
|
<title>GeoJSON画多边形 - Openlayers3</title>
|
<link rel="stylesheet" href="https://openlayers.org/en/v4.4.2/css/ol.css" type="text/css">
|
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
|
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
|
<script src="https://openlayers.org/en/v4.4.2/build/ol.js"></script>
|
</head>
|
|
<body>
|
<div id="map" class="map"></div>
|
<script>
|
var points = [
|
[113.05310369309863, 23.02901122314222],
|
[113.21103215989551, 23.01081511718519],
|
[113.09258580979785, 22.928074333493782]
|
];
|
var styles = {
|
'Polygon': new ol.style.Style({
|
stroke: new ol.style.Stroke({
|
color: 'blue',
|
lineDash: [3],
|
width: 2
|
}),
|
fill: new ol.style.Fill({
|
color: 'rgba(0, 0, 255, 0.2)'
|
})
|
})
|
};
|
var geojsonObject = {
|
'type': 'FeatureCollection',
|
'features': [{
|
'type': 'Feature',
|
'geometry': {
|
'type': 'Polygon',
|
'coordinates': [points]
|
}
|
}]
|
};
|
var vectorSource = new ol.source.Vector({
|
features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
|
});
|
var vectorLayer = new ol.layer.Vector({
|
source: vectorSource,
|
style: function(feature) {
|
return styles[feature.getGeometry().getType()];
|
}
|
});
|
|
//初始化点
|
var map = new ol.Map({
|
layers: [new ol.layer.Tile({
|
source: new ol.source.OSM()
|
})],
|
target: 'map',
|
view: new ol.View({
|
projection: 'EPSG:4326',
|
center: points[0],
|
zoom: 10
|
})
|
});
|
map.addLayer(vectorLayer);
|
</script>
|
</body>
|
|
</html>
|
