openlayers 5.0 离散聚合点

import {OSM, Vector as VectorSource} from 'ol/source.js';
import {Fill, RegularShape, Stroke, Style} from 'ol/style.js';
import Icon from 'ol/style/Icon.js'
import Vectorlayer from 'ol/layer/Vector.js'
import Feature from 'ol/Feature.js'
import Vector from "ol/source/Vector";
import Cluster from "ol/source/Cluster";
import Circle from "ol/style/Circle";
import Text from "ol/style/Text";
    /*离散聚合点1*/
static createLayer(){
    webgissource.clusterpointdate = new Vector();
    webgissource.clusterSource  = new Cluster({
      distance:40,
      source: webgissource.clusterpointdate
    });
    var styleCache = {};
    webgissource.clusterVectorLayer  = new Vectorlayer({
      source: webgissource.clusterSource,
      zIndex:999,
      style: function (feature, resolution) {
        //当前聚合标注数据源的要素大小
        var size = parseInt(feature.get('features').length);
        //定义样式
        var style = styleCache[size];
        //如果当前样式不存在则创建
        // if(0<size && size<=5){
        //   var src="static/img/ld1.png"
        // }else if(5<size && size<=10){
        //   var src="static/img/ld2.png"
        // }else if(10<size && size<=15){
        //   var src="static/img/ld3.png"
        // }else if(15<size && size<=20){
        //   var src="static/img/ld4.png"
        // }else if(20<size ){
        //   var src="static/img/ld5.png"
        // }
        if(map.getView().getZoom()==17){
          style = [
            //初始化样式
            new Style({
              //点样式
              fill: new Fill({
                color: 'rgba(0,225,255,0.1)'
              }),
              stroke: new Stroke({
                color: '#00e1ff',
                width: 3
              }),
              image: new Circle({
                radius: 6,
                fill: new Fill({
                  color: '#4271ff'
                })
              }),
              // image: new Circle({
              //   radius: 8,
              //   fill: new Fill({
              //     color: 'rgb(0,155,29)'
              //   })
              // })
            })
          ];
          styleCache[size] = style;
        }else{
          //if (!style) {
          style = [
            //初始化样式
            new Style({
              //点样式
              fill: new Fill({
                color: 'rgba(0,225,255,0.1)'
              }),
              stroke: new Stroke({
                color: '#00e1ff',
                width: 3
              }),
              image: new Circle({
                radius: size==1?6:14,
                fill: new Fill({
                  color: '#4863ff'
                })
              }),
              //文本样式
              text: new Text({
                //文本内容
                text: size==1?"":size.toString(),
                //填充
                font: '14px',
                fill: new Fill({
                  color: 'rgb(255,255,255)'
                }),
                offsetY: 0,

              })
            })
          ];
          styleCache[size] = style;
          //}
        }
        return style;
      }
    });
    map.addLayer(webgissource.clusterVectorLayer)
  }
  static clusterVectorLayer(data){
    var points=new Point([x,y]);
    var iconFeature = new Feature({
      geometry:points,
      attributions:data
    })
   webgissource.clusterpointdate.addFeature(iconFeature)
 }
  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值