在Cytoscape中集成地图

Question

我目前正在使用Cytoscape JS来可视化网络，但我想将图形叠加在世界地图上并将节点绘制到特定位置。东京铁路演示与我想象的类似，但背景是黑色的。我希望我的地图看起来像谷歌地图，并具有类似的放大和缩小功能。如果有一种方法可以在Cytoscape图中集成谷歌地图，那就太棒了。

Answer 1

Cytoscape.js在Google Maps上，这是基于示例overlay-simple的演示代码。当前状态是粗糙的，但可以。

尝试全屏运行以下代码。要放大/缩小，请使用press_Ctrl + scroll_wheel。

测试该代码的最佳平台是jsfiddle.net，通过分叉原始代码并用此处提供的代码替换部分。

/*  
Status: google_APIkey is good for development only

*/
// This example creates a custom overlay called CyOverlay, containing
// a U.S. Geological Survey (USGS) image of the relevant area on the map.

// Set the custom overlay object's prototype to a new instance
// of OverlayView. In effect, this will subclass the overlay class therefore
// it's simpler to load the API synchronously, using
// google.maps.event.addDomListener().
// Note that we set the prototype to an instance, rather than the
// parent class itself, because we do not wish to modify the parent class.


// some data here
var cyto_divid = 'cy'; //outside, below gmaps
var goverlay_id = 'cy4'; //overlay on gmaps
var timeoutsec = 500; //millisec
var cy;

var base_dc = 0.03; //TODO: derive a formula
var lon_ext = 25;  //extent in lng
var lonmin = 90.0; //90
var latmin = 0; //0
var lon_cor = lon_ext*base_dc;
var lat_ext = lon_ext; //extent in lat
var lonmax = lonmin + lon_ext;
var lonmid = (lonmin+lonmax)/2;
var lonmax2 = lonmax + lon_cor;
var latmax = latmin + lat_ext;
var latmid = (latmin+latmax)/2;

var latlng = { lat: latmin, lng: lonmin};
var latlng2 = { lat: latmax, lng: lonmax2};
var clatlng = { lat: latmid, lng: lonmid};
var cbottom = { lat: latmin, lng: lonmid};

function lnglat2xy(lon, lat) {
  let w = 500;
  let h = 500;
  let L = lonmax2-lonmin;
  let B = latmax-latmin;
  let y = (B-(lat-latmin))*h/B;
  let x = (lon-lonmin)*w/L;
  return {x: x, y: y};
}

var bkk = lnglat2xy(100.494, 13.75);
var bda = lnglat2xy(95.502586, 5.412598);
var hoc = lnglat2xy(106.729, 10.747);
var han = lnglat2xy(105.90673, 21.03176);
var chi = lnglat2xy(99.837, 19.899);
var nay = lnglat2xy(96.116, 19.748);


var overlay;
CyOverlay.prototype = new google.maps.OverlayView();

// Initialize the map and the custom overlay.
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,  //11,
    center: {
      lat: (latmax+latmin)/2,  //62.323907,
      lng: (lonmax2+lonmin)/2   //-150.109291
    },
    mapTypeId: 'roadmap'  //
  });

  map.addListener('zoom_changed', function() {
    setTimeout(function delay() {
      cy.fit(cy.$('#LL, #UR'));
    }, timeoutsec)
  });

  var bounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(latmin, lonmin), //62.281819, -150.287132)
    new google.maps.LatLng(latmax, lonmax2)); //62.400471, -150.005608))

  // The photograph is courtesy of the U.S. Geological Survey.
  var srcImage;
  /*srcImage = 'https://developers.google.com/maps/documentation/' +
    'javascript/examples/full/images/talkeetna.png';*/

  // The custom CyOverlay object contains the USGS image,
  // the bounds of the image, and a reference to the map.
  overlay = new CyOverlay(bounds, srcImage, map);

  // init cytoscape
  setTimeout(function delay() {
    cyto_run();
  }, timeoutsec)

}

/** @constructor */
function CyOverlay(bounds, image, map) {

  // Initialize all properties.
  this.bounds_ = bounds;
  this.image_ = image;
  this.map_ = map;

  // Define a property to hold the image's div. We'll
  // actually create this div upon receipt of the onAdd()
  // method so we'll leave it null for now.
  this.div_ = null;

  // Explicitly call setMap on this overlay.
  this.setMap(map);
}

/**
 * onAdd is called when the map's panes are ready and the overlay has been
 * added to the map.
 */
CyOverlay.prototype.onAdd = function() {

  var div = document.createElement('div');
  div.id = goverlay_id;
  div.style.borderStyle = 'dashed';
  //div.style.backgroundColor = rgba(76,76,76,0.25);
  div.style.opacity = 0.8;
  div.style.borderWidth = '1px';
  div.style.borderColor = 'gray';
  div.style.position = 'absolute';


  // Create the img element and attach it to the div.

  var img = document.createElement('img');
  img.src = this.image_;
  img.style.width = '100%';
  img.style.height = '100%';
  img.style.position = 'absolute';
  
  //div.appendChild(img); //ignore overlay img

  this.div_ = div;

  // Add the element to the "overlayLayer" pane.
  var panes = this.getPanes();
  panes.overlayLayer.appendChild(div);
};

