This lets you drop boxes around the map to help visualize where you have been editing
当前为
// ==UserScript==
// @name WME BeenThere
// @namespace https://greasyfork.org/users/30701-justins83-waze
// @description This lets you drop boxes around the map to help visualize where you have been editing
// @include https://www.waze.com/editor/*
// @include https://www.waze.com/*/editor/*
// @include https://beta.waze.com/*
// @require https://greasyfork.org/scripts/27023-jscolor/code/JSColor.js
// @version 0.1.3
// @grant none
// ==/UserScript==
//---------------------------------------------------------------------------------------
var beenTheresettings = [];
var attributes = {
name: ""
};
var layerFuture = [];
var pointStyle = {
pointRadius: 3,
fillOpacity: 50,
strokeColor: '#00ece3',
strokeWidth: '2',
strokeLinecap: 'round'
};
var clickCount = 0;
var userRectPoint1 = null;
(function() {
function bootstrap(tries) {
tries = tries || 1;
if (window.W &&
window.W.map &&
window.W.model &&
window.W.loginManager.user &&
$ &&
window.jscolor) {
InitMapRaidOverlay();
} else if (tries < 1000) {
setTimeout(function () {bootstrap(tries++);}, 200);
}
}
bootstrap();
function AddExtent() {
var point = Waze.map.getExtent();
var groupPoints2 = {
topLeft : {
lon:point.left,
lat:point.top
},
botLeft : {
lon: point.left,
lat: point.bottom
},
botRight: {
lon: point.right,
lat: point.bottom
},
topRight:{
lon: point.right,
lat: point.top
},
color: "#" + $('#colorPicker')[0].jscolor.toString(),
type: "rectangle"
};
var mro_Map = Waze.map;
beenTheresettings.layerHistory.push(groupPoints2);
DrawRectangle(groupPoints2);
}
function DrawRectangle(obj){
var pnt = [];
var convPoint = new OpenLayers.Geometry.Point(obj.topLeft.lon, obj.topLeft.lat);
pnt.push(convPoint);
convPoint = new OpenLayers.Geometry.Point(obj.botLeft.lon, obj.botLeft.lat);
pnt.push(convPoint);
convPoint = new OpenLayers.Geometry.Point(obj.botRight.lon, obj.botRight.lat);
pnt.push(convPoint);
convPoint = new OpenLayers.Geometry.Point(obj.topRight.lon, obj.topRight.lat);
pnt.push(convPoint);
convPoint = new OpenLayers.Geometry.Point(obj.topLeft.lon, obj.topLeft.lat);
pnt.push(convPoint);
var style = {
strokeColor: obj.color, strokeOpacity: 0.8, strokeWidth: 8, fillColor: obj.color, fillOpacity: 0.0,
label: "", labelOutlineColor: "black", labelOutlineWidth: 3, fontSize: 14,
fontColor: "orange", fontOpacity: 0.85, fontWeight: "bold"};
var ring = new OL.Geometry.LinearRing(pnt);
var polygon = new OL.Geometry.Polygon([ring]);
var feature = new OL.Feature.Vector(polygon, attributes, style);
mapLayers.addFeatures([feature]);
updateTotalRectCount();
}
function updateTotalRectCount(){
$('#rectCount')[0].innerHTML = mapLayers.features.length;
}
function NewBox() {
e.stopPropagation();
AddExtent();
saveSettings();
}
function NewUserRect(e){
e.stopPropagation();
clickCount = 0;
clearLayer();
$("#map").on('mousemove', MouseMoveHandler);
document.addEventListener('keyup', keyUpHandler, false);
$("#map").click(ClickHandler);
}
function ClickHandler(){
if(clickCount === 0){ //first point chosen - draw rectangle as the mouse moves
userRectPoint1 = getMousePos900913();
clickCount++;
}
else{ //second point chose - take both coordinates and draw a rectangle on the BeenThere layer
var point2 = getMousePos900913();
var groupPoints2 = {
topLeft : {
lon: userRectPoint1.lon,
lat: userRectPoint1.lat
},
botLeft : {
lon: userRectPoint1.lon,
lat: point2.lat
},
botRight: {
lon: point2.lon,
lat: point2.lat
},
topRight:{
lon: point2.lon,
lat: userRectPoint1.lat
},
color: "#" + $('#colorPicker')[0].jscolor.toString(),
type: "rectangle"
};
beenTheresettings.layerHistory.push(groupPoints2);
saveSettings();
DrawRectangle(groupPoints2);
EndUserRectMode();
}
}
function MouseMoveHandler(e){
clearLayer();
drawCircle(getMousePos900913());
drawRect(userRectPoint1);
}
function clearLayer() {
var layer = W.map.getLayersByName("BeenThereUserRect")[0];
layer.removeAllFeatures();
}
function drawRect(e){
if(e !== null){
var color = '#' + $('#colorPicker')[0].jscolor.toString();
var style = {
strokeColor: color, strokeOpacity: 0.8, strokeWidth: 8, fillColor: color, fillOpacity: 0.0,
label: "", labelOutlineColor: "black", labelOutlineWidth: 3, fontSize: 14,
fontColor: color, fontOpacity: 0.85, fontWeight: "bold"};
var point2 = getMousePos900913();
var pnt = [];
var convPoint = new OpenLayers.Geometry.Point(e.lon, e.lat);
pnt.push(convPoint);
convPoint = new OpenLayers.Geometry.Point(e.lon, point2.lat);
pnt.push(convPoint);
convPoint = new OpenLayers.Geometry.Point(point2.lon, point2.lat);
pnt.push(convPoint);
convPoint = new OpenLayers.Geometry.Point(point2.lon, e.lat);
pnt.push(convPoint);
convPoint = new OpenLayers.Geometry.Point(e.lon, e.lat);
pnt.push(convPoint);
var ring = new OL.Geometry.LinearRing(pnt);
var polygon = new OL.Geometry.Polygon([ring]);
var feature = new OL.Feature.Vector(polygon, attributes, style);
W.map.getLayersByName("BeenThereUserRect")[0].addFeatures([feature]);
}
}
function drawCircle(e){
var color = '#' + $('#colorPicker')[0].jscolor.toString();
pointStyle.strokeColor = color;
pointStyle.fillColor = color;
var pointFeature = new OL.Feature.Vector(new OL.Geometry.Point(e.lon, e.lat), {}, pointStyle);
W.map.getLayersByName("BeenThereUserRect")[0].addFeatures([pointFeature]);
}
function getMousePos900913(){
var mousePosition = $('.WazeControlMousePosition').text().split(" ");
return WazeWrap.Geometry.ConvertTo900913(mousePosition[0], mousePosition[1]);
}
function keyUpHandler(e){
if (e.keyCode == 27){
EndUserRectMode();
}
}
function EndUserRectMode(){
$('#map').css('cursor', 'initial');
$("#map").off('click');//, endPlacementMode);
$("#map").off('mousemove', MouseMoveHandler);
clearLayer();
document.removeEventListener('keyup', keyUpHandler);
clickCount = 0;
userRectPoint1 = null;
}
function RemoveLastBox() {
var mro_Map = Waze.map;
var mro_mapLayers = mro_Map.getLayersBy("uniqueName", "__beenThere");
var mro_mapLayers_mapLayerLength = mro_mapLayers[0].features.length;
if (mro_mapLayers_mapLayerLength > 0)
mro_mapLayers[0].features[mro_mapLayers_mapLayerLength - 1].destroy();
if(beenTheresettings.layerHistory.length > 0)
layerFuture.push(beenTheresettings.layerHistory.pop());
saveSettings();
updateTotalRectCount();
}
function RedoLastBox(){
if(layerFuture.length >0){
var rect = layerFuture.pop();
beenTheresettings.layerHistory.push(rect);
DrawRectangle(rect);
}
}
function RemoveAllBoxes() {
var mro_Map = Waze.map;
var mro_mapLayers = mro_Map.getLayersBy("uniqueName", "__beenThere");
var mro_mapLayers_mapLayerLength = mro_mapLayers[0].features.length;
if (mro_mapLayers_mapLayerLength > 0)
mro_mapLayers[0].destroyFeatures();
beenTheresettings.layerHistory = [];
layerFuture = [];
saveSettings();
updateTotalRectCount();
}
var mapLayers;
var userRectLayer;
function InitMapRaidOverlay() {
mapLayers = new OpenLayers.Layer.Vector("Been There", {
displayInLayerSwitcher: true,
uniqueName: "__beenThere"
});
userRectLayer = new OpenLayers.Layer.Vector("BeenThereUserRect", {
displayInLayerSwitcher: false,
uniqueName: "__beenThereUserRect"
});
Waze.map.addLayer(mapLayers);
mapLayers.setVisibility(true);
W.map.addLayer(userRectLayer);
var mro_Map = Waze.map;
if (mro_Map === null) return;
//append our css to the head
var g = '.beenThereButtons {font-size:30px; color:#59899e;}';
$("head").append($('<style type="text/css">' + g + '</style>'));
//add controls to the map
var c = '<div id="beenThere" style="position: absolute; top:280px; left: 6px; z-index: 1040 !important; border-radius: 5px; padding: 4px; background-color: #000000;);">';
c+= '<div><div id="NewBox" class="waze-icon-plus_neg beenThereButtons" style="display:block; float:left;" title="Draw a box around the visible area"></div>';
c+= "<button class='jscolor {valueElement:null,hash:true,closable:true}' style='float:right;width:15px; height:15px;border:2px solid black' id='colorPicker'></button></div>";
c+= '<div id="UserRect" class="fa fa-pencil-square-o fa-2x" style="display:block; float:left; margin-left:3px; color:#59899e;"></div>';
c+= '<div id="RemoveLastBox" class="waze-icon-undo beenThereButtons" style="display:block;" title="Remove last box"></div>';
c+= '<div id="Redo" class="waze-icon-redo beenThereButtons" style="display:block;" title="Redo last box"></div>';
c+= '<div id="TrashBox" class="waze-icon-trash beenThereButtons" style="display:block;" title="Remove all boxes">';
c+= '<span id="rectCount" style="float:right; top:0; right:0;font-size:12px;">0</span></div></div>';
$("#WazeMap").append(c);
//set up listeners
$("#NewBox").click(NewBox);
$('#UserRect').click(NewUserRect);
$("#RemoveLastBox").click(RemoveLastBox);
$('#Redo').click(RedoLastBox);
$("#TrashBox").click(RemoveAllBoxes);
loadSettings();
if(beenTheresettings.layerHistory.length > 0)
for(var i=0;i<beenTheresettings.layerHistory.length;i++)
DrawRectangle(beenTheresettings.layerHistory[i]);
initColorPicker();
}
function initColorPicker(tries){
tries = tries || 1;
if ($('#colorPicker')[0].jscolor) {
$('#colorPicker')[0].jscolor.fromString('#FDA400');
$('#colorPicker')[0].jscolor.closeText = 'Close';
//$('#colorPicker')[0].jscolor.onFineChange = update;
} else if (tries < 1000) {
setTimeout(function () {initColorPicker(tries++);}, 200);
}
}
function loadSettings() {
var loadedSettings = $.parseJSON(localStorage.getItem("beenThere_Settings"));
var defaultSettings = {
layerHistory: []
};
beenTheresettings = loadedSettings ? loadedSettings : defaultSettings;
for (var prop in defaultSettings) {
if (!beenTheresettings.hasOwnProperty(prop))
beenTheresettings[prop] = defaultSettings[prop];
}
}
function saveSettings() {
if (localStorage) {
var localsettings = {
layerHistory: beenTheresettings.layerHistory
};
localStorage.setItem("beenThere_Settings", JSON.stringify(localsettings));
}
}
})();