Question

我正在弄乱我在这里找到的代码：rotate polygon around point in leaflet map。基本上，它可以满足我的要求（将多边形从openweathermap获得的风向绕固定点旋转）。但仅当我单击该滑块时：

我的整个调整后的代码在这里：

 var max_val_bounds =  L.latLngBounds( L.latLng(-90, 180), L.latLng(90, -180));
// initialize map
var map = L.map( 'map', {
  center: [50, 10],
  maxZoom: 18,
  minZoom: 2,
  maxBounds: max_val_bounds,
  zoom:5
})

var layer = L.esri.basemapLayer('Topographic').addTo(map);
var layerLabels;
// set up map type
function setBasemap(basemap)
{
  if (layer){ map.removeLayer(layer); }
  layer = L.esri.basemapLayer(basemap);
  map.addLayer(layer);
  if (layerLabels){ map.removeLayer(layerLabels);   }
  if (basemap === 'ShadedRelief' || basemap === 'Oceans' || 
      basemap === 'Gray' || basemap === 'DarkGray' || 
      basemap === 'Imagery' || basemap === 'Terrain')
  {
    layerLabels = L.esri.basemapLayer(basemap + 'Labels');
    map.addLayer(layerLabels);
  }
}

var basemaps = document.getElementById('basemaps');
basemaps.addEventListener('change', function()
                          {
  setBasemap(basemaps.value);
});

// INTERESTING PART
// setting up latitude, longitude
var decimal_lat = 50,
        decimal_lon = 10;

var winddirection = 270; //Getting the value from openweathermap; Its static for this example

// creating polygon for this place
var polygon = L.polygon( [ 
        [parseFloat(decimal_lat),           parseFloat(decimal_lon)], 
        [parseFloat(decimal_lat) + 1, parseFloat(decimal_lon) - 1],                     [parseFloat(decimal_lat) + 1, parseFloat(decimal_lon) + 1] ],       
    {
                color:'green'
        });
polygon.addTo(map);

// creating marker for this place
var newMarker = L.marker([decimal_lat, decimal_lon]);
newMarker.addTo( map );

// This is what I do not want
// slider to move polygon
var range_yaw = document.createElement("input");
range_yaw.setAttribute("type", "range");
range_yaw.min = "0";
range_yaw.max = "819";
range_yaw.step = "2.275";
range_yaw.defaultValue = 90;
// End of what I do not want

// creating polyline for this place
var SIN = Math.sin((winddirection/(819/360) - 90)*(Math.PI/180));
var COS = Math.cos((winddirection/(819/360) - 90)*(Math.PI/180));
var pointA = new L.LatLng(parseFloat(decimal_lat),                  
                                                    parseFloat(decimal_lon));
var pointB = new L.LatLng(parseFloat(decimal_lat) + 2*COS,                                                                          parseFloat(decimal_lon) + 2*SIN);
var pointList = [pointA, pointB];
//Actually I dont want a line but removing it messes up other things
var polyline = new L.Polyline(pointList, {
  color: 'red',
  weight: 3,
  opacity: 0.00,
  smoothFactor: 1
});
polyline.addTo(map);

document.body.appendChild( range_yaw );

// The polygon needs to be rotated without this .onchange handler. It should rotate when the page/script loads
 //changing polyline with slider but I want to change polygon there
range_yaw.onchange = function() {
  var yawAngle = (parseFloat(winddirection) / (819 / 360) + 90)
  // line
  var center = [decimal_lat, decimal_lon]
  var end = [decimal_lat + 2, decimal_lon + 2]
  var pointListRotated = rotatePoints(center, [center, end], yawAngle)
  polyline.setLatLngs(pointListRotated);
  // polygon
  var polygonPoints = [
    center,
    [center[0] + 1, center[1] - 1],
    [center[0] + 1, center[1] + 1]
  ]
  polygonRotated = rotatePoints(center, polygonPoints, yawAngle)
  polygon.setLatLngs(polygonRotated)
};

//
// rotate a list of points in [lat, lng] format about the center.
//
function rotatePoints(center, points, yaw) {
  var res = []
  var angle = yaw * (Math.PI / 180) // not really sure what this is
  for(var i=0; i<points.length; i++) {
    var p = points[i]
    // translate to center
    var p2 = [ p[0]-center[0], p[1]-center[1] ]
    // rotate using matrix rotation
    var p3 = [ Math.cos(angle)*p2[0] - Math.sin(angle)*p2[1], Math.sin(angle)*p2[0] + Math.cos(angle)*p2[1]]
    // translate back to center
    var p4 = [ p3[0]+center[0], p3[1]+center[1]]
    // done with that point
    res.push(p4)
  }
  return res
}

我需要帮助的部分是：range_yaw.onchange

range_yaw.onchange = function() {
  var yawAngle = (parseFloat(winddirection) / (819 / 360) + 90)
  // line
  var center = [decimal_lat, decimal_lon]
  var end = [decimal_lat + 2, decimal_lon + 2]
  var pointListRotated = rotatePoints(center, [center, end], yawAngle)
  polyline.setLatLngs(pointListRotated);
  // polygon
  var polygonPoints = [
    center,
    [center[0] + 1, center[1] - 1],
    [center[0] + 1, center[1] + 1]
  ]
  polygonRotated = rotatePoints(center, polygonPoints, yawAngle)
  polygon.setLatLngs(polygonRotated)
};

如何在不单击滑块的情况下使多边形旋转？我希望多边形在脚本加载后立即显示在风角中。

Answer 1

您可以删除onchange事件处理程序：

//range_yaw.onchange = function() {
  var yawAngle = (parseFloat(winddirection) / (819 / 360) + 90)
  // line
  var center = [decimal_lat, decimal_lon]
  var end = [decimal_lat + 2, decimal_lon + 2]
  var pointListRotated = rotatePoints(center, [center, end], yawAngle)
  polyline.setLatLngs(pointListRotated);
  // polygon
  var polygonPoints = [
    center,
    [center[0] + 1, center[1] - 1],
    [center[0] + 1, center[1] + 1]
  ]
  polygonRotated = rotatePoints(center, polygonPoints, yawAngle)
  polygon.setLatLngs(polygonRotated)
//};

Updated JSFiddle is here.

如何从JavaScript中的函数中删除.onchange处理程序

1 个答案: