WME Client Tile Borders

Displays grid lines representing tile borders in the client.

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

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址