使用 fromLonLat() 中的变量放置 openlayers 标记（节点 js）

Question

所以我创建了一个应用程序，该应用程序显示应该使用标记在地图中显示的不同坐标的当前位置，但是，标记没有显示在正确的位置，如图 Markers pic 所示，它应该在哪里5 个标记在不同的位置。

这是显示标记的代码：

 for (let i = 1; i < 5; i++) {
          console.log(typeof (coord[i]));

          var element = document.createElement('div');
          element.innerHTML = '<img src="https://cdn.mapmarker.io/api/v1/fa/stack?size=50&color=DC4C3F&icon=fa-microchip&hoffset=1" />';
          var marker = new Overlay({
              position: fromLonLat([coord[i]], 'EPSG:3857') ,
              positioning: 'center-center',
              element: element,
              stopEvent: false
          });
          map.addOverlay(marker);
        }

坐标数组包含坐标数组。 [16.3725, 48.208889] 请注意，直接在“fromLonLat”而不是变量中输入坐标时，它可以正常工作。

有没有办法解决这个问题？

Answer 1

如果coord 是一个坐标数组，那么问题在于，您传递的不是坐标coord[i]，而是一个坐标数组[coord[i]]。该函数将坐标作为参数OL API - fromLonLat。

顺便说一句，EPSG:3857 是默认值，因此无需将其作为参数传递。

更新：对 cme​​ts 中提供的代码的更改

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Overlay from 'ol/Overlay';
import Map from 'ol/Map';
import View from 'ol/View';
import Tile from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';
import Style from 'ol/style/Style';
import Icon from 'ol/style/Icon';
import {fromLonLat} from 'ol/proj';
import {transform} from 'ol/proj';
import{DB_CONFIG} from './Config';
import firebase from 'firebase';
import 'firebase/database';

class Map2 extends Component {

    constructor (props) {
        super(props);        
        this.mapRef = null;
        this.setMapRef = element => {
            this.mapRef = element;
        }
        this.Longitude = props.Longitude;
        this.Latitude = props.Latitude;
        this.RFID = props.RFID;
        this.Name = props.Name;
        this.passengerID = props.passengerID;
        const {Name,RFID,Longitude,Latitude} = this.props;
        this.map = null; // <- keep a reference to the map
        this.vectorSource = null; // <- keep a reference to the source
    }

    componentDidMount() {
        const mapDOMNode = ReactDOM.findDOMNode(this.mapRef);
        this.vectorSource = new VectorSource();
        // Custom image for marker
        let iconStyle = new Style({
            image: new Icon({
                anchor: [0.5, 0.5],
                anchorXUnits: 'fraction',
                anchorYUnits: 'fraction',
                src: 'https://pngimg.com/uploads/gps/gps_PNG54.png',
                scale: 0.15
            })
        });  
        let vectorLayer = new VectorLayer({
            source: this.vectorSource,
            style: iconStyle,
            updateWhileAnimating: true,
            updateWhileInteracting: true,
        });
        // Create our initial map view
        let mapCenter = fromLonLat([ -74.0446426, 40.6892534 ]);
        let view = new View({
            center: mapCenter,
            zoom: 10
        });
        this.map = new Map({
            target: mapDOMNode,
            view: view,
            layers: [
                new Tile({
                    source: new OSM(),
                }),
                vectorLayer,
            ],
            loadTilesWhileAnimating: true,
        });
        // get data from firebase
        firebase.database().ref().child("Passengers").orderByChild("Name")
        .on("value",snapshot => {
            if (snapshot.exists() && Name && Longitude && Latitude)){
                const iconFeature = new Feature({
                    type: 'click',
                    geometry: new Point(
                        transform([Longitude, Latitude], 'EPSG:4326', 'EPSG:3857')
                    )
                });
                this.vectorSource.addFeature(iconFeature);
            }
        });
    };

    render() {
        const styles = { height: '100%', width: '100%'}
        return(
            <div style={styles} ref={this.setMapRef}></div>
        );
    }
}

export default Map2