From 85460601e28a73cfc93d2427068e0e2eeac5039d Mon Sep 17 00:00:00 2001
From: L4168 <L4168@student.jamk.fi>
Date: Wed, 17 Jul 2019 13:09:28 +0300
Subject: [PATCH] show player information on hover
---
src/App.css | 5 +
src/components/ReplayMap.js | 17 ++-
.../control.trackplayback/control.playback.js | 15 ---
.../src/leaflet.trackplayback/draw.js | 122 +++++++-----------
.../src/leaflet.trackplayback/tracklayer.js | 66 +++++-----
5 files changed, 96 insertions(+), 129 deletions(-)
diff --git a/src/App.css b/src/App.css
index 7a4add6..3bc7dd9 100644
--- a/src/App.css
+++ b/src/App.css
@@ -275,3 +275,8 @@ div.login button:hover {
}
.leaflet-control-playback .sliderContainer {
}
+
+.leaflet-tooltip {
+ background-color: rgba(0, 0, 0, 0.5);
+ color: white;
+}
diff --git a/src/components/ReplayMap.js b/src/components/ReplayMap.js
index 3b2d90f..f173ffd 100644
--- a/src/components/ReplayMap.js
+++ b/src/components/ReplayMap.js
@@ -104,15 +104,15 @@ export default class ReplayMap extends React.Component {
this.trackplayback = new L.TrackPlayBack(this.state.data, this.map, {
trackPointOptions: {
// whether to draw track point
- isDraw: false,
+ isDraw: true,
// whether to use canvas to draw it, if false, use leaflet api `L.circleMarker`
- useCanvas: true,
+ useCanvas: false,
stroke: true,
- color: "#ef0300",
+ color: "#000000",
fill: true,
- fillColor: "#ef0300",
- opacity: 0.3,
- radius: 4
+ fillColor: "rgba(0,0,0,0)",
+ opacity: 0,
+ radius: 12
},
targetOptions: {
// whether to use an image to display target, if false, the program provides a default
@@ -135,6 +135,11 @@ export default class ReplayMap extends React.Component {
speed: 10,
// the max speed
maxSpeed: 100
+ },
+ toolTipOptions: {
+ offset: [0, 0],
+ direction: "top",
+ permanent: false
}
});
this.setState({
diff --git a/src/track-playback/src/control.trackplayback/control.playback.js b/src/track-playback/src/control.trackplayback/control.playback.js
index e2ad472..6c6f101 100644
--- a/src/track-playback/src/control.trackplayback/control.playback.js
+++ b/src/track-playback/src/control.trackplayback/control.playback.js
@@ -100,13 +100,6 @@ export const TrackPlayBackControl = L.Control.extend({
"sliderContainer",
this._container
);
-
- this._pointCbx = this._createCheckbox(
- "show trackPoint",
- "show-trackpoint",
- this._optionsContainer,
- this._showTrackPoint
- );
this._lineCbx = this._createCheckbox(
"show trackLine",
"show-trackLine",
@@ -249,14 +242,6 @@ export const TrackPlayBackControl = L.Control.extend({
return sliderEle;
},
- _showTrackPoint(e) {
- if (e.target.checked) {
- this.trackPlayBack.showTrackPoint();
- } else {
- this.trackPlayBack.hideTrackPoint();
- }
- },
-
_showTrackLine(e) {
if (e.target.checked) {
this.trackPlayBack.showTrackLine();
diff --git a/src/track-playback/src/leaflet.trackplayback/draw.js b/src/track-playback/src/leaflet.trackplayback/draw.js
index db91fd8..850dff1 100644
--- a/src/track-playback/src/leaflet.trackplayback/draw.js
+++ b/src/track-playback/src/leaflet.trackplayback/draw.js
@@ -51,6 +51,7 @@ export const Draw = L.Class.extend({
this._showTrackLine = this.trackLineOptions.isDraw;
this._map = map;
+ this._map.on("click", this._onmouseclickEvt, this);
this._map.on("mousemove", this._onmousemoveEvt, this);
this._trackLayer = new TrackLayer().addTo(map);
@@ -65,18 +66,8 @@ export const Draw = L.Class.extend({
this._trackPointFeatureGroup = L.featureGroup([]).addTo(map);
}
- // ç›®æ ‡å¦‚æžœä½¿ç”¨å›¾ç‰‡ï¼Œå…ˆåŠ è½½å›¾ç‰‡
- if (this.targetOptions.useImg) {
- /* let img2 = new Image();
- img2.onload = () => {
- this._targetImg2 = img2;
- };
- img2.onerror = () => {
- throw new Error("img load error!");
- };
- img2.src = this.targetOptions.imgUrl; */
- this._targetImg = [];
- }
+ // setup array for images
+ this._targetImg = [];
},
update: function() {
@@ -111,6 +102,7 @@ export const Draw = L.Class.extend({
remove: function() {
this._bufferTracks = [];
this._trackLayer.off("update", this._trackLayerUpdate, this);
+ this._map.off("click", this._onmouseclickEvt, this);
this._map.off("mousemove", this._onmousemoveEvt, this);
if (this._map.hasLayer(this._trackLayer)) {
this._map.removeLayer(this._trackLayer);
@@ -137,6 +129,25 @@ export const Draw = L.Class.extend({
},
_onmousemoveEvt: function(e) {
+ if (!this._showTrackPoint) {
+ return;
+ }
+ let point = e.layerPoint;
+ if (this._bufferTracks.length) {
+ for (let i = 0, leni = this._bufferTracks.length; i < leni; i++) {
+ for (let j = 0, len = this._bufferTracks[i].length; j < len; j++) {
+ let tpoint = this._getLayerPoint(this._bufferTracks[i][j]);
+ if (point.distanceTo(tpoint) <= this.trackPointOptions.radius) {
+ this._canvas.style.cursor = "pointer";
+ return;
+ }
+ }
+ }
+ }
+ this._canvas.style.cursor = "grab";
+ },
+
+ _onmouseclickEvt: function(e) {
if (!this._showTrackPoint) {
return;
}
@@ -162,7 +173,7 @@ export const Draw = L.Class.extend({
if (this._map.hasLayer(this._tooltip)) {
this._map.removeLayer(this._tooltip);
}
- this._canvas.style.cursor = "default";
+ //this._canvas.style.cursor = "default";
let latlng = L.latLng(trackpoint.lat, trackpoint.lng);
let tooltip = (this._tooltip = L.tooltip(this.toolTipOptions));
tooltip.setLatLng(latlng);
@@ -223,40 +234,34 @@ export const Draw = L.Class.extend({
_drawTrackPointsCanvas: function(trackpoints) {
let options = this.trackPointOptions;
+ let i = trackpoints.length - 1;
this._ctx.save();
- for (let i = 0, len = trackpoints.length; i < len; i++) {
- if (trackpoints[i].isOrigin) {
- let latLng = L.latLng(trackpoints[i].lat, trackpoints[i].lng);
- let radius = options.radius;
- let point = this._map.latLngToLayerPoint(latLng);
- this._ctx.beginPath();
- this._ctx.arc(point.x, point.y, radius, 0, Math.PI * 2, false);
- this._ctx.globalAlpha = options.opacity;
- if (options.stroke) {
- this._ctx.strokeStyle = options.color;
- this._ctx.stroke();
- }
- if (options.fill) {
- this._ctx.fillStyle = options.fillColor;
- this._ctx.fill();
- }
- }
+ let latLng = L.latLng(trackpoints[i].lat, trackpoints[i].lng);
+ let radius = options.radius;
+ let point = this._map.latLngToLayerPoint(latLng);
+ this._ctx.beginPath();
+ this._ctx.arc(point.x, point.y, radius, 0, Math.PI * 2, false);
+ this._ctx.globalAlpha = options.opacity;
+ if (options.stroke) {
+ this._ctx.strokeStyle = options.color;
+ this._ctx.stroke();
+ }
+ if (options.fill) {
+ this._ctx.fillStyle = options.fillColor;
+ this._ctx.fill();
}
this._ctx.restore();
},
_drawTrackPointsSvg: function(trackpoints) {
- for (let i = 0, len = trackpoints.length; i < len; i++) {
- if (trackpoints[i].isOrigin) {
- let latLng = L.latLng(trackpoints[i].lat, trackpoints[i].lng);
- let cricleMarker = L.circleMarker(latLng, this.trackPointOptions);
- cricleMarker.bindTooltip(
- this._getTooltipText(trackpoints[i]),
- this.toolTipOptions
- );
- this._trackPointFeatureGroup.addLayer(cricleMarker);
- }
- }
+ let i = trackpoints.length - 1;
+ let latLng = L.latLng(trackpoints[i].lat, trackpoints[i].lng);
+ let cricleMarker = L.circleMarker(latLng, this.trackPointOptions);
+ cricleMarker.bindTooltip(
+ this._getTooltipText(trackpoints[0]),
+ this.toolTipOptions
+ );
+ this._trackPointFeatureGroup.addLayer(cricleMarker);
},
_drawtxt: function(text, trackpoint) {
@@ -322,7 +327,6 @@ export const Draw = L.Class.extend({
img.icon = info[0]["value"];
image = img;
}
- //let svg = document.createElementNS(`../${info[0]["value"]}`, "svg"); //http://www.sclance.com/pngs/random-png/random_png_1136179.png
this._ctx.drawImage(image, 0 - offset.x, 0 - offset.y, width, height);
this._ctx.strokeStyle = info[1]["value"];
this._ctx.lineWidth = 3;
@@ -330,43 +334,13 @@ export const Draw = L.Class.extend({
this._ctx.restore();
},
- // _createImage: async function() {
- // const newimg = await new Image();
- // newimg.onload = async () => {};
- // newimg.onerror = async () => {
- // throw new Error("img load error!");
- // };
- // return await newimg;
- // },
-
- /* _drawShipImage: function(trackpoint, info) {
- let point = this._getLayerPoint(trackpoint);
- let width = this.targetOptions.width;
- let height = this.targetOptions.height;
- let offset = {
- x: width / 2,
- y: height / 2
- };
- this._ctx.save();
- this._ctx.translate(point.x, point.y);
- this._ctx.drawImage(
- this._targetImg,
- 0 - offset.x,
- 0 - offset.y,
- width,
- height
- );
- console.log(this._targetImg);
- this._ctx.restore();
- }, */
-
_getTooltipText: function(targetobj) {
let content = [];
content.push("<table>");
if (targetobj.info && targetobj.info.length) {
- for (let i = 0, len = targetobj.info.length; i < len; i++) {
+ // skip first two as they're icon and faction colour
+ for (let i = 2, len = targetobj.info.length; i < len; i++) {
content.push("<tr>");
- content.push("<td>" + targetobj.info[i].key + "</td>");
content.push("<td>" + targetobj.info[i].value + "</td>");
content.push("</tr>");
}
diff --git a/src/track-playback/src/leaflet.trackplayback/tracklayer.js b/src/track-playback/src/leaflet.trackplayback/tracklayer.js
index a03027b..08a2164 100644
--- a/src/track-playback/src/leaflet.trackplayback/tracklayer.js
+++ b/src/track-playback/src/leaflet.trackplayback/tracklayer.js
@@ -1,69 +1,67 @@
-import L from 'leaflet'
+import L from "leaflet";
/**
* 轨迹图层
*/
export const TrackLayer = L.Renderer.extend({
-
- initialize: function (options) {
- L.Renderer.prototype.initialize.call(this, options)
- this.options.padding = 0.1
+ initialize: function(options) {
+ L.Renderer.prototype.initialize.call(this, options);
+ this.options.padding = 0.1;
},
- onAdd: function (map) {
- this._container = L.DomUtil.create('canvas', 'leaflet-zoom-animated')
+ onAdd: function(map) {
+ this._container = L.DomUtil.create("canvas", "leaflet-zoom-animated");
- var pane = map.getPane(this.options.pane)
- pane.appendChild(this._container)
+ var pane = map.getPane(this.options.pane);
+ pane.appendChild(this._container);
- this._ctx = this._container.getContext('2d')
+ this._ctx = this._container.getContext("2d");
- this._update()
+ this._update();
},
- onRemove: function (map) {
- L.DomUtil.remove(this._container)
+ onRemove: function(map) {
+ L.DomUtil.remove(this._container);
},
- getContainer: function () {
- return this._container
+ getContainer: function() {
+ return this._container;
},
- getBounds: function () {
- return this._bounds
+ getBounds: function() {
+ return this._bounds;
},
- _update: function () {
+ _update: function() {
if (this._map._animatingZoom && this._bounds) {
- return
+ return;
}
+ L.Renderer.prototype._update.call(this);
- L.Renderer.prototype._update.call(this)
-
- var b = this._bounds
+ var b = this._bounds;
- var container = this._container
+ var container = this._container;
- var size = b.getSize()
+ var size = b.getSize();
- var m = L.Browser.retina ? 2 : 1
+ var m = L.Browser.retina ? 2 : 1;
- L.DomUtil.setPosition(container, b.min)
+ L.DomUtil.setPosition(container, b.min);
// set canvas size (also clearing it); use double size on retina
- container.width = m * size.x
- container.height = m * size.y
- container.style.width = size.x + 'px'
- container.style.height = size.y + 'px'
+ container.width = m * size.x;
+ container.height = m * size.y;
+ container.style.width = size.x + "px";
+ container.style.height = size.y + "px";
if (L.Browser.retina) {
- this._ctx.scale(2, 2)
+ this._ctx.scale(2, 2);
}
// translate so we use the same path coordinates after canvas element moves
- this._ctx.translate(-b.min.x, -b.min.y)
+ this._ctx.translate(-b.min.x, -b.min.y);
// Tell paths to redraw themselves
- this.fire('update')
+ this.fire("update");
}
-})
+});
--
GitLab