GeoJSON画多边形 - Openlayers3

参考官网API和综合网上多个demo，最终整理代码如下：

 

<!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>

 

posted on 2017-11-13 03:04  Rayy  阅读(955)  评论(0)  编辑  收藏  举报

导航