138 lines
2.7 KiB
JavaScript
138 lines
2.7 KiB
JavaScript
|
|
const leaflet = require('leaflet');
|
|
|
|
import draw_base_map from './base_map'
|
|
import { addWMSLayer } from './helpers';
|
|
|
|
import {
|
|
ACTUAL_ROUTE_COLOR,
|
|
PLAN_ROUTE_COLOR,
|
|
CIRCLE_COLOR
|
|
} from './config'
|
|
|
|
/**
|
|
* Show some popup text when a feature is clicked on
|
|
* @param feature
|
|
* @param layer
|
|
*/
|
|
export const onFeaturePointClick = (feature, layer) => {
|
|
let popup_html = '';
|
|
if (feature.properties && feature.properties.popup) {
|
|
popup_html += feature.properties.popup
|
|
}
|
|
|
|
layer.bindPopup(popup_html)
|
|
};
|
|
|
|
/**
|
|
* Show each point as a marker
|
|
* @param feature
|
|
* @param latlng
|
|
* @returns {*}
|
|
*/
|
|
export const pointToLayer = (feature, latlng) => {
|
|
return leaflet.circleMarker(latlng, {
|
|
radius: 5,
|
|
fillColor: CIRCLE_COLOR,
|
|
color: '#000',
|
|
weight: 1,
|
|
opacity: 1,
|
|
fillOpacity: 0.8
|
|
})
|
|
}
|
|
|
|
/**
|
|
*
|
|
* @param opts
|
|
* @private
|
|
*/
|
|
export default (opts) => {
|
|
|
|
opts = Object.assign({
|
|
route_points: null,
|
|
planned_route_line: null,
|
|
actual_route_points: null,
|
|
actual_route_line: null,
|
|
render_elem: 'map',
|
|
metar_wms: {
|
|
url: '',
|
|
params: {}
|
|
},
|
|
}, opts);
|
|
|
|
console.log(opts);
|
|
|
|
let map = draw_base_map(opts);
|
|
|
|
if (opts.metar_wms.url !== '') {
|
|
addWMSLayer(map, opts.metar_wms);
|
|
}
|
|
|
|
let geodesicLayer = leaflet.geodesic([], {
|
|
weight: 4,
|
|
opacity: 0.9,
|
|
color: PLAN_ROUTE_COLOR,
|
|
steps: 50,
|
|
wrap: false,
|
|
}).addTo(map);
|
|
|
|
geodesicLayer.geoJson(opts.planned_route_line);
|
|
|
|
try {
|
|
map.fitBounds(geodesicLayer.getBounds())
|
|
} catch (e) {
|
|
console.log(e)
|
|
}
|
|
|
|
// Draw the route points after
|
|
if (opts.route_points !== null) {
|
|
let route_points = leaflet.geoJSON(opts.route_points, {
|
|
onEachFeature: onFeaturePointClick,
|
|
pointToLayer: pointToLayer,
|
|
style: {
|
|
'color': PLAN_ROUTE_COLOR,
|
|
'weight': 3,
|
|
'opacity': 0.65,
|
|
},
|
|
});
|
|
|
|
route_points.addTo(map);
|
|
}
|
|
|
|
/**
|
|
* draw the actual route
|
|
*/
|
|
|
|
if (opts.actual_route_line !== null && opts.actual_route_line.features.length > 0) {
|
|
let geodesicLayer = leaflet.geodesic([], {
|
|
weight: 3,
|
|
opacity: 0.9,
|
|
color: ACTUAL_ROUTE_COLOR,
|
|
steps: 50,
|
|
wrap: false,
|
|
}).addTo(map);
|
|
|
|
geodesicLayer.geoJson(opts.actual_route_line);
|
|
|
|
try {
|
|
map.fitBounds(geodesicLayer.getBounds())
|
|
} catch (e) {
|
|
console.log(e)
|
|
}
|
|
}
|
|
|
|
if (opts.actual_route_points !== null && opts.actual_route_points.features.length > 0) {
|
|
let route_points = leaflet.geoJSON(opts.actual_route_points, {
|
|
onEachFeature: onFeaturePointClick,
|
|
pointToLayer: pointToLayer,
|
|
style: {
|
|
'color': ACTUAL_ROUTE_COLOR,
|
|
'weight': 3,
|
|
'opacity': 0.65,
|
|
},
|
|
});
|
|
|
|
route_points.addTo(map)
|
|
}
|
|
};
|