当前位置：网站首页>OpenLayers实例-Advanced View Positioning-高级视图定位

OpenLayers实例-Advanced View Positioning-高级视图定位

2022-07-23 20:04:00 【GISer小辉】

Advanced View Positioning-高级视图定位

知识要点

（主要）使用view.fit方法可以将视图以合适的比例缩放到几何图形，使用view.centerOn将视图中心点放置在指定位置。
（主要）使用【Alt+Shift+拖动】可以旋转地图。
（次要）可以通过.map .ol-attribution设置disolay:none;来隐藏右下角版权信息。

官网原文及译文

This example demonstrates how a map’s view can be adjusted so a geometry or coordinate is positioned at a specific pixel location. The map above has top, right, bottom, and left padding applied inside the viewport. The view’s fit method is used to fit a geometry in the view with the same padding. The view’s centerOn method is used to position a coordinate (Lausanne) at a specific pixel location (the center of the black box).
这个例子演示了如何调整地图的视图，使几何图形或坐标定位在特定的像素位置。上面的地图有顶部，右侧，底部，左侧填充应用在视口中。视图（View）的fit方法用于在视图中匹配具有相同填充的几何图形。视图（View）的centerOn方法用于将坐标（洛桑）定位在特定的像素位置（黑盒子的中心）。
Use Alt+Shift+Drag to rotate the map.
您可以使用【Alt+Shift+拖动】来旋转地图。
Note: This example does not shift the view center. So the zoom controls and rotating the map will still use the center of the viewport as anchor. To shift the whole view based on a padding, use the padding option on the view, as shown in the view-padding.html example.
注意:这个例子没有移动视图中心。所以缩放控制和旋转地图将仍然使用视口的中心作为锚点。要基于填充来移动整个视图，请使用视图上的填充选项，如【视图填充】（待补充链接）实例所示。

源码

<!DOCTYPE html>
<html lang="zn">

<head>
  <meta charset="UTF-8">
  <!-- 引入OpenLayers CSS样式 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/[email protected]/en/v6.13.0/css/ol.css"
    type="text/css">
  <!-- 引入OpenLayers JS库 -->
  <script src="https://cdn.jsdelivr.net/gh/openlayers/[email protected]/en/v6.13.0/build/ol.js"></script>
  <!-- css代码 -->
  <style>
    .map {
    
      width: 1000px;
      height: 600px;
    }

    .mapcontainer {
    
      position: relative;
    }

    /* 地图缩放组件样式, 可使用top left两个属性定位 */
    .map .ol-zoom {
    
      top: 178px;
      left: 158px;
    }

    /* 地图旋转组件样式, 可使用top right两个属性定位 */
    .map .ol-rotate {
    
      top: 178px;
      right: 58px;
    }

    /* 版权信息样式, 可使用display: none; 来隐藏 */
    .map .ol-attribution,
    .map .ol-attribution.ol-uncollapsible {
    
      bottom: 30px;
      right: 50px;
    }

    .padding-top {
    
      position: absolute;
      top: 0;
      left: 0px;
      width: 1000px;
      height: 170px;
      background: rgba(255, 255, 255, 0.5);
    }

    .padding-left {
    
      position: absolute;
      top: 170px;
      left: 0;
      width: 150px;
      height: 400px;
      background: rgba(255, 255, 255, 0.5);
    }

    .padding-right {
    
      position: absolute;
      top: 170px;
      left: 950px;
      width: 50px;
      height: 400px;
      background: rgba(255, 255, 255, 0.5);
    }

    .padding-bottom {
    
      position: absolute;
      top: 570px;
      left: 0px;
      width: 1000px;
      height: 30px;
      background: rgba(255, 255, 255, 0.5);
    }

    .center {
    
      position: absolute;
      border: solid 1px black;
      top: 490px;
      left: 560px;
      width: 20px;
      height: 20px;
    }

    button {
    
      font-size: 18px;
      margin: 10px 5px;
      padding: 10px;
    }
  </style>
  <title>Advanced View Positioning 高级视图定位</title>
