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({
          width: 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")
  })
}