☰

WME Client Tile Borders

Displays grid lines representing tile borders in the client.

目前为 2018-07-25 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name         WME Client Tile Borders
  3. // @namespace    https://greasyfork.org/en/users/32336-joyriding
  4. // @version      1.1
  5. // @description  Displays grid lines representing tile borders in the client.
  6. // @author       Joyriding
  7. // @include      https://beta.waze.com/*
  8. // @include      https://www.waze.com/editor*
  9. // @include      https://www.waze.com/*/editor*
  10. // @exclude      https://www.waze.com/user/editor*
  11. // @require      https://greasyfork.org/scripts/24851-wazewrap/code/WazeWrap.js
  12. // @grant        none
  13. // ==/UserScript==
  14.  
  15. (function() {
  16.     'use strict';
  17.  
  18.     var settings = {};
  19.     var wmeCtbLayer;
  20.  
  21.     function bootstrap(tries) {
  22.         tries = tries || 1;
  23.  
  24.         if (W && W.map &&
  25.             W.model && W.loginManager.user &&
  26.             $ ) {
  27.             init();
  28.         } else if (tries < 1000)
  29.             setTimeout(function () {bootstrap(tries++);}, 200);
  30.     }
  31.  
  32.     function init()
  33.     {
  34.         console.log("WME CTB Init");
  35.         wmeCtbLayer = new OL.Layer.Vector("wmeCtbLayer",{uniqueName: "__wmeCtbLayer"});
  36.         W.map.addLayer(wmeCtbLayer);
  37.  
  38.         loadSettings();
  39.         WazeWrap.Interface.AddLayerCheckbox("display", "Client Tile Borders", settings.Enabled, onLayerCheckboxChanged);
  40.         onLayerCheckboxChanged(settings.Enabled);
  41.     }
  42.  
  43.     function onLayerCheckboxChanged(checked) {
  44.         settings.Enabled = checked;
  45.         wmeCtbLayer.setVisibility(settings.Enabled);
  46.         if (settings.Enabled)
  47.         {
  48.             W.map.events.register("moveend",W.map,drawGridLines);
  49.             drawGridLines();
  50.         } else {
  51.             wmeCtbLayer.removeAllFeatures();
  52.             W.map.events.unregister("moveend",W.map,drawGridLines);
  53.         }
  54.         saveSettings();
  55.     }
  56.  
  57.     function drawGridLines()
  58.     {
  59.         //console.log("WME CTB draw grid lines");
  60.         wmeCtbLayer.removeAllFeatures();
  61.  
  62.         // Zoom-dependant line style options
  63.         var lineWidth = 2;
  64.         var lineColor = 'gray';
  65.         if (W.map.getZoom() <= 1)
  66.         {
  67.             lineWidth = 1;
  68.         }
  69.         else if (W.map.getZoom() >= 3)
  70.         {
  71.             lineColor = '#EDEDED';
  72.         }
  73.  
  74.         var e=W.map.getExtent();
  75.         var geoNW=new OL.Geometry.Point(e.left,e.top);
  76.         var geoSE=new OL.Geometry.Point(e.right,e.bottom);
  77.  
  78.         geoNW=geoNW.transform(W.map.projection, W.map.displayProjection);
  79.         geoSE=geoSE.transform(W.map.projection, W.map.displayProjection);
  80.  
  81.         // Drop everything to the right of the hundredth decimal place
  82.         var latStart = parseFloat(fixedDigits(geoNW.y));
  83.         var latEnd = parseFloat(fixedDigits(geoSE.y));
  84.         var lonStart = parseFloat(fixedDigits(geoNW.x));
  85.         var lonEnd = parseFloat(fixedDigits(geoSE.x));
  86.  
  87.         // Convert decimal coordinates to positive integer "index" number to make calculations easier and help prevent errors from floating point rounding
  88.         // index = (decimal coordinate * 100) + (180 or 90 * 100)
  89.         var latIndexStart = Number(toLatIndex(latStart));
  90.         var latIndexEnd = Number(toLatIndex(latEnd));
  91.         var lonIndexStart = Number(toLonIndex(lonStart));
  92.         var lonIndexEnd = Number(toLonIndex(lonEnd));
  93.  
  94.         // Ensure that we're starting with the lower of the latitude coordinates
  95.         var latIndex;
  96.         if (latIndexStart > latIndexEnd)
  97.         {
  98.             latIndex = latIndexEnd;
  99.             latIndexEnd = latIndexStart;
  100.             latIndexStart = latIndex;
  101.         }
  102.         // Expand start and end by 1/100's of a degree so that grid extends beyond visible screen
  103.         latIndexStart--;
  104.         latIndexEnd++;
  105.  
  106.         // Ensure that we're starting with the lower of the longitude coordinates
  107.         var lonIndex;
  108.         if (lonIndexStart > lonIndexEnd)
  109.         {
  110.             lonIndex = lonIndexEnd;
  111.             lonIndexEnd = lonIndexStart;
  112.             lonIndexStart = lonIndex;
  113.         }
  114.         // Expand start and end by 1/100's of a degree so that grid extends beyond visible screen
  115.         lonIndexStart--;
  116.         lonIndexEnd++;
  117.  
  118.         // Draw latitude lines every 0.01 degrees
  119.         latIndex = latIndexStart;
  120.         while (latIndex <= latIndexEnd)
  121.         {
  122.             drawDashedLine(true, latIndex, latIndexStart, latIndexEnd, lonIndexStart, lonIndexEnd, lineWidth, lineColor);
  123.             latIndex++;
  124.         }
  125.  
  126.         // Draw longitude lines every 0.01 degrees
  127.         lonIndex = lonIndexStart;
  128.         while (lonIndex <= lonIndexEnd)
  129.         {
  130.             drawDashedLine(false, lonIndex, latIndexStart, latIndexEnd, lonIndexStart, lonIndexEnd, lineWidth, lineColor);
  131.             lonIndex++;
  132.         }
  133.     }
  134.  
  135.     // Drop (not round) digits after the hundredths decimal place
  136.     function fixedDigits(num) {
  137.         var fixed = 2;
  138.         var re = new RegExp('^-?\\d+(?:\.\\d{0,' + (fixed || -1) + '})?');
  139.         return num.toString().match(re)[0];
  140.     }
  141.  
  142.     // Convert decimal degrees to and from an index number so that we're always dealing with a positive integer. lat + 180* and long + 90*.
  143.     // When converting from the index number, round to nearest hundredths decimal.
  144.     function toLatIndex(lat) {
  145.         return Number.parseFloat((lat * 100) + 18000).toFixed(0);
  146.     }
  147.  
  148.     function fromLatIndex(lat) {
  149.         return Number.parseFloat((lat - 18000) / 100).toFixed(2);
  150.     }
  151.  
  152.     function toLonIndex(lon) {
  153.         return Number.parseFloat((lon * 100) + 9000).toFixed(0);
  154.     }
  155.  
  156.     function fromLonIndex(lon) {
  157.         return Number.parseFloat((lon - 9000) / 100).toFixed(2);
  158.     }
  159.  
  160.     function drawDashedLine(isLatLine, lineIndex, latIndexStart, latIndexEnd, lonIndexStart, lonIndexEnd, lineWidth, lineColor) {
  161.         var pointStart = new OL.Geometry.Point();
  162.         var pointEnd   = new OL.Geometry.Point();
  163.  
  164.         if (isLatLine) {
  165.             pointStart.x = Number(fromLonIndex(lonIndexStart));
  166.             pointStart.y = Number(fromLatIndex(lineIndex));
  167.             pointEnd.x = Number(fromLonIndex(lonIndexEnd));
  168.             pointEnd.y = Number(fromLatIndex(lineIndex));
  169.         } else {
  170.             pointStart.x = Number(fromLonIndex(lineIndex));
  171.             pointStart.y = Number(fromLatIndex(latIndexStart));
  172.             pointEnd.x = Number(fromLonIndex(lineIndex));
  173.             pointEnd.y = Number(fromLatIndex(latIndexEnd));
  174.         }
  175.  
  176.         pointStart.transform(W.map.displayProjection, W.map.projection);
  177.         pointEnd.transform(W.map.displayProjection, W.map.projection);
  178.  
  179.         let lsLine1 = new OL.Geometry.LineString([pointStart, pointEnd]);
  180.  
  181.         var lineFeature1 = new OL.Feature.Vector(lsLine1, {}, {
  182.             strokeWidth: lineWidth,
  183.             strokeDashstyle: '4 4',
  184.             strokeColor: lineColor
  185.         });
  186.         wmeCtbLayer.addFeatures([lineFeature1]);
  187.     }
  188.  
  189.     function saveSettings() {
  190.         if (localStorage) {
  191.             var localsettings = {
  192.                 Enabled: settings.Enabled
  193.             };
  194.  
  195.             localStorage.setItem("wmeCtb_Settings", JSON.stringify(localsettings));
  196.         }
  197.     }
  198.  
  199.     function loadSettings() {
  200.         var loadedSettings = $.parseJSON(localStorage.getItem("wmeCtb_Settings"));
  201.         var defaultSettings = {
  202.             Enabled: true
  203.         };
  204.         settings = loadedSettings ? loadedSettings : defaultSettings;
  205.         for (var prop in defaultSettings) {
  206.             if (!settings.hasOwnProperty(prop))
  207.                 settings[prop] = defaultSettings[prop];
  208.         }
  209.     }
  210.  
  211.     bootstrap();
  212. })();