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,
            })
          );
          });
  • 相关阅读:
    7
    6
    Robot Motion -- 机器人路径规划
    Delaunay Triangulation
    Voronoi Diagram -- 泰森多边形 (维诺图)
    Window query -- 区间线段包含问题
    5
    es6模块化
    js模块化编程之彻底弄懂CommonJS和AMD/CMD!
    混合开发菜鸟级别总结笔记 内容来自百度一下,你就知道
  • 原文地址:https://www.cnblogs.com/1gaoyu/p/15261442.html
Copyright © 2011-2022 走看看