I got a problem in web development with OpenLayers 3. I want to add an arrow image by drawing a lineString, the image can draw and point to the direction along the lineString direction, but the image only displays in half, it cannot go over the the line. An excerpt from the code:
var start = e.feature.getGeometry().getFirstCoordinate();
var end = e.feature.getGeometry().getLastCoordinate();
var dx = end[0] - start[0];
var dy = end[1] - start[1];
var rotation = Math.atan2(dy, dx);
var a = new ol.Feature({
geometry: new ol.geom.Point(end)
});
var b = new ol.style.Style({
image: new ol.style.Icon(({
anchor: [0.5, 0.5],
anchorOrigin: 'top-left',
offset: [0, 0],
scale: 1,
opacity: 1,
rotateWithView: false,
rotation: -rotation,
src: '//openlayers.org/en/v3.8.2/examples/data/arrow.png',
}))
});
var m = a.setStyle(b);
source.addFeature(a);
Full example replicating the problem can be seen in jsFiddle.
The immediate problem with only part of the image being displayed was caused by you specifying value of offset; as per the documentation:
define the sub-rectangle to use from the original icon image. Default value is [0, 0].
Setting it to [0, 0] fixes the problem.
Another problem is that the anchor point of the image is not in "top-left", it's roughly in the middle of the icon. The value of anchor should be set to [0.5, 0.5]. The last problem is that the arrow head is attached to the start of the arrow, not the end.
var a = new ol.Feature({
geometry: new ol.geom.Point(end)
});
var b = new ol.style.Style({
image: new ol.style.Icon(({
anchor: [0.5, 0.5],
anchorOrigin: 'top-left',
offset: [0, 0],
scale: 1,
opacity: 1,
rotateWithView: false,
rotation: -rotation,
src: '//openlayers.org/en/v3.8.2/examples/data/arrow.png',
}))
});
I fixed your JSFiddle and posted here.
Related
I need to implement a measure tool with OpenLayers, and I would like to display distance on the segment, with a smart management of the scale (a mark on the segment each 10m, then each 50m, 100m, 1km, 5km, for example...), very much like the GoogleMaps "measure distance" tool.
Is there any library doing that ? What would be the good approach to implement it ?
In short: No, I don't know any lib or class that provides what you want out of the box.
Option 1: Customize ScaleLine
ScaleLine (see api docs) has the option to provide your own render function (see code). The default implementation just calculates the distance and shows it as {number} {scale} by calling the internal function updateElement_, which then updates the ScaleLine's innerHtml.
You could theoretically replace that method and set the innerHTML yourself. That approach might limit you to the development-variant of the library, because the production code is minified and those elements (innerElement_, element_) are not marked as api.
new ol.control.ScaleLine({
render: function(mapEvent) {
// do stuff
}
});
Option 2: Use the Draw Feature with customized LineString styles
so that might be too complicated and I suggest you go for the ol.interaction.Draw feature. The Measure Example shows us how one could draw stuff while the user is drawing a line. You can combine that with custom styles on a LineString.
// TODO split the uses drawn line into segments, like this mockup
const line = new ol.geom.LineString([
[20.0, 50.0],
[30.0, 47.0],
[40.0, 47.0],
[50.0, 47.0]
]);
line.transform('EPSG:4326', 'EPSG:3857');
const lineFeature = new ol.Feature(line);
const lineSource = new ol.source.Vector({
features: [lineFeature]
});
function segmentText(coord, coord2) {
const coord_t = ol.proj.transform(coord, 'EPSG:3857', 'EPSG:4326');
let coordText = coord_t[1].toFixed(0) + '/' + coord_t[0].toFixed(0);
if(coord2) {
const length = ol.Sphere.getLength(new ol.geom.LineString([coord2, coord]));
const distance = (Math.round(length / 1000 * 100) / 100) + ' km';
coordText = coordText + '\n' + distance;
} else {
coordText = coordText + '\n0';
}
return new ol.style.Text({
text: coordText,
fill: new ol.style.Fill({
color: "#00f"
}),
offsetY: 25,
align: 'center',
scale: 1,
});
}
function styleFunction(feature) {
var geometry = feature.getGeometry();
var styles = [
// linestring style
new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#ff0000',
width: 2
})
})
];
function createSegmentStyle(coord, coord2, rotation) {
return new ol.style.Style({
geometry: new ol.geom.Point(coord),
image: new ol.style.Icon({
src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAADCAIAAADdv/LVAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAUSURBVBhXY1Da6MPEwMDAxMDAAAALMAEkQYjH8gAAAABJRU5ErkJggg==',
anchor: [0.75, 0.5],
rotateWithView: true,
rotation: -rotation,
scale: 4
}),
text: segmentText(coord, coord2)
})
};
const firstCoord = geometry.getFirstCoordinate();
geometry.forEachSegment(function (start, end) {
var dx = end[0] - start[0];
var dy = end[1] - start[1];
var rotation = Math.atan2(dy, dx);
if (firstCoord[0] === start[0] && firstCoord[1] === start[1]) {
styles.push(createSegmentStyle(start, null, rotation));
}
styles.push(createSegmentStyle(end, firstCoord, rotation));
});
return styles;
}
const map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.Stamen({ layer:'toner-lite' })
}),
new ol.layer.Vector({
source: lineSource,
style: styleFunction
})
],
view: new ol.View({
center: ol.proj.transform(
[35, 45], 'EPSG:4326', 'EPSG:3857'),
zoom: 4
})
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.5.0/ol.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.5.0/ol-debug.js"></script>
<div id="map" style="height:300px"></div>
I was recently tasked with creating the map for my Wurm Online game alliance. I crafted a genius SVG-based overlay over a static image of an in-game map. Basically it takes data from a spreadsheet and renders Villages as colored circles on the map.
However, we have members all the over the map, so went about to seeing how I could create a zoom-able web-based map of our lands. The game admins give us a map dump every year or thereabouts, so we can create custom map applications however we feel. I downloaded the recent map dump for the island/server I care about, Xanadu.
The Xanadu dump is a 62MB PNG with a resolution of 8192 x 8192 pixels. I found a tile making program (MapTiler version 7), and I went about creating tiles. After the tiles are done rendering, the program itself creates HTML files with embedded JavaScript all programatically. It gave me a head start with OpenLayers3.
I was able to re-calculate Village coordinates and cobble together a zoom-able tiled map with Village circles. Needless to say, I was very happy when I got my custom OpenLayers3 map. (Working example: http://jackswurmtools.com/Content/Static/map.html)
The way I got it set up, each map "decoration" or colored circle is its own Vector.
The chief complaint from my fellow gamers about my zoom-able map, is that the color Village circles are too big zoomed out, yet too small when zoomed in.
I've tried all kinds of things, but I have yet to find the right examples. I'm used to finding and transforming SVG elements based on events, but the OP3 canvas rendering is NOT obvious to me in the DOM.
Some of my questions are:
How can I detect when my map has been zoomed? Is there some callback I'm missing?
And when a zoom is detected, how can I iterate through all my vectors and update a circle radius.
// jacks fully zoomable xanadu map
var data =
[{
X: "6744",
Y: "-2355.75",
Name: "Amish Creek",
Villagers: ["Aniceset", "Fulano"],
BackColor: "Aquamarine",
LandMarkType: "Member"
}, {
X: "6808.75",
Y: "-2265.125",
Name: "Amish Estates",
Villagers: ["Aniceset", "Villagers"],
BackColor: "Purple",
LandMarkType: "Member"
}];
console.log(data);
var mapExtent = [0.00000000, -8192.00000000, 8192.00000000, 0.00000000];
var mapMinZoom = 0;
var mapMaxZoom = 5;
var mapMaxResolution = 1.00000000;
var tileExtent = [0.00000000, -8192.00000000, 8192.00000000, 0.00000000];
var mapResolutions = [];
for (var z = 0; z <= mapMaxZoom; z++) {
mapResolutions.push(Math.pow(2, mapMaxZoom - z) * mapMaxResolution);
}
var mapTileGrid = new ol.tilegrid.TileGrid({
extent: tileExtent,
minZoom: mapMinZoom,
resolutions: mapResolutions
});
var features = [];
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
projection: 'PNGMAP',
tileGrid: mapTileGrid,
url: "http://jackswurmtools.com/Content/Static/{z}/{x}/{y}.png"
})
}),
],
view: new ol.View({
zoom: 4,
center: [6602.375, -2250.3125],
projection: ol.proj.get('PNGMap'),
maxResolution: mapTileGrid.getResolution(mapMinZoom)
}),
});
map.getView();
map.on('singleclick', function(evt) {
var coord = evt.coordinate;
console.log(coord);
$("#coord-overlay").html("[" + coord[0] + ", " + coord[1] + "]");
});
// zoom stuff?
// add layers via JSON iteration
renderSVG(data);
drawLines();
function renderSVG(data) {
var vectorSource = new ol.layer.Vector({});
console.log(map.getView().getZoom());
jQuery.each(data, function() {
var fill = new ol.style.Fill({
color: this.BackColor
});
var stroke = new ol.style.Stroke({
color: [180, 0, 0, 1],
width: 1
});
var style = new ol.style.Style({
image: new ol.style.Circle({
fill: fill,
stroke: stroke,
radius: map.getView().getZoom() * 5,
opacity: 0.7
}),
fill: fill,
stroke: stroke,
text: new ol.style.Text({
font: '12px helvetica,sans-serif',
text: this.Name,
fill: new ol.style.Fill({
color: '#000'
}),
stroke: new ol.style.Stroke({
color: '#fff',
width: 2
})
})
});
var point_feature = new ol.Feature({});
var point_geom = new ol.geom.Point([this.X, this.Y]);
point_feature.setGeometry(point_geom);
var vector_layer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [point_feature],
})
});
vector_layer.setStyle(style);
map.addLayer(vector_layer);
});
}
function drawLines() {
var stroke = new ol.style.Stroke({
color: [255, 0, 0, 1],
width: 6
});
var style = new ol.style.Style({
fill: null,
stroke: stroke,
text: new ol.style.Text({
font: '12px helvetica,sans-serif',
text: "Sandokhan / Wargasm Canal",
fill: new ol.style.Fill({
color: '#000'
}),
stroke: new ol.style.Stroke({
color: '#fff',
width: 2
})
})
});
var line_feature = new ol.Feature({});
var coords = [
[6607.5, -1921],
[6894, -1921]
];
var layerLines = new ol.layer.Vector({
source: new ol.source.Vector({
features: [new ol.Feature({
geometry: new ol.geom.LineString(coords, 'XY'),
name: 'Line',
})]
})
});
layerLines.setStyle(style);
map.addLayer(layerLines);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.8.2/ol.min.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.8.2/ol.min.js" type="text/javascript"></script>
<div id="map"></div>
<div id="coord-overlay">[6612, -2252]</div>
<input id="slider" type="range" min="0" max="1" step="0.1" value="1" oninput="layer.setOpacity(this.value)">
You are looking for a resolution listener, the API docs is an excellent place:
map.getView().on('change:resolution', function(){
var zoom = map.getView().getZoom();
// your conditions
if (zoom < 10) {
// your ol.layer.Vector assuming `vector_layer` global variable
vector_layer.setStyle(style_with_another_radius);
}
});
you can listen to the moveend event for the zoom, however it is also fired when you move the map:
map.on('moveend', function(){
var radius= map.getView().getZoom() * someFactor; // or whatever +,/ ...
yourVectorVillage.setStyle(new ol.style.Circle({ radius : radius}));
// or a style of your own where you can modify the radius
});
I've non-map images like floor images.
By using Leaflet image-Overlay I load these images, And with the help of Leaflet-heat plugin I generate heat-map layer on that image.
But heat-map positions and coordinates of image are mismatched.
please help me to solve this problem.
My Output image:My Output
Black dots in yellow box of the image are the points where i have to generate the heat-map.
I mentioned the coordinates of these points below.
var imgDimensions={width:1713, height:1625};
var map = L.map('map',{
maxZoom: 0,
minZoom: 0,
crs:L.CRS.Simple
}).setView([imgDimensions.height/2, imgDimensions.width/2],0);
var imageUrl = "D:/Jithu/LeafLet/images/Floor1.png";
var imageBounds = [
[imgDimensions.width , 0],
[0, imgDimensions.height]
];
L.imageOverlay(imageUrl, imageBounds).addTo(map);
addressPoints = addressPoints.map(function (p) {
var contPoint = map.layerPointToContainerPoint(L.point(p[0],p[1]));
var latlong = map.layerPointToLatLng(layerPoint);
return [latlong.lat,latlong.lng,p[2]];
});
var heat = L.heatLayer(addressPoints, {
minOpacity:0.0,
max:1.0,
radius: 10,
gradient:{
0.4: 'blue',
0.65: 'lime',
1: 'red'
}
}).addTo(map);
// addressPoints.js
//[X-cord, Y-cord, Intensity]
var addressPoints = [
[637, 383, 1],
[724, 397, 0.5],
[682, 444, 0.5],
[714, 515, 1],
[589, 500, 1]
];
<div id="map" style="width: 1713px;height: 1625px"></div>
Is it possible in OpenLayers 3 to create a text label which clones multiple times along a linestring feature, depending on a scale? Something like:
Here you can see, that when we change scale label "IX Corps Blvd" appears twice. How can we implement this?
You can achieve this with style function. My code sample is about making arrows to line string (slightly different case), but I have commented parts necessary to be changed (at least):
var raster = new ol.layer.Tile({
source: new ol.source.OSM()
});
var source = new ol.source.Vector();
var styleFunction = function(feature) {
var geometry = feature.getGeometry();
var styles = [
// linestring
new ol.style.Style({
stroke: new ol.style.Stroke({ // apply street style here
color: '#ffcc33',
width: 2
})
})
];
geometry.forEachSegment(function(start, end) {
var dx = end[0] - start[0];
var dy = end[1] - start[1];
var rotation = Math.atan2(dy, dx);
// arrows
styles.push(new ol.style.Style({
geometry: new ol.geom.Point(end),
image: new ol.style.Icon({ // Use here label, not icon.
src: 'http://openlayers.org/en/v3.17.1/examples/data/arrow.png',
anchor: [0.75, 0.5],
rotateWithView: false,
rotation: -rotation
})
}));
});
return styles;
};
var vector = new ol.layer.Vector({
source: source,
style: styleFunction
});
map.addInteraction(new ol.interaction.Draw({
source: source,
type: /** #type {ol.geom.GeometryType} */ ('LineString')
}));
Some more effort is needed to place titles in correct placements. I left this answer like this to serve a solid starting point for building your feature.
My source:
[1] http://openlayers.org/en/master/examples/line-arrows.html
I'm using openlayers 3 to show a map with some markers that have a small icon. Upon clicking one of them, the browser switches to another page associated with the marker.
The markers are currently implemented as features:
const style = new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 1.0],
anchorXUnits: 'fraction',
anchorYUnits: 'fraction',
src: img_url,
})
});
const feature = new ol.Feature({
geometry: new ol.geom.Point([x, y]),
});
feature.setStyle(style);
Here's my click handler:
map.on("click", e => {
map.forEachFeatureAtPixel(e.pixel, (feature) => {
window.location.href = "/s/" + feature.getId();
return true; // stop after first feature
});
});
Unfortunately, the icons are quite small and therefore hard to hit on a touch-based interface such as an iPad.
Is there an accepted way of making the target larger? My ideas are the following:
Create an additional invisible marker for each marker and make those clickable.
Instead of only using the event's location, I could sample some pixels around it and use all features nearby.
Is there a better way to do this?
My suggestion is that you create an invisible square around your icon like:
const style = [
new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 1.0],
anchorXUnits: 'fraction',
anchorYUnits: 'fraction',
src: img_url,
})
}),
new ol.style.Style({
image: new ol.style.RegularShape({
stroke: new ol.style.Stroke({ color: [0, 0, 0, 0] }),
points: 4,
radius: 50, // <--------- control its size
angle: Math.PI / 4
})
})
];
I've initially tried out Jonatas' approach where I add a larger style. This works quite well. One caveat is that upon clicking on a feature, we have to figure out which feature is the closest because they can easily overlap.
I've finally decided to go with a slightly different approach after discovering the getClosestFeatureToCoordinate() method. I do everything in the click handler:
map.on("click", event => {
const distance = feature => {
const coords = feature.getGeometry().getCoordinates();
const pixel = map.getPixelFromCoordinate(coords);
const distSquared = Math.pow(event.pixel[0] - pixel[0], 2)
+ Math.pow(event.pixel[1] - pixel[1], 2);
return distSquared;
};
const clickedFeature = { feat: null, dist: Infinity };
/* See if we clicked on a feature. If yes, take closest */
map.forEachFeatureAtPixel(event.pixel, (feature) => {
const dist = distance(feature);
if (dist < clickedFeature.dist) {
clickedFeature.feat = feature;
clickedFeature.dist = dist;
}
});
/* If we are touch-based, we also take into account clicks that happen nearby */
if (!clickedFeature.feat) {
if (ol.has.TOUCH) {
const coords = this._map.getCoordinateFromPixel(event.pixel);
const closestFeat = this._featureSource.getClosestFeatureToCoordinate(coords);
const dist = distance(closestFeat);
/* touch size taken from Apple's guidelines */
if (dist < Math.pow(22,2)) {
clickedFeature.feat = closestFeat;
clickedFeature.dist = dist;
}
}
}
/* go to station */
if (clickedFeature.feat) {
window.location.href = "/s/" + clickedFeature.feat.getId();
}
});