与 gmap3 集成时，如何从 lat/long 计算 mxgraph 像素坐标？答案

【问题标题】：How do I calculate mxgraph pixel co-ordinates from lat/long when integrating with gmap3?与 gmap3 集成时，如何从 lat/long 计算 mxgraph 像素坐标？
【发布时间】：2018-12-27 22:41:17
【问题描述】：

mxgraph Google Maps example（和 demo）展示了一个创建 Google Map 叠加层的简单实现。

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

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

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

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

Google API 的“fromLatLngToDivPixel”不起作用（它将地图中心的纬度/经度返回为 0,0），“fromLatLngToContainerPixel”也不起作用.

更奇怪的是，坐标为 0,0 的顶点不会出现在地图的左上角（它在地图内部的一点点）。

【问题讨论】：

标签： javascript mxgraph jquery-gmap3

【解决方案1】：

所以有点复杂。

我终于创建了两个类来帮忙：

// 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，但想法就在这里。

【讨论】：