openlayers__移动事件,单击事件

移动点的样式修改 

data(){
 return{
  changeFeature:null,
  map:null
 }
},
initMap(){
     const map = new Map({
        target: 'mapDiv',
        view: new View({
          center: [, ],
          zoom: 19,
          // rotation: 100,
          projection: '',
        }),
        controls: defaultControls({
          zoom: false,
          attribution: false,
          rotate: false,
        }),
      });
      this.map = map;
    this.map.on('singleclick', this.mapClick);//点击事件
    this.map.on('pointermove', this.mapMoveIn);//移入事件
},
mapMoveIn(evt){
 if(this.changeFeature){
   this.changeFeature.setStyle(new Style({
      image: new Icon({
      src: require('../../../assets/icons/xxx.png')
   })
  }))
 }
 const features = this.map.getFeaturesAtPixel(evt.pixel)
//判断移到点位上时,移到面或是线上不会触发
 if(this.map.hasFeatureAtPixel(evt.pixel) && features[0].getGeometry() instanceof Point){
        debugger
        this.changeFeature = features[0]
        features[0].setStyle(new Style({
          image:new CircleStyle({
            radius:20,
            fill:new Fill({
              color:'red'
            })	
          })	
        }))	
      }else{
        
      }
      
    },

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我就是你的语法糖️

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值