</head>

<body>
  <!-- html代码 -->
  <div class="mapcontainer">
    <!-- 地图组件 -->
    <div id="map" class="map"></div>
    <!-- 半透明遮罩层 -->
    <div class="padding-top"></div>
    <div class="padding-left"></div>
    <div class="padding-right"></div>
    <div class="padding-bottom"></div>
    <!-- 中心黑框 -->
    <div class="center"></div>
  </div>
  <button id="zoomtoswitzerland">以最佳比例缩放到瑞士</button>
  <button id="zoomtolausanne">以最小分辨率缩放到洛桑</button><br>
  <button id="centerlausanne">将洛桑放置到中心</button>
  <!-- script代码 -->
  <script>
    // 加载geojson文件，创建资源对象
    const source = new ol.source.Vector({
    
      url: 'https://openlayers.org/en/latest/examples/data/geojson/switzerland.geojson',
      format: new ol.format.GeoJSON(),
    });
    // 创建样式对象
    const style = new ol.style.Style({
    
      // 填充样式
      fill: new ol.style.Fill({
    
        color: 'rgba(255, 255, 255, 0.6)',
      }),
      // 边框样式
      stroke: new ol.style.Stroke({
    
        color: '#319FD3',
        width: 1,
      }),
      // 图片样式，此处代表点的样式，以圆Circle呈现
      image: new ol.style.Circle({
    
        radius: 5,
        fill: new ol.style.Fill({
    
          color: 'rgba(255, 255, 255, 0.6)',
        }),
        stroke: new ol.style.Stroke({
    
          color: '#319FD3',
          width: 1,
        }),
      }),
    });
    // 创建矢量图层
    const vectorLayer = new ol.layer.Vector({
    
      source: source,
      style: style,
    });
    // 创建视图
    const view = new ol.View({
    
      center: [0, 0],
      zoom: 1,
    });
    // 地图初始化
    const map = new ol.Map({
    
      // 设置图层
      layers: [
        // OSM底图
        new ol.layer.Tile({
    
          source: new ol.source.OSM(),
        }),
        // 刚创建的矢量图层
        vectorLayer,
      ],
      // 绑定页面元素
      target: 'map',
      // 设置视图
      view: view,
    });

    // 绑定按钮点击事件
    // 以最佳比例缩放到瑞士
    const zoomtoswitzerland = document.getElementById('zoomtoswitzerland');
    zoomtoswitzerland.addEventListener(
      'click',
      function () {
    
        // 获取瑞士多边形polygon对象
        const feature = source.getFeatures()[0];
        const polygon = feature.getGeometry();
        // 最佳比例缩放到瑞士
        view.fit(polygon, {
     padding: [170, 50, 30, 150] });
      },
      false
    );

    // 以最小分辨率缩放到洛桑
    const zoomtolausanne = document.getElementById('zoomtolausanne');
    zoomtolausanne.addEventListener(
      'click',
      function () {
    
        // 获取洛桑点位point对象
        const feature = source.getFeatures()[1];
        const point = feature.getGeometry();
        // 以50分辨率缩放到洛桑
        view.fit(point, {
     padding: [170, 50, 30, 150], minResolution: 50 });
      },
      false
    );

    // 将洛桑放置到中心
    const centerlausanne = document.getElementById('centerlausanne');
    centerlausanne.addEventListener(
      'click',
      function () {
    
        // 获取洛桑点位point对象
        const feature = source.getFeatures()[1];
        const point = feature.getGeometry();
        // 获取地图尺寸
        const size = map.getSize();
        // 将洛桑点位放置到地图[570, 500]位置
        view.centerOn(point.getCoordinates(), size, [570, 500]);
      },
      false
    );
  </script>
</body>

</html>