Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- //this function helps to avoid redrawing svg after map movement
- //it has to be called after 'map.getPixelFromCoordinate' gets available
- //returns scaleLonLat(lonlat) function that returns [x_px, y_px] for usage with d3
- //prevent lines thickness from getting scaled through css: .map .d3-layer path { vector-effect: non-scaling-stroke; }
- //usage example:
- //var s
- //map.once('precompose', ()=>{ s=init_ol_d3(this); draw(); })
- //var draw_route = d3.line().x((lonlat)=>{return s(lonlat)[0]}).y(...
- //TODO: postrender event is called for each tile render
- //TODO: scale function has to be called twice (for d3.line().x and for d3.line().y)
- function init_ol_d3(map) {
- d3.selectAll('#'+map.getTarget() + ' .d3-layer').remove()
- var g = d3.select('#'+map.getTarget() + ' .ol-viewport')
- .insert('div', 'canvas').classed('d3-layer', true) //div before gui for gui to work
- .style('position', 'absolute')
- .style('bottom', '0px')
- .style('left', '0px')
- .style('width', '100%')
- .style('height', '100%')
- .append('svg')
- .style('width', '100%')
- .style('height', '100%')
- .append('g')
- var init00 = map.getPixelFromCoordinate(ol.proj.fromLonLat([0, 0]))
- var init11 = map.getPixelFromCoordinate(ol.proj.fromLonLat([1, 1]))
- var initScale = [init11[0]-init00[0], init11[1]-init00[1]]
- var curr00 = init00
- var rescale = [1, 1]
- map.on('postrender', function() { //retransform
- curr00 = map.getPixelFromCoordinate(ol.proj.fromLonLat([0, 0]))
- var curr11 = map.getPixelFromCoordinate(ol.proj.fromLonLat([1, 1]))
- var currScale = [curr11[0]-curr00[0], curr11[1]-curr00[1]]
- rescale = [currScale[0]/initScale[0], currScale[1]/initScale[1]]
- var retranslate = [curr00[0]-init00[0]*rescale[0], curr00[1]-init00[1]*rescale[1]]
- g.attr("transform", //p_curr = (p_init-O_init)*rescale + O_curr
- "translate(" + retranslate[0] + "," + retranslate[1] + ")" +
- " scale(" + rescale[0] + "," + rescale[1] + ")");
- })
- scaleLonLat = function(lonlat) { //p_init = (p_curr-O_curr)/rescale + O_init
- var p = map.getPixelFromCoordinate(ol.proj.fromLonLat(lonlat))
- p[0] = (p[0] - curr00[0])/rescale[0] + init00[0]
- p[1] = (p[1] - curr00[1])/rescale[1] + init00[1]
- return p
- }
- return scaleLonLat
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement