Compare commits
6 Commits
carto
...
refactorve
Author | SHA1 | Date | |
---|---|---|---|
|
64f6422a23 | ||
|
d5ea49e047 | ||
|
9e8f8e47f5 | ||
|
68cb13d016 | ||
|
e67aed7c7f | ||
|
8202e7a03b |
2
dist/leaflet.css
vendored
2
dist/leaflet.css
vendored
@ -9,7 +9,7 @@
|
||||
.leaflet-shadow-pane,
|
||||
.leaflet-marker-pane,
|
||||
.leaflet-popup-pane,
|
||||
.leaflet-overlay-pane svg,
|
||||
.leaflet-vector-root,
|
||||
.leaflet-zoom-box,
|
||||
.leaflet-image-layer,
|
||||
.leaflet-layer { /* TODO optimize classes */
|
||||
|
109
src/layer/vector2/TODO.md
Normal file
109
src/layer/vector2/TODO.md
Normal file
@ -0,0 +1,109 @@
|
||||
#### DONE - Viewport (SVG)
|
||||
|
||||
* calculating viewPort
|
||||
* setting up/updating root
|
||||
* creating elements
|
||||
* zoom animation
|
||||
|
||||
#### DONE - Viewport.VML mixin
|
||||
#### DONE - Viewport.Canvas extends Viewport
|
||||
|
||||
#### Map.Viewport mixin
|
||||
|
||||
* managing viewports
|
||||
|
||||
---
|
||||
|
||||
#### Path
|
||||
|
||||
* default style options
|
||||
* update clip on moveend
|
||||
|
||||
#### Polyline extends Path
|
||||
|
||||
* project latlngs
|
||||
* clip and simplify polyline points
|
||||
|
||||
#### Polygon extends Polyline
|
||||
|
||||
* clip and simplify polygon points
|
||||
|
||||
#### Circle extends Path
|
||||
|
||||
* project circle latlng / radius
|
||||
|
||||
#### CircleMarker extends Path
|
||||
|
||||
---
|
||||
|
||||
#### Clip (SVG)
|
||||
|
||||
* set/update svg styles
|
||||
* set up svg events
|
||||
* create/update svg path
|
||||
|
||||
#### Clip.VML mixin
|
||||
|
||||
* set/update vml styles
|
||||
* set up vml events
|
||||
* create/update vml path
|
||||
|
||||
#### Clip.Polyline extends Clip
|
||||
|
||||
* generate polyline path string from points
|
||||
|
||||
#### Clip.Polygon extends Clip
|
||||
|
||||
* generate polyline path string from points
|
||||
|
||||
#### Clip.Circle extends Clip
|
||||
* generate circle path string from circle/radius
|
||||
|
||||
---
|
||||
|
||||
#### Clip.Canvas
|
||||
|
||||
* set/update fill/stroke style
|
||||
* draw path from points
|
||||
* set up click event (depends on path containsPoint)
|
||||
|
||||
#### Clip.Canvas.Polyline extends Clip.Canvas
|
||||
|
||||
* containsPoint
|
||||
|
||||
#### Clip.Canvas.Polygon extends Clip.Canvas
|
||||
|
||||
* containsPoint
|
||||
|
||||
#### Clip.Canvas.Circle extends Clip.Canvas
|
||||
|
||||
* containsPoint
|
||||
* draw arc from point/radius
|
||||
|
||||
---
|
||||
|
||||
```
|
||||
vector
|
||||
polyline
|
||||
Polyline.js
|
||||
Clip.Polyline.js
|
||||
Clip.Canvas.Polyline.js
|
||||
polygon
|
||||
Polygon.js
|
||||
Rectangle.js
|
||||
Clip.Polygon.js
|
||||
Clip.Canvas.Polygon.js
|
||||
circle
|
||||
Circle.js
|
||||
CircleMarker.js
|
||||
Clip.Circle.js
|
||||
Clip.Canvas.Circle.js
|
||||
Path.js
|
||||
Clip.js
|
||||
Clip.VML.js
|
||||
Clip.Canvas.js
|
||||
Viewport.js
|
||||
Viewport.VML.js
|
||||
Viewport.Canvas.js
|
||||
Map.Viewport.js
|
||||
```
|
31
src/layer/vector2/Viewport.Canvas.js
Normal file
31
src/layer/vector2/Viewport.Canvas.js
Normal file
@ -0,0 +1,31 @@
|
||||
|
||||
L.Browser.canvas = (function () {
|
||||
return !!document.createElement('canvas').getContext;
|
||||
}());
|
||||
|
||||
L.Viewport.Canvas = L.Viewport.extend({
|
||||
|
||||
initRoot: function () {
|
||||
this._root = document.createElement("canvas"),
|
||||
|
||||
var ctx = this._ctx = root.getContext('2d');
|
||||
ctx.lineCap = ctx.lineJoin = "round";
|
||||
},
|
||||
|
||||
update: function () {
|
||||
if (this._zooming) { return; }
|
||||
|
||||
this.updateBounds();
|
||||
|
||||
var bounds = this._bounds,
|
||||
min = bounds.min,
|
||||
size = bounds.max.subtract(min),
|
||||
root = this._root;
|
||||
|
||||
L.DomUtil.setPosition(root, min);
|
||||
|
||||
root.width = size.x;
|
||||
root.height = size.y;
|
||||
root.getContext('2d').translate(-min.x, -min.y);
|
||||
}
|
||||
})
|
42
src/layer/vector2/Viewport.VML.js
Normal file
42
src/layer/vector2/Viewport.VML.js
Normal file
@ -0,0 +1,42 @@
|
||||
|
||||
L.Browser.vml = !L.Browser.svg && (function () {
|
||||
try {
|
||||
var div = document.createElement('div');
|
||||
div.innerHTML = '<v:shape adj="1"/>';
|
||||
|
||||
var shape = div.firstChild;
|
||||
shape.style.behavior = 'url(#default#VML)';
|
||||
|
||||
return shape && (typeof shape.adj === 'object');
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
}());
|
||||
|
||||
L.Viewport.include(L.Browser.svg || !L.Browser.vml ? {} : {
|
||||
|
||||
initialize: function (map) {
|
||||
this._map = map;
|
||||
|
||||
var root = this._root = document.createElement('div');
|
||||
root.className = 'leaflet-vml-container';
|
||||
|
||||
map._panes.overlayPane.appendChild(root);
|
||||
|
||||
map.on('moveend', this.updateBounds);
|
||||
this.updateBounds();
|
||||
},
|
||||
|
||||
createElement: (function () {
|
||||
try {
|
||||
document.namespaces.add('lvml', 'urn:schemas-microsoft-com:vml');
|
||||
return function (name) {
|
||||
return document.createElement('<lvml:' + name + ' class="lvml">');
|
||||
};
|
||||
} catch (e) {
|
||||
return function (name) {
|
||||
return document.createElement('<' + name + ' xmlns="urn:schemas-microsoft.com:vml" class="lvml">');
|
||||
};
|
||||
}
|
||||
}())
|
||||
});
|
102
src/layer/vector2/Viewport.js
Normal file
102
src/layer/vector2/Viewport.js
Normal file
@ -0,0 +1,102 @@
|
||||
|
||||
L.Viewport = L.Class.extend({
|
||||
|
||||
statics: {
|
||||
SVG_NS: 'http://www.w3.org/2000/svg'
|
||||
},
|
||||
|
||||
options: {
|
||||
padding: L.Browser.mobile ? Math.max(0, Math.min(0.5,
|
||||
(1280 / Math.max(window.innerWidth, window.innerHeight) - 1) / 2)) : 0.5,
|
||||
},
|
||||
|
||||
initialize: function (map) {
|
||||
this._map = map;
|
||||
this._pane = map._panes.overlayPane,
|
||||
|
||||
this.initRoot();
|
||||
|
||||
var root = this._root,
|
||||
className = 'leaflet-vector-root leaflet-zoom-';
|
||||
|
||||
this._pane.appendChild(root);
|
||||
|
||||
if (map.options.zoomAnimation && L.Browser.any3d) {
|
||||
map.on({
|
||||
'zoomanim': this._animateZoom,
|
||||
'zoomend': this._endAnimate
|
||||
}, this);
|
||||
root.setAttribute('class', className + 'animated');
|
||||
|
||||
} else {
|
||||
root.setAttribute('class', className + 'hide');
|
||||
}
|
||||
|
||||
map.on('moveend', this.update, this);
|
||||
this.update();
|
||||
},
|
||||
|
||||
initRoot: function () {
|
||||
this._root = this.createElement('svg');
|
||||
},
|
||||
|
||||
updateBounds: function () {
|
||||
var p = this.options.padding,
|
||||
size = this._map.getSize(),
|
||||
viewPos = L.DomUtil.getPosition(this._map._mapPane).multiplyBy(-1),
|
||||
|
||||
min = viewPos._subtract(size.multiplyBy(p))._round(),
|
||||
max = min.add(size.multiplyBy(1 + p * 2))._round();
|
||||
|
||||
this._bounds = new L.Bounds(min, max);
|
||||
},
|
||||
|
||||
update: function () {
|
||||
if (this._zooming) { return; }
|
||||
|
||||
this.updateBounds();
|
||||
|
||||
var bounds = this._bounds,
|
||||
min = bounds.min,
|
||||
max = bounds.max,
|
||||
width = max.x - min.x,
|
||||
height = max.y - min.y,
|
||||
root = this._root;
|
||||
|
||||
if (L.Browser.mobileWebkit) {
|
||||
// hack to make flicker on drag end on mobile webkit less irritating
|
||||
this._pane.removeChild(root);
|
||||
}
|
||||
|
||||
L.DomUtil.setPosition(root, min);
|
||||
|
||||
root.setAttribute('width', width);
|
||||
root.setAttribute('height', height);
|
||||
root.setAttribute('viewBox', [min.x, min.y, width, height].join(' '));
|
||||
|
||||
if (L.Browser.mobileWebkit) {
|
||||
this._pane.appendChild(root);
|
||||
}
|
||||
},
|
||||
|
||||
createElement: function (name) {
|
||||
return document.createElementNS(L.Viewport.SVG_NS, name);
|
||||
},
|
||||
|
||||
_animateZoom: function (options) {
|
||||
var scale = this._map.getZoomScale(options.zoom),
|
||||
offset = this._map._getCenterOffset(options.center),
|
||||
translate = offset.multiplyBy(-scale)._add(this._bounds.min);
|
||||
|
||||
this._root.style[L.DomUtil.TRANSFORM] =
|
||||
L.DomUtil.getTranslateString(translate) + ' scale(' + scale + ') ';
|
||||
|
||||
this._zooming = true;
|
||||
},
|
||||
|
||||
_endAnimate: function () {
|
||||
this._zooming = false;
|
||||
}
|
||||
});
|
||||
|
||||
L.Browser.svg = !!(document.createElementNS && document.createElementNS(L.Viewport.SVG_NS, 'svg').createSVGRect);
|
Loading…
Reference in New Issue
Block a user