MTSR/mapserver
3
0
Fork 1
Code Issues Pull Requests 1 Packages Projects Releases 1 Wiki Activity

abstract icon

Browse Source
This commit is contained in:
NatureFreshMilk 2019-02-05 09:09:35 +01:00
parent 9263cf5e84
commit 219c0f1a0f
4 changed files with 101 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
server/static/index.html
View File

@ -30,6 +30,7 @@
<script src="js/WorldInfoDisplay.js"></script>
<!-- overlays -->
<script src="js/overlays/AbstractIconOverlay.js"></script>
<script src="js/overlays/TravelnetOverlay.js"></script>
<script src="js/overlays/PlayerOverlay.js"></script>

91
server/static/js/overlays/AbstractIconOverlay.js Normal file
View File

@ -0,0 +1,91 @@
'use strict';
var AbstractIconOverlay = L.LayerGroup.extend({
initialize: function(wsChannel, layerMgr, type, icon) {
L.LayerGroup.prototype.initialize.call(this);
this.layerMgr = layerMgr;
this.wsChannel = wsChannel;
this.type = type;
this.icon = icon;
this.currentObjects = {};
this.onLayerChange = this.onLayerChange.bind(this);
this.onMapMove = debounce(this.onMapMove.bind(this), 50);
},
hashPos: function(x,y,z){
return x + "/" + y "/" + z;
},
onLayerChange: function(layer){
this.reDraw(true);
},
onMapMove: function(){
this.reDraw(false);
},
reDraw: function(full){
var self = this;
if (this._map.getZoom() < 10) {
this.clearLayers();
this.currentObjects = {};
return;
}
if (full){
this.clearLayers();
this.currentObjects = {};
}
var mapLayer = this.layerMgr.getCurrentLayer()
var min = this._map.getBounds().getSouthWest();
var max = this._map.getBounds().getNorthEast();
var y1 = parseInt(mapLayer.from/16);
var y2 = parseInt(mapLayer.to/16);
var x1 = parseInt(min.lng);
var x2 = parseInt(max.lng);
var z1 = parseInt(min.lat);
var z2 = parseInt(max.lat);
api.getMapObjects(
x1, y1, y1,
x2, y2, z2,
this.type)
.then(function(objects){
//TODO: remove non-existing markers, add new ones
if (!full){
self.clearLayers();
}
objects.forEach(function(obj){
var marker = L.marker([obj.z, obj.x], {icon: self.icon});
marker.bindPopup(self.getPopup(obj));
marker.addTo(self);
var hash = self.hashPos(obj.x, obj.y, obj.z);
self.currentObjects[hash] = marker;
});
})
},
onAdd: function(map) {
map.on("zoomend", this.onMapMove);
map.on("moveend", this.onMapMove);
this.layerMgr.addListener(this.onLayerChange);
this.reDraw(true)
},
onRemove: function(map) {
this.clearLayers();
map.off("zoomend", this.onMapMove);
map.off("moveend", this.onMapMove);
this.layerMgr.removeListener(this.onLayerChange);
}
});

1
server/static/js/overlays/PlayerOverlay.js
View File

@ -35,7 +35,6 @@ var PlayerOverlay = L.LayerGroup.extend({
},
onMinetestUpdate: function(info){
//TODO incremental update
var self = this;
this.players.forEach(function(player){

90
server/static/js/overlays/TravelnetOverlay.js
View File

@ -8,89 +8,17 @@ var TravelnetIcon = L.icon({
popupAnchor: [0, -32]
});
var TravelnetOverlay = L.LayerGroup.extend({
var TravelnetOverlay = L.AbstractIconOverlay.extend({
initialize: function(wsChannel, layerMgr) {
L.LayerGroup.prototype.initialize.call(this);
this.layerMgr = layerMgr;
this.wsChannel = wsChannel;
this.currentObjects = [];
this.onLayerChange = this.onLayerChange.bind(this);
this.onMapMove = debounce(this.onMapMove.bind(this), 50);
L.AbstractIconOverlay.prototype.initialize.call(this, wsChannel, layerMgr, "travelnet", TravelnetIcon);
},
onLayerChange: function(layer){
this.reDraw(true);
},
onMapMove: function(){
this.reDraw(false);
},
reDraw: function(full){
var self = this;
if (this._map.getZoom() < 10) {
this.clearLayers();
this.currentObjects = [];
return;
}
if (full){
this.clearLayers();
this.currentObjects = [];
}
var mapLayer = this.layerMgr.getCurrentLayer()
var min = this._map.getBounds().getSouthWest();
var max = this._map.getBounds().getNorthEast();
var y1 = parseInt(mapLayer.from/16);
var y2 = parseInt(mapLayer.to/16);
var x1 = parseInt(min.lng);
var x2 = parseInt(max.lng);
var z1 = parseInt(min.lat);
var z2 = parseInt(max.lat);
//TODO: get coords
api.getMapObjects(
x1, y1, y1,
x2, y2, z2,
"travelnet")
.then(function(travelnets){
//TODO: remove non-existing markers, add new ones
if (!full){
self.clearLayers();
}
travelnets.forEach(function(travelnet){
var popup = "<h4>" + travelnet.attributes.station_name + "</h4><hr>" +
"<b>X: </b> " + travelnet.x + "<br>" +
"<b>Y: </b> " + travelnet.y + "<br>" +
"<b>Z: </b> " + travelnet.z + "<br>" +
"<b>Network: </b> " + travelnet.attributes.station_network + "<br>" +
"<b>Owner: </b> " + travelnet.attributes.owner + "<br>";
var marker = L.marker([travelnet.z, travelnet.x], {icon: TravelnetIcon});
marker.bindPopup(popup).addTo(self);
});
})
},
onAdd: function(map) {
map.on("zoomend", this.onMapMove);
map.on("moveend", this.onMapMove);
this.layerMgr.addListener(this.onLayerChange);
this.reDraw(true)
},
onRemove: function(map) {
this.clearLayers();
map.off("zoomend", this.onMapMove);
map.off("moveend", this.onMapMove);
this.layerMgr.removeListener(this.onLayerChange);
createPopup: function(travelnet){
return "<h4>" + travelnet.attributes.station_name + "</h4><hr>" +
"<b>X: </b> " + travelnet.x + "<br>" +
"<b>Y: </b> " + travelnet.y + "<br>" +
"<b>Z: </b> " + travelnet.z + "<br>" +
"<b>Network: </b> " + travelnet.attributes.station_network + "<br>" +
"<b>Owner: </b> " + travelnet.attributes.owner + "<br>";
}
});