genPOI: support polylines and filled-in polygons
Add support for polyline POIs just like in the good ol' Google Maps days. See #883. The format after this commit is: { id, x, y, z, text, color, polyline/polygon: [{ x, y, z }, ...] } Optional properties: - common ones like "icon" and "hovertext" - "strokeColor" (string), - "fill" (boolean) - "weight" (integer) Docs not included. Largely based on PR #1536 by @jsmienk. Closes #1456, closes #1536, closes #1643.
This commit is contained in:
@@ -418,18 +418,36 @@ def create_marker_from_filter_result(poi, result):
|
||||
else: # ...otherwise default to display text.
|
||||
d['hovertext'] = result['text']
|
||||
|
||||
if 'polyline' in result and hasattr(result['polyline'], '__iter__'):
|
||||
d['polyline'] = []
|
||||
for point in result['polyline']:
|
||||
# point.copy() would work, but this validates better
|
||||
d['polyline'].append(dict(x=point['x'], y=point['y'], z=point['z']))
|
||||
if isinstance(result['color'], str):
|
||||
d['strokeColor'] = result['color']
|
||||
|
||||
if "icon" in result:
|
||||
d["icon"] = result['icon']
|
||||
if "createInfoWindow" in result:
|
||||
d["createInfoWindow"] = result['createInfoWindow']
|
||||
|
||||
# Polylines and polygons
|
||||
if ('polyline' in result and hasattr(result['polyline'], '__iter__')) or \
|
||||
'polygon' in result and hasattr(result['polygon'], '__iter__'):
|
||||
# If the points form a line or closed shape
|
||||
d['isLine'] = 'polyline' in result
|
||||
# Collect points
|
||||
d['points'] = []
|
||||
for point in (result['polyline'] if d['isLine'] else result['polygon']):
|
||||
d['points'].append(dict(x=point['x'], y=point['y'], z=point['z']))
|
||||
|
||||
# Options and default values
|
||||
if 'color' in result:
|
||||
d['strokeColor'] = result['color']
|
||||
else:
|
||||
d['strokeColor'] = 'red'
|
||||
|
||||
if 'fill' in result:
|
||||
d['fill'] = result['fill']
|
||||
else:
|
||||
d['fill'] = not d['isLine'] # fill polygons by default
|
||||
|
||||
if 'weight' in result:
|
||||
d['strokeWeight'] = result['weight']
|
||||
else:
|
||||
d['strokeWeight'] = 2
|
||||
else:
|
||||
raise ValueError("Got an %s as result for POI with id %s"
|
||||
% (type(result).__name__, poi['id']))
|
||||
|
||||
@@ -378,27 +378,48 @@ overviewer.util = {
|
||||
console.log("this tileset has markers:", obj);
|
||||
obj.marker_groups = {};
|
||||
|
||||
// For every group of markers
|
||||
for (var mkidx = 0; mkidx < markers[obj.path].length; mkidx++) {
|
||||
// Create a Leaflet layer group
|
||||
var marker_group = new L.layerGroup();
|
||||
var marker_entry = markers[obj.path][mkidx];
|
||||
L.Util.setOptions(marker_group, {default_checked: marker_entry.checked});
|
||||
var icon = L.divIcon({html: `<img class="ov-marker" src="${marker_entry.icon}">`});
|
||||
|
||||
// For every marker in group
|
||||
for (var dbidx = 0; dbidx < markersDB[marker_entry.groupName].raw.length; dbidx++) {
|
||||
var db = markersDB[marker_entry.groupName].raw[dbidx];
|
||||
var latlng = overviewer.util.fromWorldToLatLng(db.x, db.y, db.z, obj);
|
||||
var m_icon;
|
||||
if (db.icon != undefined) {
|
||||
m_icon = L.divIcon({html: `<img class="ov-marker" src="${db.icon}">`});
|
||||
let db = markersDB[marker_entry.groupName].raw[dbidx];
|
||||
var layerObj = undefined;
|
||||
|
||||
// Shape or marker?
|
||||
if ('points' in db) {
|
||||
// Convert all coords
|
||||
plLatLng = db['points'].map(function(p) {
|
||||
return overviewer.util.fromWorldToLatLng(p.x, p.y, p.z, obj);
|
||||
});
|
||||
options = {
|
||||
color: db['strokeColor'],
|
||||
weight: db['strokeWeight'],
|
||||
fill: db['fill']
|
||||
};
|
||||
layerObj = db['isLine'] ? L.polyline(plLatLng, options) : L.polygon(plLatLng, options);
|
||||
// TODO: add other config options (fill color, fill opacity)
|
||||
} else {
|
||||
m_icon = icon;
|
||||
// Convert coords
|
||||
let latlng = overviewer.util.fromWorldToLatLng(db.x, db.y, db.z, obj);
|
||||
// Set icon and use default icon if not specified
|
||||
let m_icon = L.divIcon({html: `<img class="ov-marker" src="${db.icon == undefined ? marker_entry.icon : db.icon}">`});
|
||||
// Create marker
|
||||
layerObj = new L.marker(latlng, {icon: m_icon, title: db.hovertext});
|
||||
}
|
||||
let new_marker = new L.marker(latlng, {icon: m_icon, title: db.hovertext});
|
||||
// Add popup to marker
|
||||
if (marker_entry.createInfoWindow) {
|
||||
new_marker.bindPopup(db.text);
|
||||
layerObj.bindPopup(db.text);
|
||||
}
|
||||
marker_group.addLayer(new_marker);
|
||||
// Add the polyline or marker to the layer
|
||||
marker_group.addLayer(layerObj);
|
||||
}
|
||||
// Save marker group
|
||||
obj.marker_groups[marker_entry.displayName] = marker_group;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,11 +7,10 @@ var world = "top";
|
||||
markersDB[groupName] = {
|
||||
"raw": [
|
||||
{
|
||||
"fillColor": "#00FF00",
|
||||
"fillOpacity": 0.2,
|
||||
"strokeColor": "#FF0000",
|
||||
"strokeOpacity": 1,
|
||||
"polygon" : [
|
||||
"strokeWeight": 2,
|
||||
"fill": true,
|
||||
"polyline" : [
|
||||
{"x": 347, "y": 67, "z": 95},
|
||||
{"x": 347, "y": 77, "z": 95},
|
||||
{"x": 347, "y": 77, "z": 105},
|
||||
@@ -19,7 +18,7 @@ markersDB[groupName] = {
|
||||
{"x": 347, "y": 67, "z": 105}
|
||||
]}
|
||||
],
|
||||
"name": "Regions",
|
||||
"name": groupName,
|
||||
"created": false
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user