Question

我有一个大型网络，其X / Y坐标类似于this，我想知道如何创建自己的版本，但要使用我的X / Y数据。

问题不一定是画线，而是能够放大和缩小以及拖动地图。 X值的范围是0到130000，Y值的范围是-37000到+20000。我还需要能够将鼠标放在一行上以获取工具提示（可能是信息窗口）。

请随时澄清，我将回复并编辑主要帖子。

节点和边线可以在这里找到：https://drive.google.com/file/d/1j7ev9vfHy-k7AoEmRGjGLheY7-vZ7nUg/view?usp=sharing

   public class Node
    {
        public long Id { get; set; }

        public double X { get; set; }

        public double Y { get; set; }
    }

  public class Edge
    {
        public Edge()
        {
            Nodes = new List<long>();
        }
        public long Id { get; set; }

        public List<long> Nodes { get; set; }
    }

谢谢。

Answer 1

根据您提供的示例和后续评论，
我建议您使用OpenLayers：https://openlayers.org/

这样，所有渲染都在浏览器中完成，而不是在地图图块中完成，但是您仍然可以利用地图图块，如果您想显示带有卫星图像的背景层，则可以轻松实现。

这里是一个示例

var geojsonObject = {
  'type': 'FeatureCollection',
  'crs': { 'type': 'name', 'properties': {'name': 'EPSG:4326'}},
  'features': [
    {
      'type': 'Feature', 'properties': {'any-property': 'feature1'},
      'geometry': {
        'type': 'Point',
        'coordinates': [21, 38]
      }
    },{
      'type': 'Feature', 'properties': {'any-property': 'feature2'},
      'geometry': {
        'type': 'LineString',
        'coordinates': [ [21, 38], [22, 39], [22, 40], [21, 38.5], [20.5, 39.5], [22.3, -40] ]
      }
    }
  ]
};

var dataLayer = new ol.layer.Vector({
    source: new ol.source.Vector({ 
        features: new ol.format.GeoJSON().readFeatures(
            geojsonObject, {featureProjection: 'EPSG:3857'}
        )
    }),
});

var map = new ol.Map({
    target: 'map',
    layers: [dataLayer, new ol.layer.Tile({source: new ol.source.BingMaps({layer: 'sat'})})],
    view: new ol.View({center: ol.proj.fromLonLat([21, 38]), zoom: 7})
});

<head>
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/ol3/3.9.0/ol.min.css">
    <style>html,body,#map { width:100%; height:100%; margin:0; }</style>

    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/ol3/3.9.0/ol.min.js"></script>
</head>

<div id="map"></div>

这是一个非常简单的带有硬编码数据的示例，但是您可以像提到的那样动态加载数据，请查看OpenLayers示例：

https://openlayers.org/en/latest/examples/

Answer 2

当您的问题归结为放大和四处移动时，我将带您到以下答案：Zoom Canvas to Mouse Cursor

它也有一个演示页面：http://phrogz.net/tmp/canvas_zoom_to_cursor.html

具有X / Y坐标的大画布

2 个答案: