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

发布于 2025-01-04 19:40:36 字数 1422 浏览 1 评论 0原文

我正在使用 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 检索的动态数据数据库通过存储过程将英国邮政编码转换为纬度和经度。

I'm using Patrick Wied's OpenLayers Heatmap layer, but only for locations in the UK.

How can I preset the initial map display area to show just the UK?

Here's the code I've used in an ASPX page

  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);
  }

It's almost exactly like Patrick's demo pages, but with one difference - var testData = (an asp literal) - so that I can use dynamic data selected bu the user, and retrieved from an SQL Database via a stored procedure that translates UK postcodes into latitude and longitude.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

醉城メ夜风 2025-01-11 19:40:36

我会在地图初始化中执行此操作。像这样的东西:

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
    });

I would do it in the map initialization. Something like this:

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
    });
妄想挽回 2025-01-11 19:40:36
    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);
    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);
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文