CyOverlay.prototype.draw = function() {
  // We use the south-west and north-east
  // coordinates of the overlay to peg it to the correct position and size.
  // To do this, we need to retrieve the projection from the overlay.
  var overlayProjection = this.getProjection();

  // Retrieve the south-west and north-east coordinates of this overlay
  // in LatLngs and convert them to pixel coordinates.
  // We'll use these coordinates to resize the div.
  var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
  var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());

  // Resize the image's div to fit the indicated dimensions.
  var div = this.div_;
  div.style.left = sw.x + 'px';
  div.style.top = ne.y + 'px';
  div.style.width = (ne.x - sw.x) + 'px';
  div.style.height = (sw.y - ne.y) + 'px';

  /*
  cytoscape needs regen here
  */
  setTimeout(function delay() {
    cy.fit(cy.$('#LL, #UR'));
  }, timeoutsec)

};

// The onRemove() method will be called automatically from the API if
// we ever set the overlay's map property to 'null'.
CyOverlay.prototype.onRemove = function() {
  this.div_.parentNode.removeChild(this.div_);
  this.div_ = null;
};

google.maps.event.addDomListener(window, 'load', initMap);



/* ___________cytoscape.js code____________  */

function cyto_run() {

  cy = cytoscape({
  container: document.getElementById(goverlay_id),

  elements: {
    nodes: [
      {data: {id: "LL", nname: "LowerLeft"}, 
       classes: "controlpoint",
       position: {x: 0, y: 500}},
      {data: {id: "UL", nname: "UpperLeft"}, 
       classes: "controlpoint",
       position: {x: 0, y: 0}},
      {data: {id: "UR", nname: "UpperRight"}, 
       classes: "controlpoint",
       position: {x: 500, y: 0}},
      {data: {id: "LR", nname: "LowerRight"}, 
       classes: "controlpoint",
       position: {x: 500, y: 500}},

      {data: {id: "bkk", name: "Bangkok"}, classes: "datapoint", position: {x: bkk.x, y: bkk.y}},
      {data: {id: "bda", name: "Banda"}, classes: "datapoint", position: {x: bda.x, y: bda.y}},
      {data: {id: "hoc", name: "Hochi"}, classes: "datapoint", position: {x: hoc.x, y: hoc.y}},
      {data: {id: "han", name: "Hanoi"}, classes: "datapoint", position: {x: han.x, y: han.y}},
      {data: {id: "nay", name: "Nay"}, classes: "datapoint", position: {x: nay.x, y: nay.y}},
  
    ],

    edges: [
      {data: {source: "nay", target: "bda", label: "NAB"}, 
        classes: 'autorotate'},
      {data: {source: "nay", target: "han", label: "NAH"},
        classes: 'autorotate'},
      {data: {source: "bda", target: "bkk", label: "dgfh"}},
      {data: {source: "hoc", target: "bkk", label: "tert"}},
      {data: {source: "hoc", target: "bda", label: "HOB"},
        classes: 'autorotate'},
      {data: {source: "hoc", target: "han", label: "HOH"},
        classes: 'autorotate'},
      {data: {source: "han", target: "bkk", label: "terf"}},
      {data: {id: "LLUR" , source: "LL", target: "UR"},
        classes: "controlline"},
      {data: {id: "ULLR" , source: "UL", target: "LR"},
        classes: "controlline"},
    ]
  },

  style: [
    {
      selector: "node.datapoint",
      style: {
        shape: "circle",
        width: '12px',
        height: '12px',
        "background-color": "blue",
        label: "data(name)",
        opacity: 0.85,
        "text-background-color": "yellow"
      }
    },
    {
      selector: "node.controlpoint",
      style: {
        shape: "circle",
        width: '1px',
        height: '1px',
        "background-color": "blue",
        label: "data(id)",
        opacity: 0.85,
      }
    },
    {
      selector: "edge[label]",
      style: {
        label: "data(label)",
        width: 2,
        "line-color": "#909",
        "target-arrow-color": "#f00",
        "curve-style": "bezier",
        "target-arrow-shape": "vee",
        //"target-arrow-fill": "red",
        "arrow-scale": 1.0,
      }
    },
    {
      "selector": ".autorotate",
      "style": {
        "edge-text-rotation": "autorotate"
      }
    },
    {
      "selector": ".controlline",
      "style": {
        width: "2px",
        "line-color": "green",
        opacity: 0.35
      }
    },
    {
      selector: ".highlight",
      css: {
        "background-color": "yellow"
      }
    }
  ],

  layout: {
    name: "preset"
  }
  
});
  
}

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 90%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#cy {
  width: 600px;
  height: 600px;
  position: absolute;
}

#cy4 {
  width: 600px;
  height: 600px;
  position: absolute;
}

<b>Cytoscape on Google Maps</b>
<div id="map"></div>
<div id="cy"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.9.2/cytoscape.min.js"></script>

Answer 2

有一个插件cytoscape-mapbox-gl，可集成Cytoscape.js和Mapbox GL JS。它可以与任何栅格或矢量底图图层一起使用。

我是作者。

Answer 3

如果您查看cytoscape documentation，可以找到ui canvas扩展。多数民众赞成你所需要的。它实际上只是一个简单的谷歌搜索，然后是网站本身。我建议你通过文档来解决大多数问题。