Webboard

Pełna wersja: Rysowanie punktów na mapie
Aktualnie przeglądasz uproszczoną wersję forum. Kliknij tutaj, by zobaczyć wersję z pełnym formatowaniem.
Witam,
Od dwóch dni męcze się z kodem pobranym z internetu.
Mianowicie uzywam map Opens maps i pluginów Leaflet do niej mam z jednym pluginem problem.
Chciałbym aby tablica wejściowa posiadała 4 kolumny a nie 3 jak ma miejsce to teraz.
Kod:
data = [[52.2389370,15.8215110, 2000],[52.3986540,16.9088520, 2000]];

coverageLayer.setData(data);

Kiedy próbuje dodać 4 wartość wywala mi błąd
Kod:
Uncaught Error: Bounds are not valid.
   at e.fitBounds (leaflet.js:5)

Poniżej zamieszczam kod przerobiony przezemnie

Kod:
/**
* This L.GridLayer.MaskCanvas plugin is for Leaflet 1.0
* For Leaflet 0.7.x, please use L.TileLayer.MaskCanvas
*/
L.GridLayer.MaskCanvas = L.GridLayer.extend({
 options: {
   radius: 5, // this is the default radius (specific radius values may be passed with the data)
   useAbsoluteRadius: true,  // true: radius in meters, false: radius in pixels
   opacity: 0.5,
   noMask: false,  // true results in normal (filled) circled, instead masked circles
   debug: false,
   zIndex: 18, // if it is lower, then the layer is not in front
measure_value: 0
 },

 initialize: function (options) {
   L.setOptions(this, options);
 },

 createTile: function (coords) {
   var tile = document.createElement('canvas');
   tile.width = tile.height = this.options.tileSize;

   this._draw(tile, coords);

   if (this.options.debug) {
     this._drawDebugInfo(tile, coords);
   }

   return tile;
 },

 _drawDebugInfo: function (canvas, coords) {
   var tileSize = this.options.tileSize;
   var ctx = canvas.getContext('2d');

   ctx.globalCompositeOperation = 'xor';

   ctx.fillStyle = '#fff';
   ctx.fillRect(0, 0, tileSize, tileSize);

   ctx.strokeStyle = '#000';
   ctx.strokeText('x: ' + coords.x + ', y: ' + coords.y + ', zoom: ' + coords.z, 20, 20);

   ctx.strokeStyle = '#f55';
   ctx.beginPath();
   ctx.moveTo(0, 0);
   ctx.lineTo(tileSize, 0);
   ctx.lineTo(tileSize, tileSize);
   ctx.lineTo(0, tileSize);
   ctx.closePath();
   ctx.stroke();
 },

 /**
  * Pass either pairs of (y,x) or (y,x,radius) coordinates.
  * Alternatively you can also pass LatLng objects.
  *
  * Whenever there is no specific radius, the default one is used.
  *
  * @param {[[number, number]]|[[number, number, number]]|[L.LatLng]} dataset
  */
 setData: function (dataset) {
   var self = this;
   this.bounds = new L.LatLngBounds(dataset[0], dataset[1]);

   this._quad = new QuadTree(this._boundsToQuery(this.bounds), false, 6, 6);

   var first = dataset[0];
   var yc = 0, xc = 1, rc = 2, vc = 3;
   if (first instanceof L.LatLng) {
     xc = "lng";
     yc = "lat";
   }

   this._maxRadius = 0;
   dataset.forEach(function(d) {
     var radius = d[rc] || self.options.radius;
 var measure_value = d[vc] || self.options.measure_value;
     self._quad.insert({
       x: d[xc], //lng
       y: d[yc], //lat
       r: radius,
v: measure_value
     });
     self._maxRadius = Math.max(self._maxRadius, radius);
   });

   if (this._map) {
     this.redraw();
   }
 },

 /**
  * Set default radius value.
  *
  * @param {number} radius
  */
 setRadius: function(radius) {
   this.options.radius = radius;
   this.redraw();
 },

 /**
  * Returns the biggest radius value of all data points.
  *
  * @param {number} zoom Is required for projecting.
  * @returns {number}
  * @private
  */
 _getMaxRadius: function(zoom) {
   return this._calcRadius(this._maxRadius, zoom);
 },

 /**
  * @param {L.Point} coords
  * @param {{x: number, y: number, r: number}} pointCoordinate
  * @returns {[number, number, number]}
  * @private
  */
 _tilePoint: function (coords, pointCoordinate) {
   // start coords to tile 'space'
   var s = coords.multiplyBy(this.options.tileSize);

   // actual coords to tile 'space'
   var p = this._map.project(new L.LatLng(pointCoordinate.y, pointCoordinate.x), coords.z);

   // point to draw
   var x = Math.round(p.x - s.x);
   var y = Math.round(p.y - s.y);
   var r = this._calcRadius(pointCoordinate.r || this.options.radius, coords.z);
var v = pointCoordinate.v;
   return [x, y, r, v];
 },

 _boundsToQuery: function(bounds) {
   if (bounds.getSouthWest() == undefined) { return {x: 0, y: 0, width: 0.1, height: 0.1}; }  // for empty data sets
   return {
     x: bounds.getSouthWest().lng,
     y: bounds.getSouthWest().lat,
     width: bounds.getNorthEast().lng-bounds.getSouthWest().lng,
     height: bounds.getNorthEast().lat-bounds.getSouthWest().lat
   };
 },

 /**
  * The radius of a circle can be either absolute in pixels or in meters.
  *
  * @param {number} radius Pass either custom point radius, or default radius.
  * @param {number} zoom Zoom level
  * @returns {number} Projected radius (stays the same distance in meters across zoom levels).
  * @private
  */
 _calcRadius: function (radius, zoom) {
   var projectedRadius;

   if (this.options.useAbsoluteRadius) {
     var latRadius = (radius / 40075017) * 360,
         lngRadius = latRadius / Math.cos(Math.PI / 180 * this._latLng.lat),
         latLng2 = new L.LatLng(this._latLng.lat, this._latLng.lng - lngRadius, true),
         point2 = this._latLngToLayerPoint(latLng2, zoom),
         point = this._latLngToLayerPoint(this._latLng, zoom);

     projectedRadius = Math.max(Math.round(point.x - point2.x), 1);
   } else {
     projectedRadius = radius;
   }

   return projectedRadius;
 },

 /**
  * This is used instead of this._map.latLngToLayerPoint
  * in order to use custom zoom value.
  *
  * @param {L.LatLng} latLng
  * @param {number} zoom
  * @returns {L.Point}
  * @private
  */
 _latLngToLayerPoint: function (latLng, zoom) {
   var point = this._map.project(latLng, zoom)._round();
   return point._subtract(this._map.getPixelOrigin());
 },

 /**
  * @param {HTMLCanvasElement|HTMLElement} canvas
  * @param {L.Point} coords
  * @private
  */
 _draw: function (canvas, coords) {
   if (!this._quad || !this._map) {
     return;
   }

   var tileSize = this.options.tileSize;

   var nwPoint = coords.multiplyBy(tileSize);
   var sePoint = nwPoint.add(new L.Point(tileSize, tileSize));

   if (this.options.useAbsoluteRadius) {
     var centerPoint = nwPoint.add(new L.Point(tileSize/2, tileSize/2));
     this._latLng = this._map.unproject(centerPoint, coords.z);
   }

   // padding
   var pad = new L.Point(this._getMaxRadius(coords.z), this._getMaxRadius(coords.z));
   nwPoint = nwPoint.subtract(pad);
   sePoint = sePoint.add(pad);

   var bounds = new L.LatLngBounds(this._map.unproject(sePoint, coords.z), this._map.unproject(nwPoint, coords.z));

   var pointCoordinates = this._quad.retrieveInBounds(this._boundsToQuery(bounds));

   this._drawPoints(canvas, coords, pointCoordinates);
 },

 /**
  * @param {HTMLCanvasElement} canvas
  * @param {L.Point} coords
  * @param {[{x: number, y: number, r: number}]} pointCoordinates
  * @private
  */
 _drawPoints: function (canvas, coords, pointCoordinates) {
   var ctx = canvas.getContext('2d'), tilePoint;

   ctx.globalCompositeOperation = 'source-over';
   if (!this.options.noMask && !this.options.debug) {
     ctx.fillRect(0, 0, this.options.tileSize, this.options.tileSize);
     ctx.globalCompositeOperation = 'destination-out';
   }

   for (var index in pointCoordinates) {
     if (pointCoordinates.hasOwnProperty(index)) {
       tilePoint = this._tilePoint(coords, pointCoordinates[index]);

var gradient = ctx.createRadialGradient(tilePoint[0], tilePoint[1], tilePoint[2]/6, tilePoint[0], tilePoint[1], tilePoint[2]);

alert(tilePoint[3]);

gradient.addColorStop(0, "rgba(180, 47, 37, 0.8)");
gradient.addColorStop(1, "rgba(180, 47, 37, 0)");

ctx.beginPath();
       ctx.arc(tilePoint[0], tilePoint[1], tilePoint[2], 0, 2 * Math.PI);

ctx.fillStyle = gradient;
ctx.fill();
     }
   }
 }
});

L.TileLayer.maskCanvas = function(options) {
 return new L.GridLayer.MaskCanvas(options);
};

Gdzie popełniam błąd ?