点击选中的要素,更换标注图片,并添加文本标注
首先放置修饰好的图标
//使用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, }) ); });