二章-10-高级视图定位

作者: 彩云飘过 | 来源:发表于2020-04-20 17:50 被阅读0次

二章-10-高级视图定位
7-高级视图定位
10-视图-内置错误视图
SpringMVC-视图定位
IOS开发滚动视图高级功能
mysql高级:视图、事务、索引
ScrollView
Django高级（五）：视图高级
WWDC2015 高级调试技巧笔记
iOS界面动画教程之自动布局(Study)

本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers 5.3.x api。

源码见 1010.html ，对应的官网示例

OL调用图

效果图

<!DOCTYPE html>
<html>

<head>
  <title>高级视图定位
  </title>
  <link rel="stylesheet" href="../include/ol.css" type="text/css">
  <script src="../include/ol.js"></script>

</head>
<style>
  .mapcontainer {
    position: relative;
    margin-bottom: 20px;
  }

  .map {
    width: 1000px;
    height: 600px;
  }

  div.ol-zoom {
    top: 178px;
    left: 158px;
  }

  div.ol-rotate {
    top: 178px;
    right: 58px;
  }

  .map div.ol-attribution {
    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;
  }
</style>

<body>

  <button id="zoomtoswitzerlandbest">缩放到瑞士</button> (匹配高度),<br />
  <button id="zoomtoswitzerlandconstrained">缩放到瑞士</button> (匹配最合适的分辨率).<br />
  <button id="zoomtoswitzerlandnearest">缩放到瑞士</button> (匹配宽度),<br />
  <button id="zoomtolausanne">缩放到洛桑</button> (使用minResolution参数),<br />
  <button id="centerlausanne">中心定位到洛桑</button>
  <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>

  <script>

    var source = new ol.source.Vector({
      url: '../data/switzerland.geojson',
      format: new ol.format.GeoJSON()
    });
    var 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
      }),
      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
        })
      })
    });

    var vectorLayer = new ol.layer.Vector({
      source: source,
      style: style
    });

    var view = new ol.View({
      center: [0, 0],
      zoom: 1
    });

    var map = new ol.Map({
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        }),
        vectorLayer
      ],
      target: 'map',
      view: view
    });



    var zoomtoswitzerlandbest = document.getElementById('zoomtoswitzerlandbest');
    zoomtoswitzerlandbest.addEventListener('click', function () {
      var feature = source.getFeatures()[0];
      var polygon = feature.getGeometry();
      view.fit(polygon, { padding: [170, 50, 30, 150], constrainResolution: false });
      console.log(map.getView().getZoom())
    }, false);

    var zoomtoswitzerlandconstrained =
      document.getElementById('zoomtoswitzerlandconstrained');
    zoomtoswitzerlandconstrained.addEventListener('click', function () {
      var feature = source.getFeatures()[0];
      var polygon = feature.getGeometry();
      view.fit(polygon, { padding: [170, 50, 30, 150] });
      console.log(map.getView().getZoom())
    }, false);

    var zoomtoswitzerlandnearest =
      document.getElementById('zoomtoswitzerlandnearest');
    zoomtoswitzerlandnearest.addEventListener('click', function () {
      var feature = source.getFeatures()[0];
      var polygon = feature.getGeometry();
      view.fit(polygon, { padding: [170, 50, 30, 150], nearest: true });
      console.log(map.getView().getZoom())
    }, false);

    var zoomtolausanne = document.getElementById('zoomtolausanne');
    zoomtolausanne.addEventListener('click', function () {
      var feature = source.getFeatures()[1];
      var point = feature.getGeometry();
      view.fit(point, { padding: [170, 50, 30, 150], minResolution: 250 });

    }, false);

    var centerlausanne = document.getElementById('centerlausanne');
    centerlausanne.addEventListener('click', function () {
      var feature = source.getFeatures()[1];
      var point = feature.getGeometry();
      var size = map.getSize();
      console.log(size)
      view.centerOn(point.getCoordinates(), size, [570, 500]);
    }, false);

  </script>
</body>

</html>