天天看点
返回

Openlayers示例3 | Advanced View Positioning

这个例子演示了如何调整地图的视图，使几何图形或坐标定位在特定的像素位置。上面的地图有顶，右，底，左填充应用在视口中。视图的fit方法用于在视图中匹配具有相同填充的几何图形。视图的centerOn方法用于将坐标(洛桑)定位在特定的像素位置(黑盒子的中心)。

​​Advanced View Positioning​​

这个例子演示了如何调整地图的视图，使几何图形或坐标定位在特定的像素位置。上面的地图有顶，右，底，左填充应用在视口中。视图的fit方法用于在视图中匹配具有相同填充的几何图形。视图的centerOn方法用于将坐标(洛桑)定位在特定的像素位置(黑盒子的中心)。

使用Alt+Shift+拖动旋转地图。

注意:这个例子没有移动视图中心。所以缩放控制和旋转地图将仍然使用视口的中心作为锚点。要基于填充来移动整个视图，请使用视图上的填充选项。

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

<head>
  <meta charset="UTF-8">
  <!-- 引入OpenLayers CSS样式 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.13.0/css/ol.css"
    type="text/css">
  <!-- 引入OpenLayers JS库 -->
  <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/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>

如果你有疑问，为什么可以定位到瑞士，以及那个城市的点，可以试试访问html代码里的url：

​​​https://openlayers.org/en/latest/examples/data/geojson/switzerland.geojson​​

应该就能理解了~

缩放 json html
上一篇: opencv绘制形状与文字
下一篇: python3从零学习-5.4.8、fnmatch — Unix文件名模式匹配

继续阅读