GeoJSON畫多邊形 - Openlayers3

時間 2019-12-02

標籤 geojson 多邊形 openlayers3 openlayers 简体版

原文原文鏈接

參考官網API和綜合網上多個demo，最終整理代碼以下：css

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。