Koldun/mapserver
1
0
Fork 0
forked from MTSR/mapserver
Code Pull Requests Activity

js split

Browse Source
This commit is contained in:
NatureFreshMilk 2019-01-29 08:36:46 +01:00
parent 00107324de
commit 744e1eea12
4 changed files with 68 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
server/static/index.html
View File

@ -30,6 +30,8 @@
<script src="js/lib/leaflet.js"></script>
<script src="js/lib/mithril.min.js"></script>
<script src="js/realtimelayer.js"></script>
<script src="js/L.control.coordinatesDisplay.js"></script>
<script src="js/main.js"></script>
</body>

27
server/static/js/L.control.coordinatesDisplay.js Normal file
View File

@ -0,0 +1,27 @@
(function(){
// coord display
L.Control.CoordinatesDisplay = L.Control.extend({
onAdd: function(map) {
var div = L.DomUtil.create('div', 'leaflet-bar leaflet-custom-display');
function update(ev){
var latlng = ev.latlng;
div.innerHTML = "X:" + parseInt(latlng.lng) + " Z:" + parseInt(latlng.lat);
}
map.on('mousemove', update);
map.on('click', update);
map.on('touch', update);
return div;
},
onRemove: function(map) {
}
});
L.control.coordinatesDisplay = function(opts) {
return new L.Control.CoordinatesDisplay(opts);
}
})()

58
server/static/js/main.js
View File

@ -19,35 +19,6 @@
crs: crs
});
function getTileSource(layerId, x,y,zoom,cacheBust){
return "api/tile/" + layerId + "/" + x + "/" + y + "/" + zoom + "?_=" + Date.now();
}
function getImageId(layerId, x, y, zoom){
return "tile-" + layerId + "/" + x + "/" + y + "/" + zoom;
}
function createTileLayer(layerId){
return L.TileLayer.extend({
createTile: function(coords){
var tile = document.createElement('img');
tile.src = getTileSource(layerId, coords.x, coords.y, coords.z);
tile.id = getImageId(layerId, coords.x, coords.y, coords.z);
return tile;
}
});
}
function updateTile(data){
var id = getImageId(data.layerid, data.x, data.y, data.zoom);
var el = document.getElementById(id);
if (el){
//Update src attribute if img found
el.src = getTileSource(data.layerid, data.x, data.y, data.zoom, true);
}
}
var wsUrl = location.protocol.replace("http", "ws") + "//" + location.host + location.pathname.substring(0, location.pathname.lastIndexOf("/")) + "/api/ws";
var ws = new WebSocket(wsUrl);
@ -56,43 +27,18 @@
var event = JSON.parse(e.data);
if (event.type == "rendered-tile"){
updateTile(event.data)
realtimelayer.update(event.data)
}
}
var layers = {};
var Layer = createTileLayer(0);
var Layer = realtimelayer.create(0);
var tileLayer = new Layer();
tileLayer.addTo(map);
L.control.layers(layers, {}).addTo(map);
// coord display
L.Control.CoordinatesDisplay = L.Control.extend({
onAdd: function(map) {
var div = L.DomUtil.create('div', 'leaflet-bar leaflet-custom-display');
function update(ev){
var latlng = ev.latlng;
div.innerHTML = "X:" + parseInt(latlng.lng) + " Z:" + parseInt(latlng.lat);
}
map.on('mousemove', update);
map.on('click', update);
map.on('touch', update);
return div;
},
onRemove: function(map) {
}
});
L.control.coordinatesDisplay = function(opts) {
return new L.Control.CoordinatesDisplay(opts);
}
var el = L.control.coordinatesDisplay({ position: 'bottomleft' });
el.addTo(map);

37
server/static/js/realtimelayer.js Normal file
View File

@ -0,0 +1,37 @@
(function(){
function getTileSource(layerId, x,y,zoom,cacheBust){
return "api/tile/" + layerId + "/" + x + "/" + y + "/" + zoom + "?_=" + Date.now();
}
function getImageId(layerId, x, y, zoom){
return "tile-" + layerId + "/" + x + "/" + y + "/" + zoom;
}
window.realtimelayer = {
create: function(layerId){
return L.TileLayer.extend({
createTile: function(coords){
var tile = document.createElement('img');
tile.src = getTileSource(layerId, coords.x, coords.y, coords.z);
tile.id = getImageId(layerId, coords.x, coords.y, coords.z);
return tile;
}
});
},
update: function(data){
var id = getImageId(data.layerid, data.x, data.y, data.zoom);
var el = document.getElementById(id);
if (el){
//Update src attribute if img found
el.src = getTileSource(data.layerid, data.x, data.y, data.zoom, true);
}
}
};
})()