Changeset 150


Ignore:
Timestamp:
Aug 31, 2014, 8:20:51 PM (10 years ago)
Author:
alloc
Message:

Webserver files

Location:
binary-improvements/webserver
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • binary-improvements/webserver/index.html

    r149 r150  
    1010        <div id="map"></div>
    1111        <div id="info">
    12                 MouseCoords: <span id="pos"></span><br/>
    13                 RegionFile: <span id="regfile"></span>
     12                MouseCoords: <span id="pos"></span>
    1413        </div>
    1514
  • binary-improvements/webserver/js/index.js

    r149 r150  
     1var REGIONSIZE = 512;
     2var CHUNKSIZE = 16;
     3var TILESIZE = 128;
     4var MAXZOOM = 4;
     5
    16SDTD_Projection = {
    27        project: function (latlng) {
     
    1924
    2025var CoordToChunk = function(latlng) {
    21         var x = Math.floor(((latlng.lng + 16777216) / 16) - (16777216 / 16));
    22         var y = Math.floor(((latlng.lat + 16777216) / 16) - (16777216 / 16));
     26        var x = Math.floor(((latlng.lng + 16777216) / CHUNKSIZE) - (16777216 / CHUNKSIZE));
     27        var y = Math.floor(((latlng.lat + 16777216) / CHUNKSIZE) - (16777216 / CHUNKSIZE));
    2328        return L.latLng(y, x);
    2429}
    2530
    2631var CoordToRegion = function(latlng) {
    27         var x = Math.floor(((latlng.lng + 16777216) / 512) - (16777216 / 512));
    28         var y = Math.floor(((latlng.lat + 16777216) / 512) - (16777216 / 512));
     32        var x = Math.floor(((latlng.lng + 16777216) / REGIONSIZE) - (16777216 / REGIONSIZE));
     33        var y = Math.floor(((latlng.lat + 16777216) / REGIONSIZE) - (16777216 / REGIONSIZE));
    2934        return L.latLng(y, x);
    3035}
     
    3237var FormatCoord = function(latlng) {
    3338        return Math.abs(latlng.lat)+ (latlng.lat>=0 ? " N" : " S") + " / " + Math.abs(latlng.lng) + (latlng.lng>=0 ? " E" : " W");
     39}
     40
     41var FormatRegionFileName = function(latlng) {
     42        return "r." + latlng.lng + "." + latlng.lat + ".7rg";
    3443}
    3544
     
    4049}).setView([0, 0], 0);
    4150
    42 L.tileLayer('../../map/{z}/{x}/{y}.png?t={time}', {
    43         maxZoom: 5,
     51var tileLayer = L.tileLayer('../../map/{z}/{x}/{y}.png?t={time}', {
     52        maxZoom: MAXZOOM+1,
    4453        minZoom: 0,
    45         maxNativeZoom: 4,
    46         tileSize: 128,
     54        maxNativeZoom: MAXZOOM,
     55        tileSize: TILESIZE,
    4756        continuousWorld: true,
    4857        tms: true,
    4958        unloadInvisibleTiles: true,
    5059        time: function() { return new Date().getTime(); }
     60});
     61
     62var regionLayer = L.tileLayer.canvas({
     63        maxZoom: MAXZOOM+1,
     64        minZoom: 0,
     65        maxNativeZoom: MAXZOOM+1,
     66        tileSize: TILESIZE,
     67        continuousWorld: true
     68});
     69
     70regionLayer.drawTile = function(canvas, tilePoint, zoom) {
     71        var blockWorldSize = TILESIZE * Math.pow(2, MAXZOOM-zoom);
     72        var tileLeft = tilePoint.x * blockWorldSize;
     73        var tileBottom = (-1-tilePoint.y) * blockWorldSize;
     74        var blockPos = L.latLng(tileBottom, tileLeft);
     75       
     76        var ctx = canvas.getContext('2d');
     77       
     78        ctx.strokeStyle = "lightblue";
     79        ctx.fillStyle = "lightblue";
     80        ctx.lineWidth = 1;
     81        ctx.font="14px Arial";
     82       
     83        var lineCount = blockWorldSize / REGIONSIZE;
     84        if (lineCount >= 1) {
     85                var pos = 0;
     86                while (pos < TILESIZE) {
     87                        // Vertical
     88                        ctx.beginPath();
     89                        ctx.moveTo(pos, 0);
     90                        ctx.lineTo(pos, TILESIZE);
     91                        ctx.stroke();
     92                       
     93                        // Horizontal
     94                        ctx.beginPath();
     95                        ctx.moveTo(0, pos);
     96                        ctx.lineTo(TILESIZE, pos);
     97                        ctx.stroke();
     98
     99                        pos += TILESIZE / lineCount;
     100                }
     101                ctx.fillText(FormatRegionFileName(CoordToRegion(blockPos)), 4, TILESIZE-5);
     102        } else {
     103                if ((tileLeft % REGIONSIZE) == 0) {
     104                        // Vertical
     105                        ctx.beginPath();
     106                        ctx.moveTo(0, 0);
     107                        ctx.lineTo(0, TILESIZE);
     108                        ctx.stroke();
     109                }
     110                if ((tileBottom % REGIONSIZE) == 0) {
     111                        // Horizontal
     112                        ctx.beginPath();
     113                        ctx.moveTo(0, TILESIZE);
     114                        ctx.lineTo(TILESIZE, TILESIZE);
     115                        ctx.stroke();
     116                }
     117                if ((tileLeft % REGIONSIZE) == 0 && (tileBottom % REGIONSIZE) == 0) {
     118                        ctx.fillText(FormatRegionFileName(CoordToRegion(blockPos)), 4, TILESIZE-5);
     119                }
     120        }
     121
     122        var pos = tileLeft;
     123
     124}
     125
     126var baseLayers = {
     127    //"Map": tileLayer
     128};
     129
     130var overlays = {
     131    "Region files": regionLayer
     132};
     133
     134tileLayer.addTo(map);
     135L.control.layers(baseLayers, overlays, {
     136        collapsed: false
    51137}).addTo(map);
    52138
    53 
    54139map.on('mousemove', function(e) {
    55         var rf = CoordToRegion(e.latlng);
    56140        L.DomUtil.get('pos').textContent = FormatCoord(e.latlng);
    57         L.DomUtil.get('regfile').textContent = "r." + rf.lng + "." + rf.lat + ".7rg";
    58141});
Note: See TracChangeset for help on using the changeset viewer.