openlayers地图画线+打点

1. openlayer地图画线+打点

/**
 * 注：
 *  创建openlayer图层三步骤：
 *      1. 创建图层
 *      2. 创建图层源
 *      3. 创建源特征
 *  特别重要的一句话：图层是图层，点是点，点是add到图层上面的。
 *  图层什么概念呢？千层饼吃过吧，，，当地图上图层很多的时候回非常卡，所以地图上不要同时加载很多图层，要及时释放空间。
 *
 */



import { Vector as SourceVec } from 'ol/source'
import VectorLayer from 'ol/layer/Vector';
import Feature from 'ol/Feature';
import LineString from 'ol/geom/LineString';
import Style from  'ol/style/Style'
import Stroke from 'ol/style/Stroke';
import { asArray } from 'ol/color';
import Point from 'ol/geom/Point';
import Icon from 'ol/style/Icon';
import { toSize } from 'ol/size';



/**
 * 创建线
 * @param {经纬度数组} lnglats 
 * @param {参数，有color颜色，width线的粗细} params 
 */
export function addLineString(lnglats,params) {
  if (!params) {
    params = {}
  }
  if (!params['color']) {
    params['color'] = '#3498db'
  }
  if (!params['width']) {
    params['width'] = 8
  }
  // 设置源特征
  let feature = new Feature({
    geometry: new LineString(lnglats),
    name: 'Line'
  })
  // 创建图层源
  let sourceVec = new SourceVec({
    features: [feature]
  })
  // 创建图层
  let vercorLayer = new VectorLayer({
      source: sourceVec,
      style: new Style({
        stroke: new Stroke({
           params.width,
          color: asArray(params.color)
        })
      })
  })
  return vercorLayer
}



/**
 * 地图打点
 * @param {经纬度数组} lnglats 
 * @param {图标地址} icon 
 * @param {图标大小} size 
 */

export function addMarker(lnglats,icon,size) {
  if (!size) {
    size = 0.12
  }
  let features = []
  //创建图标特性
  lnglats.forEach(lnglat => {
    features.push(createFeature(lnglat))
  })
  // 创建矢量容器
  var vectorSource = new SourceVec({
    features: features
  })
     //创建图标样式
   var iconStyle = new Style({
     image: new Icon({
         opacity: 0.75,
         src: icon,
         scale: toSize(size)
     })
   })
   //创建矢量层
   var vectorLayer = new VectorLayer({
       source: vectorSource,
       style: iconStyle
   });
   return vectorLayer
}

function createFeature(lnglat) {
  return new Feature({
      geometry: new Point(lnglat, "XY")
  })
}