WebGIS开发图形（点、线、多边形）绘制

图形绘制在WebGIS中是非常重要的一部分，查询、编辑、分析等功能均涉及客户端的图形绘制。一般通过绘制图形来获取地图的空间范围，为查询等功能提供条件限制，或提供操作要素的空间属性等。

图形绘制功能，即在地图容器中绘制几何图形，包括点、线、圆、矩形、多边形等。

Openlayers框架自带一整套几何图形绘制控件，和GIS应用相结合，满足GIS应用需求。

在Openlayers框架中提供的矢量绘图层为Openlayers. Layer. Vector，交互绘制矢量图形的控制为Openlayers. Control. Drawfeature（包括点、线、多边形等），以及矢量图形编辑控件Openlayers. Control. Modifyfeature。

基本图形绘制

基本几何图形，包括点、折线、圆、矩形、多边形等。

实现步骤

1. 引用开发库:
本示例通过本地离线【include-openlayers-local.js】 脚本引入开发库;

2. 创建地图容器:
创建id="mapCon"的 div，并设置其样式;

3. 创建地图:
创建地图对象，设置地图的必要参数,将 layers 属性设置为天地图地图图层;

4. 创建矢量图层:
创建一个矢量图层作为绘制图层,并添加到地图中;

//实例化一个矢量图层Vector作为绘制层
  vectorSource = new ol.source.Vector()
  //创建一个图层
  var vectorLayer = new ol.layer.Vector({
    source: vectorSource,
  })
  //将绘制层添加到地图容器中
  map.addLayer(vectorLayer)

5. 添加点:
创建一个点并添加到绘制层数据源中;

//创建一个点
  var point = new ol.Feature({
    geometry: new ol.geom.Point([11505912.0, 4011415.0]),
  })
  //设置点1的样式信息
  point.setStyle(
    new ol.style.Style({
      //填充色
      fill: new ol.style.Fill({
        color: 'rgba(255, 255, 255, 0.2)',
      }),
      //边线颜色
      stroke: new ol.style.Stroke({
        color: '#ffcc33',
        width: 2,
      }),
      //形状
      image: new ol.style.Circle({
        radius: 17,
        fill: new ol.style.Fill({
          color: '#ffcc33',
        }),
      }),
    })
  )
  vectorSource.addFeatures([point])

6. 添加线:
创建一个线并添加到绘制层数据源中;

//创建一个线
  var line = new ol.Feature({
    geometry: new ol.geom.LineString([
      [8208725.0, 3835304.0],
      [16055444.0, 4578883.0],
    ]),
  })
  //设置线的样式
  line.setStyle(
    new ol.style.Style({
      //填充色
      fill: new ol.style.Fill({
        color: 'rgba(255, 255, 255, 0.2)',
      }),
      //边线颜色
      stroke: new ol.style.Stroke({
        color: '#ffcc33',
        width: 5,
      }),
      //形状
      image: new ol.style.Circle({
        radius: 7,
        fill: new ol.style.Fill({
          color: '#ffcc33',
        }),
      }),
    })
  )
  vectorSource.addFeatures([line])

7. 添加圆:
创建一个圆添加到绘制层数据源中;

 //创建一个圆
  var circle = new ol.Feature({
    geometry: new ol.geom.Circle([9871995.0, 4344069.0], 1000000),
  })
  circle.setStyle(
    new ol.style.Style({
      //填充色
      fill: new ol.style.Fill({
        color: 'rgba(255, 255, 255, 0.5)',
      }),
      //边线颜色
      stroke: new ol.style.Stroke({
        color: '#ffcc33',
        width: 6,
      }),
      //形状
      image: new ol.style.Circle({
        radius: 7,
        fill: new ol.style.Fill({
          color: '#ffcc33',
        }),
      }),
    })
  )
  vectorSource.addFeatures([circle])

8. 添加多边形:
创建一个多边形添加到绘制层数据源中;

 //根据范围获取多边形
  var rectangle = new ol.Feature({
    geometry: new ol.geom.Polygon.fromExtent([8208725.0, 2035304.0, 12841418.0, 4068487.0]),
  })
  rectangle.setStyle(
    new ol.style.Style({
      fill: new ol.style.Fill({
        color: 'rgba(33,33,33,0.5)',
      }),
      stroke: new ol.style.Stroke({
        color: '#ffcc33',
        width: 4,
      }),
      image: new ol.style.Circle({
        radius: 7,
        fill: new ol.style.Fill({
          color: '#ffcc33',
        }),
      }),
    })
  )
  vectorSource.addFeatures([rectangle])

9. 添加正方形:
创建一个正方形添加到绘制层数据源中;

 //根据圆获取多边形
  var square = new ol.Feature({
    geometry: new ol.geom.Polygon.fromCircle(new ol.geom.Circle([9871995.0, 4344069.0], 1000000), 4, 150),
  })
  square.setStyle(
    new ol.style.Style({
      //填充色
      fill: new ol.style.Fill({
        color: 'rgba(255, 255, 255, 0.8)',
      }),
      //边线颜色
      stroke: new ol.style.Stroke({
        color: 'red',
        width: 2,
      }),
      //形状
      image: new ol.style.Circle({
        radius: 7,
        fill: new ol.style.Fill({
          color: '#ffcc33',
        }),
      }),
    })
  )
  vectorSource.addFeatures([square])

10. 添加矩形:
创建一个矩形并添加到图层数据源中。

//创建一个多变形
  var polygon = new ol.Feature({
    geometry: new ol.geom.Polygon([
      [
        [9871995.0, 4344069.0],
        [12689769.0, 5107216.0],
        [13002855.0, 3522218.0],
      ],
    ]),
  })
  //设置区样式信息
  polygon.setStyle(
    new ol.style.Style({
      //填充色
      fill: new ol.style.Fill({
        color: 'rgba(255, 255, 255, 0.5)',
      }),
      //边线颜色
      stroke: new ol.style.Stroke({
        color: '#ffcc33',
        width: 2,
      }),
      //形状
      image: new ol.style.Circle({
        radius: 7,
        fill: new ol.style.Fill({
          color: '#ffcc33',
        }),
      }),
    })
  )
  vectorSource.addFeatures([polygon])