openlayers 绘制点图层

一、思路首先将单个点组成数据，然后添加到矢量资源中生产点图层，这样做的原因是将一种类型的点数据变成一个图层用于图层的控制

二、普通实现方式

var fillStyle = new ol.style.Fill({
    color: 'rgba(255, 255, 255, 0.8)'
})
// 边界样式
var strokeStyle = new ol.style.Stroke({
    color: '#ffcc33',
    width: 2
})
// 形状原型样式
var imageCircle = new ol.style.Circle({
    radius: 17,
    fill: new ol.style.Fill({
        color: '#ffcc33'
    })
})

/**
 * 说明：添加点
 * @param {*} map     必填，对象，地图对象
 * @param {*} point   必填，数组，坐标
 * @param {*} img
 */
function addPoint(map,point,layerId){
    if(point.length<1)
        return false
        //创建一个点
    var points = []
    point.map(function (item,index) {
        var point_ = new ol.Feature({
            geometry: new ol.geom.Point(item.center)
        });
		// var data =
        var image = "../skins/default/images/setion.png"
		point_.data = item
        var icon = new ol.style.Icon({
            // anchor: [0.5, 1],
            offset:[0,1],
            //图标缩放比例
            scale:0.8,
            //透明度
            opacity: 1,
            //图标的url
            src:image
        })
        var style_ = new ol.style.Style({
                //填充色
                fill: fillStyle,
                //边线颜色
                stroke:strokeStyle ,
                //形状
                image: icon
            })
        //设置点1的样式信息
        point_.setStyle( style_);
        points.push(point_)
    })
    //实例化一个矢量图层Vector作为绘制层
    var source = new ol.source.Vector({
        features: points
    });
    //创建一个图层
    var vector = new ol.layer.Vector({
        source: source
    });
    vector.layerId = layerId
    //将绘制层添加到地图容器中
    map.addLayer(vector);
    return vector;
}

注意：函数的第三个参数是图层的id值，这个值主要用来做点击事件区分图层显示不同的弹窗 

三、vue版 

(1)导入依赖文件

import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer.js';
import { XYZ, Vector as VectorSource, } from 'ol/source.js';
import { Circle as CircleStyle, Fill, Stroke, Style, Icon } from 'ol/style.js';
import Feature from 'ol/Feature.js';
// 要素类型
import { LineString, Point, Polygon } from 'ol/geom.js';

（2） 实现函数

let fillStyle = new Fill({
  color: 'rgba(255, 255, 255, 0.8)'
})
// 边界样式
let strokeStyle = new Stroke({
  color: '#ffcc33',
  width: 4
})
// 形状原型样式
let imageCircle = new CircleStyle({
  radius: 8,
  fill: new Fill({
    color: '#0000ff'
  })
})
let style = new Style({
  //填充色
  fill: fillStyle,
  //边线颜色
  stroke: strokeStyle,
  //形状
  image: imageCircle
})
/**
 * 说明：添加点
 * @param {*} map     必填，对象，地图对象
 * @param {*} point   必填，数组，坐标
 * @param {*} img     
 */
export function addPoint(map, points, layerId) {
  if (points.length < 1)
    return false
  let tempPoints = []
  points.map((item, index) => {
    var point = new Feature({
      geometry: new Point(item.center)
    });
    point.data = item.data;
    let color = '#0000ff'
    if (item.color)
      color = item.color
    var style_ = new Style({
      //填充色
      fill: fillStyle,
      //边线颜色
      stroke: strokeStyle,
      //形状
      image: new CircleStyle({
        radius: 7,
        fill: new Fill({
          color: color
        })
      })
    })
    point.setStyle(style_);
    tempPoints.push(point)
  })


  //实例化一个矢量图层Vector作为绘制层
  var source = new VectorSource({
    features: tempPoints
  });
  //创建一个图层
  var vector = new VectorLayer({
    source: source
  });
  vector.layerId = layerId
  //将绘制层添加到地图容器中
  map.addLayer(vector);

  return vector;
}