From 4919714e352d6ddc895207be756bd7879ed1507e Mon Sep 17 00:00:00 2001 From: NatureFreshMilk Date: Thu, 7 Feb 2019 07:56:52 +0100 Subject: [PATCH] geo json layer --- server/static/index.html | 3 + server/static/js/main.js | 15 ++-- .../js/overlays/AbstractGeoJsonOverlay.js | 87 +++++++++++++++++++ server/static/js/overlays/PoiOverlay.js | 12 +++ server/static/js/overlays/ProtectorOverlay.js | 27 ++++++ 5 files changed, 136 insertions(+), 8 deletions(-) create mode 100644 server/static/js/overlays/AbstractGeoJsonOverlay.js create mode 100644 server/static/js/overlays/PoiOverlay.js create mode 100644 server/static/js/overlays/ProtectorOverlay.js diff --git a/server/static/index.html b/server/static/index.html index ae60800..6f1fb45 100644 --- a/server/static/index.html +++ b/server/static/index.html @@ -31,8 +31,11 @@ + + + diff --git a/server/static/js/main.js b/server/static/js/main.js index 8266406..52a6748 100644 --- a/server/static/js/main.js +++ b/server/static/js/main.js @@ -5,8 +5,6 @@ api.getConfig().then(function(cfg){ var wsChannel = new WebSocketChannel(); wsChannel.connect(); - var rtTiles = new RealtimeTileLayer(wsChannel); - var initialZoom = 11; var initialCenter = [0, 0]; @@ -28,19 +26,20 @@ api.getConfig().then(function(cfg){ var tileLayer = new RealtimeTileLayer(wsChannel, 0); tileLayer.addTo(map); + //TODO: all layers layers["Base"] = tileLayer; - overlays["Players"] = new PlayerOverlay(wsChannel, layerMgr); + + overlays["Player"] = new PlayerOverlay(wsChannel, layerMgr); + overlays["POI"] = new PoiOverlay(wsChannel, layerMgr); overlays["Travelnet"] = new TravelnetOverlay(wsChannel, layerMgr); + overlays["Protector"] = new ProtectorOverlay(wsChannel, layerMgr); map.addLayer(overlays["Players"]); L.control.layers(layers, overlays).addTo(map); - var el = new CoordinatesDisplay({ position: 'bottomleft' }); - el.addTo(map); - - el = new WorldInfoDisplay(wsChannel, { position: 'bottomright' }); - el.addTo(map); + new CoordinatesDisplay({ position: 'bottomleft' }).addTo(map); + new WorldInfoDisplay(wsChannel, { position: 'bottomright' }).addTo(map); }).catch(function(e){ console.error(e); diff --git a/server/static/js/overlays/AbstractGeoJsonOverlay.js b/server/static/js/overlays/AbstractGeoJsonOverlay.js new file mode 100644 index 0000000..3611734 --- /dev/null +++ b/server/static/js/overlays/AbstractGeoJsonOverlay.js @@ -0,0 +1,87 @@ +'use strict'; + +var AbstractGeoJsonOverlay = L.LayerGroup.extend({ + initialize: function(wsChannel, layerMgr, type) { + L.LayerGroup.prototype.initialize.call(this); + + this.layerMgr = layerMgr; + this.wsChannel = wsChannel; + this.type = type; + + this.onLayerChange = this.onLayerChange.bind(this); + this.onMapMove = debounce(this.onMapMove.bind(this), 50); + }, + + onLayerChange: function(layer){ + this.reDraw(); + }, + + onMapMove: function(){ + this.reDraw(); + }, + + createGeoJson: function(objects){ + var self = this; + + var geoJsonLayer = L.geoJSON([], { + onEachFeature: function(feature, layer){ + if (feature.properties && feature.properties.popupContent) { + layer.bindPopup(feature.properties.popupContent); + } + } + }); + + objects.forEach(function(obj){ + geoJsonLayer.addData(self.createFeature(obj)); + }); + + return geoJsonLayer; + }, + + reDraw: function(){ + var self = this; + + if (this._map.getZoom() < 10) { + this.clearLayers(); + return; + } + + 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){ + self.clearLayers(); + + var geoJsonLayer = createGeoJson(objects); + geoJsonLayer.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); + } + +}); diff --git a/server/static/js/overlays/PoiOverlay.js b/server/static/js/overlays/PoiOverlay.js new file mode 100644 index 0000000..6baad15 --- /dev/null +++ b/server/static/js/overlays/PoiOverlay.js @@ -0,0 +1,12 @@ +'use strict'; + +var PoiOverlay = AbstractIconOverlay.extend({ + initialize: function(wsChannel, layerMgr) { + AbstractIconOverlay.prototype.initialize.call(this, wsChannel, layerMgr, "poi", L.Icon.Default); + }, + + createPopup: function(poi){ + return "

" + poi.attributes.name + "

" + + "Owner: " + poi.attributes.owner + "
"; + } +}); diff --git a/server/static/js/overlays/ProtectorOverlay.js b/server/static/js/overlays/ProtectorOverlay.js new file mode 100644 index 0000000..1167df4 --- /dev/null +++ b/server/static/js/overlays/ProtectorOverlay.js @@ -0,0 +1,27 @@ +'use strict'; + +var ProtectorOverlay = AbstractGeoJsonOverlay.extend({ + initialize: function(wsChannel, layerMgr) { + AbstractGeoJsonOverlay.prototype.initialize.call(this, wsChannel, layerMgr, "protector"); + }, + + createFeature: function(protector){ + return { + "type":"Feature", + "geometry": { + "type":"Polygon", + "coordinates":[[ + [protector.x-5,protector.z-5], + [protector.x-5,protector.z+6], + [protector.x+6,protector.z+6], + [protector.x+6,protector.z-5], + [protector.x-5,protector.z-5] + ]] + }, + "properties":{ + "name": protector.attributes.owner, + "popupContent": protector.attributes.owner + } + }; + } +});