[英]Placing openlayers marker using variables in fromLonLat() (node js)
所以我创建了一个应用程序,该应用程序显示应该使用标记在地图中显示的不同坐标的当前位置,但是,标记没有显示在正确的位置,如图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);
}
coord 数组包含坐标数组 ex。 [16.3725, 48.208889] 请注意,当坐标直接输入“fromLonLat”而不是变量时,它可以正常工作。
有没有什么办法解决这一问题?
如果coord
是坐标数组,则问题在于传递的不是坐标coord[i]
,而是传递坐标数组[coord[i]]
。 该函数将坐标作为参数OL API - fromLonLat 。
顺便说一句, EPSG:3857
是默认值,因此无需将其作为参数传递。
更新:对注释中提供的代码的更改
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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.