openlayers图层创建

创建图层

addVectorLayers(features,type) {
　　//参数 features==接口获取的点位
  let that=this;
  //实例化一个矢量图层Vector作为绘制层
　　//vectorSource  普通数据源
  this.vectorSource = new ol.source.Vector({
    features: features
  });
  //聚合 clusterSource  聚合数据源
  this.clusterSource = new ol.source.Cluster({
    distance:30,
    source:this.vectorSource,
  })
  //创建一个图层  vectorLayer  先声明图层实例
  this.vectorLayer = new ol.layer.Vector({
    source: this.clusterSource,
    style: function (feature) {
      let size =  feature.get('features').length;//获取该要素所在聚合群的要素数量
      // var style = styleCache[size];
      let style = null;
      if (size > 1) {
　　　　　　//点位聚合时  聚合的样式
        style = [
          new ol.style.Style({
            image: new ol.style.Circle({
              radius: 10,
              stroke: new ol.style.Stroke({
                color: '#fff'
              }),
              fill: new ol.style.Fill({
                color: '#ff000088'
              })
            }),
            text: new ol.style.Text({
              text: size.toString(),
              fill: new ol.style.Fill({
                color: '#fff'
              })
            })
          })
        ];
　　　　　//点位没聚合时  点位的样式
      } else {
　　　　　　//在调用创建图层函数时传一个点位类型参数  不同类型点位使用不同的图片
        if(type == 'shexiangtou'){
          style = [
　　　　　　　　//图片样式与文字样式
            new ol.style.Style({
              image: new ol.style.Icon({
                src: require('../../assets/public/map/images/shexiangji.png'),
                crossOrigin: '',
                // size: [100, 100],
                scale: 1
              }),
              text: new ol.style.Text({
                // text: feature.values_.features[0].values_.name,
                fill: new ol.style.Fill({
                  color: '#f00'
                })
              })
            })
          ];
        } else {
          style = [
            new ol.style.Style({
              image: new ol.style.Icon({
                src: require('../../assets/public/map/images/position_3.png'),
                crossOrigin: '',
                // size: [100, 100],
                scale: 1
              }),
              text: new ol.style.Text({
                // text: feature.values_.features[0].values_.name,
                fill: new ol.style.Fill({
                  color: '#f00'
                })
              })
            })
          ];
        }
      }
      return style;
    }
  });

  this.vectorLayer.set("customPro", "test")
  this.vectorLayer.setZIndex(1999)
  //将绘制层添加到地图容器中
  this.mapUtilobj.map.addLayer(this.vectorLayer);
},