zoukankan      html  css  js  c++  java
  • 点击选中的要素,更换标注图片,并添加文本标注

    首先放置修饰好的图标

     //使用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,
            })
          );
          });
  • 相关阅读:
    mybatis:SQL拦截器
    eclipse:插件安装总结
    eclpse:安装explorer或eExplorer插件
    Spring Tools4
    nginx+tomcat:动静分离+https
    Tomcat:3DES解密时中文乱码
    wireshark如何抓取localhost包
    nginx: 应用访问默认采用https
    windows :config windows update … 一直处于假死状态
    EHCache:Eelment刷新后,timeToLiveSeconds失效了?
  • 原文地址:https://www.cnblogs.com/1gaoyu/p/15261442.html
Copyright © 2011-2022 走看看