|React+Openlayuers 模板(学习中，持续更新)( 二 )

                image: new Icon({
                  anchor: [0.5 1

                  scale: 0.12
                  src: featureImg
                )
              )

          )
          // 将矢量层添加到地图
          map.current.addLayer(iconLayer);


      /**
      * 创建线
      */
      const createLine = (lineData: Array<any> lineColor: string layerId: string) => {
        let lineFeature: any;
        if (lineData.length > 0) {
          lineFeature = new Feature({
            geometry: new LineString([...lineData
)
          )

        // 将划线属性添加到矢量数据源中
        let lineSource = new VectorSource({)
        lineSource.addFeature(lineFeature);
        let lineLayer = new VectorLayer({
          source: lineSource
          zIndex: 2
          style: () => {
            return new Style({
              stroke: new Stroke({
                width: 4
                color: 'rgb(02550)'
              )
            )

        )
        // 将矢量层添加到地图
        map.current.addLayer(lineLayer);

      /**
        * 创建信息框
        */
      const createInfo = () => {
        //创建overlay容器
        const overlayDom = document.createElement('div');
        overlayDom.className = 'overlayDom';
        mapDom.current?.appendChild(overlayDom);
        //创建内部信息容器
        const overlayInfo = document.createElement('div');
        overlayInfo.className = 'overlayInfo';
        overlayDom.appendChild(overlayInfo)
        //创建overlay
        const overlay = new Overlay({
          element: overlayDom // overlay包含的DOM
          autoPan: true // 当overlay超出地图边界时，地图自动移动
          positioning: 'bottom-center'
          offset: [0 -50
// 偏移量，单位像素
          stopEvent: true // 事件传播
          autoPanAnimation: {
            // 设置autoPan的动画
            duration: 500

          autoPanMargin: 150
        )