与gmap3集成时，如何从经/纬度计算mxgraph像素坐标? [英] How do I calculate mxgraph pixel co-ordinates from lat/long when integrating with gmap3?

问题描述

mxgraph Google Maps

The mxgraph Google Maps example (and demo) shows a simple implementation that create a Google Map overlay.

但是我无法弄清楚顶点像素坐标与等效纬度/经度坐标之间的相关性.

However I cannot figure out the correlation between the vertex pixel co-ordinates and the equivalent lat/long co-ordinates.

示例的第140行显示了西雅图的一些硬编码像素坐标(23,23):

Line 140 of the example shows some hard-coded pixel co-ordinates (23,23) for Seattle:

var n1 = graph.insertVertex(parent, null, {label:'Seattle'}, 23, 23, 10, 10);

我想显示一个地理数据集(即我具有经度/纬度)，但是我无法计算出到mxGraph顶点像素坐标的转换.

I want to display a geographic data set (i.e. I have latitude/longitude) but I can not figure out the conversion to mxGraph vertex pixel co-ordinates.

Google API的" fromLatLngToDivPixel "不起作用(返回地图中心的纬度/经度为0,0)，" fromLatLngToContainerPixel "也不起作用

The Google API's "fromLatLngToDivPixel" does not work (it returns the lat/long of the centre of the map as 0,0), neither does "fromLatLngToContainerPixel".

即使是怪异的，坐标为0,0的顶点也不会出现在地图的左上角(它在地图内有点).

Even weirder, a vertex with co-ordinates of 0,0 does not appear in the top left corner of the map (it is a little inside the map).

推荐答案

所以有点复杂.

我终于创建了两个类来提供帮助:

I finally created two classes to help out:

// Represent a map pixel
class PixelPos {
    constructor(x,y) {
        this._x = x;
        this._y = y;
    }

    get x(){
        return this._x;
    }
    get y(){
        return this._y;
    }
}

// Handles converting between lat/log and pixels
// Based on the initial created map div container.
class CoordTranslator {

    constructor(graph, projection, bounds) {
        this._graph = graph;
        this._projection = projection;
        this._bounds = bounds;

        //
        var swb = this._bounds.getSouthWest();
        var neb = this._bounds.getNorthEast();

        this._neb_lat = neb.lat();
        this._swb_lng = swb.lng();

        this._map_width = neb.lng() - swb.lng();
        this._map_height = neb.lat() - swb.lat();

        // Get pixel values from the Geo boundary box
        var sw = this._projection.fromLatLngToDivPixel(swb);
        var ne = this._projection.fromLatLngToDivPixel(neb);

        //  Map pixel width and Height
        this._pix_width = (ne.x - sw.x);
        this._pix_height = (sw.y - ne.y);

        this._scale = graph.view.getScale();
    }

    // Convert the provided lat/long into a PixelPos    
    convert(lat, lng){
        var x = (lng-this._swb_lng)/this._map_width;
        x = x*this._pix_width;
        x = x/this._scale;

        var y = (this._neb_lat - lat)/this._map_height;
        y = y*this._pix_height;
        y = y/this._scale;

        // And, for some unknown reason, I have to magic a final offset!!
        return new PixelPos(x-5,y-3);
    }

}

我在mxGraphOverlay.prototype.draw中初始化CoordTranslator类:

mxGraphOverlay.prototype.draw = function()
{

   if (drawn = 0){
     drawn = 1;
     ....
     let ct = new CoordTranslator(this.graph_, overlayProjection, this.bounds_);
     ....
     // 6193351 @ 46.8127123,14.5866472 
     var pp = ct.convert(46.8127123, 14.58664720);
     var n3 = graph.insertVertex(parent, null, {label:'6193351'}, pp.x, pp.y, 10, 10);
     ....
   }
}

可能有更好的初始化和使用CoordTranslator的方法，但是这里有想法.

There are probably better ways to initialise and use the CoordTranslator, but the ideas are here.

这篇关于与gmap3集成时，如何从经/纬度计算mxgraph像素坐标?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！