OpenLayer4——图形组合

使用一些功能函数，将多个图形组合使用，方便统一样式。常见的应用场景，就是多个省份，拼接成一张更大的区域。

任意多边形

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <!-- 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>
 <link href="ol/ol.css" rel="stylesheet" type="text/css"/>
 <script type="text/javascript" src="ol/ol.js" charset="utf-8"></script>
</head>
<body>
<div id="map" style="width: 100%;height: 100%"></div>
<script>
  var layerVector = new ol.layer.Vector({
    source: new ol.source.Vector()
  });

  var map = new ol.Map({
    layers:[
      new ol.layer.Tile({
        source:new ol.source.OSM(),
      })
      ,layerVector
    ],
    target:'map',
    view:new ol.View({
      center: [12950000, 4860000],
      zoom:7
    })
  });

  var iconStyle = new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'blue',
      lineDash: [4],
      width: 3
    }),
    fill: new ol.style.Fill({
      color: 'rgba(0, 0, 255, 0.5)'
    })
  });

  //使用组合，合并多个不同类型的图形
  var geoList = new ol.geom.GeometryCollection([
    new ol.geom.Polygon([[[12950000, 4860000],[12950000, 4760000],[12850000, 4760000],[12950000, 4860000]]])
   , new ol.geom.Circle([12950000, 4860000],10000)
  ]);

  var pointFeature = new ol.Feature({
    geometry: geoList
  });
  
  pointFeature.setStyle(iconStyle);
  layerVector.getSource().addFeature(pointFeature);
</script>
</body>
</html>

多条线段组合

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <!-- 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>
 <link href="ol/ol.css" rel="stylesheet" type="text/css"/>
 <script type="text/javascript" src="ol/ol.js" charset="utf-8"></script>
</head>
<body>
<div id="map" style="width: 100%;height: 100%"></div>
<script>
 var layerVector = new ol.layer.Vector({
  source: new ol.source.Vector()
 });

 var map = new ol.Map({
  layers:[
   new ol.layer.Tile({
    source:new ol.source.OSM(),
   })
   ,layerVector
  ],
  target:'map',
  view:new ol.View({
   center: [12950000, 4860000],
   zoom:7
  })
 });

 var iconStyle = new ol.style.Style({
  stroke: new ol.style.Stroke({
   color: '#666666',
   width: 4
  })
 });

  var multiLine = new ol.geom.MultiLineString([[[12950000, 4860000],[12950000, 4760000],[12850000, 4760000]]]);
 multiLine.appendLineString(new ol.geom.LineString([[11950000, 4860000],[11950000, 4760000],[11850000, 4760000]]));
 var pointFeature2 = new ol.Feature({
  geometry: multiLine
 });
 pointFeature2.setStyle(iconStyle);

 layerVector.getSource().addFeature(pointFeature2);
</script>
</body>
</html>