点击选中的要素,更换标注图片,并添加文本标注

首先放置修饰好的图标

 //使用Select进行要素的选择
      //定义select控制器,点击标注后的事件
      const map = this.map;
      var select = new Select();
      //map加载该控件,默认是激活可用的
      map.addInteraction(select);
      select.on("select", function (e) {
        console.log("选中要素");
        // console.log(e.selected[0].get('name')); //打印已选择的Feature
              var currentRome = e.selected[0]; //获取当前选中的节点
      currentRome.setStyle(new OlStyleStyle({
          //图标样式
          image: new OlStyleIcon({
            // anchor: [10, 18], //设置图标偏移
            scale: 0.8, // 图标缩小显示
            // anchorOrigin: "top-right", //标注样式的起点位置
            // anchorXUnits: "pixels", //X方向单位:分数
            // anchorYUnits: "pixels", //Y方向单位:像素
            // offsetOrigin: "bottom-left", //偏移起点位置的方向
            opacity: 1, //透明度
            src: require("./../assets/index/selected.png"), //图片路径
          }),
          //文本样式
              text: new Text({
              textAlign: 'center',     //对齐方式
              textBaseline: 'middle',    //文本基线
              font: 'normal 12px 微软雅黑',     //字体样式
              text: currentRome.get('name'),    //文本内容
              offsetY: -33,    // Y轴偏置
              offsetX:5,
              rotation:-0.25,
              fill: new Fill({        //填充样式
              color: 'black'
              }),
              backgroundFill: new Fill({      // 填充背景
              color:"transparent",
              }),
              padding: [2, 5, 2, 5],
          }),
          zIndex: 299,
        })
      );
      });

 

posted on 2021-09-13 10:52  一往无前!  阅读(106)  评论(0编辑  收藏  举报