如何在 OpenLayers 中设置初始地图区域？

Posted 2023-02-23

【中文标题】如何在 OpenLayers 中设置初始地图区域？

【英文标题】：How to set the initial map area in OpenLayers?

【发布时间】：2012-02-13 10:21:09

【问题描述】：

我正在使用 Patrick Wied 的 OpenLayers 热图图层，但仅适用于英国的位置。

如何将初始地图显示区域预设为仅显示英国？

这是我在 ASPX 页面中使用的代码

  var map, layer, heatmap;
  function init() 
    var testData = <asp:literal id="cLtMapData" runat="server" />    
    var transformedTestData =  max: testData.max, data: [] ,
        data = testData.data,
        datalen = data.length,
        nudata = [];
    // in order to use the OpenLayers Heatmap Layer we have to transform our data into
    //  max: <max>, data: [lonlat: <OpenLayers.LonLat>, count: <count>,...]
    while (datalen--) 
      nudata.push(
        lonlat: new OpenLayers.LonLat(data[datalen].lon, data[datalen].lat),
        count: data[datalen].count
      );
    
    transformedTestData.data = nudata;
    map = new OpenLayers.Map('heatmapArea');
    layer = new OpenLayers.Layer.OSM();

    // create our heatmap layer
    heatmap = new OpenLayers.Layer.Heatmap("Heatmap Layer", map, layer,  visible: true, radius: 10 ,  isBaseLayer: false, opacity: 0.3, projection: new OpenLayers.Projection("EPSG:4326") );
    map.addLayers([layer, heatmap]);
    map.zoomToMaxExtent();
    //maxExtent: new OpenLayers.Bounds(-1*b, -1*b, b, b);
    map.zoomIn();
    heatmap.setDataSet(transformedTestData);
  

它几乎与 Patrick 的演示页面一模一样，但有一个区别 - var testData =（一个 asp 文字） - 这样我就可以使用用户选择的动态数据，并通过一个存储过程从 SQL 数据库中检索英国邮政编码为经纬度。

【参考方案1】：

我会在地图初始化时这样做。像这样的：

map = new OpenLayers.Map(
        projection: new OpenLayers.Projection("EPSG:900913"),
        units: "m",
        numZoomLevels: 18,
        maxResolution: 156543.0339,
        maxExtent: new OpenLayers.Bounds(
            -20037508.34, -20037508.34, 20037508.34, 20037508.34
        ),
        layers: [
            new OpenLayers.Layer.OSM("OpenStreetMap", null, 
                transitionEffect: 'resize'
            )
        ],
        center: new OpenLayers.LonLat(-10309900, 4215100),
        zoom: 4
    );

【讨论】：

这看起来很有用，我只是想知道这行代码“center: new OpenLayers.LonLat(-10309900, 4215100)”——以及 LonLat 单位是什么？它们是“正常”的 long/lat x 10^6 吗？

我一定是做错了什么...如果我试试这个，" var lat = 52; var lon = -1; var zoom = 3; map.setCenter(new OpenLayers.LonLat(lon,纬度），缩放）；”它确实放大了，但地图的中心是西非，而不是英国

LonLat 在地图的投影中。因此，在这种情况下，使用米的 Web Mercator。您需要获取您所在地区的网络墨卡托坐标（和中心）或进行投影。

成功！ // 在纬度和经度值中设置视图中心， // 这些值必须从一个坐标系转换到另一个坐标系 // wiki.openstreetmap.org/wiki/OpenLayers_Simple_Example var fromProjection = new OpenLayers.Projection("EPSG:4326"); // 从 WGS 1984 转换 var toProjection = new OpenLayers.Projection("EPSG:900913"); // 到 Spherical Mercator Projection // 将地图中心设置在英国的中间 var lat = 55.5; var lon = -2.80；变量缩放 = 5; map.setCenter(new OpenLayers.LonLat(lon,lat).transform(fromProjection,toProjection), zoom);

太棒了！请接受答案，以便将其从“未回答”类别中删除。

【参考方案2】：

    var lat = -3.841867446899414;
        var lon = 43.466002139041116;
        var zoom = 0;


        var fromProjection = new OpenLayers.Projection("EPSG:28992");   // EPSG:4326Transform from WGS 1984
        var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
        var position = new OpenLayers.LonLat(lon, lat).transform(fromProjection, toProjection);



        var options = 

            controls: [
        new OpenLayers.Control.Navigation(),
        new OpenLayers.Control.MousePosition(),

        new OpenLayers.Control.PanZoomBar(),
        new OpenLayers.Control.Permalink()

      ]
        ;

        map = new OpenLayers.Map("basicMap", options);
        var mapnik = new OpenLayers.Layer.OSM();
        map.addLayer(mapnik);          
       map.setCenter(position, zoom);