Draw Point On Map Given Coordinates With Openlayers?
I'm trying to plot about 300 points on an openlayers map from a table of about 300 latitude and longitude cordinates. All I found on how to do it is the draw features from their we
Solution 1:
To draw points (or any other geometry) on the map, you just need to,
- Create a source, in this case a vector source, with the features you want to draw.
- Create a layer, in this case a vector layer, with the source from step 1, and the style you prefer.
- Add the layer to the map.
That is all you need to do. Take a look at the example I made for you, it generate 300 random points features and then follow the steps I describe before.
<!doctype html><htmllang="en"><head><linkrel="stylesheet"href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/css/ol.css"type="text/css"><style>.map {
height: 400px;
width: 100%;
}
</style><scriptsrc="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/build/ol.js"></script><title>Random Points From Code</title></head><body><h2>300 Random Points From Code</h2><divid="map"class="map"></div><scripttype="text/javascript">// generate 300 random points featuresconst getRandomNumber = function (min, ref) {
returnMath.random() * ref + min;
}
const features = [];
for (i = 0; i < 300; i++) {
features.push(new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([
-getRandomNumber(50, 50), getRandomNumber(10, 50)
]))
}));
}
// create the source and layer for random featuresconst vectorSource = new ol.source.Vector({
features
});
const vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: new ol.style.Style({
image: new ol.style.Circle({
radius: 2,
fill: new ol.style.Fill({color: 'red'})
})
})
});
// create map and add layersconst map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
vectorLayer
],
view: new ol.View({
center: ol.proj.fromLonLat([-75, 35]),
zoom: 2
})
});
</script></body></html>
Post a Comment for "Draw Point On Map Given Coordinates With Openlayers?"