react下penLayers点位标注和popup弹层和draw框选

本文链接：https://blog.youkuaiyun.com/qq_33835086/article/details/108864195

本文介绍了在React环境中，使用OpenLayers库进行点位标注、popup弹层显示以及draw框选功能的实现。通过自定义popup弹层和处理地图移动事件，确保标注与弹层的对应。同时提到了地图的可拖动设置和相关地图事件的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

环境
1.react
2.ol6.1.1
3.代码块中的ol相关API组件需要自行导入
标点的输出和样式

// 添加数据源
function mapAddPoint(obj) {
  let newPoint = new Feature({
    geometry: new Point(
      fromLonLat([Number(obj.longitude), Number(obj.latitude)])
    ),
    ...obj,
  });
  newPoint.setStyle(setMakerStyle);
  return newPoint;
}
// 设置标注样式
function setMakerStyle(feature) {
  return new Style({
    image: new Icon({
      anchor: [0.5, 1],
      //图标缩放比例
      scale: 0.2,
      //透明度
      opacity: 0.75,
      //图标的url
      src: markImg,//图标图片这里是预先导入了
    }),
    text: new Text({
      //位置
      textAlign: "center",
      //基准线
      textBaseline: "middle",
      offsetY: -10,
      //文字样式
      font: "normal 14px 微软雅黑",
      //文本内容
      //text: feature.get("title") + '\n' + feature.get("time") || "",
      //文本填充样式（即文字颜色）
      fill: new Fill({ color: "#aa3300" }),
      stroke: new Stroke({ color: "#ffcc33", width: 2 }),
    }),
  });
}

标注绘制
由上面的mapAddPoint函数生成标注元素，放到指定图层上

//重置标注图层
 resetMapPoint() {
    let { map } = this.refs.map;
    if (this.state.vectorLayer) {
      map.removeLayer(this.state.vectorLayer);//删除已存在的图层
    }
    this.initMapPoint(this.state.device_tree.dev