OpenLayer3学习笔记——第二天

其他 2020-04-30 11:59:43 阅读次数: 0

参考地址：http://linwei.xyz/ol3-primer

一、加载不同的瓦片地图（layer基本）

1.切换地图源

OpenLayers3主要包括开源的Open Street Map，微软的Bing地图，Map Quest地图，然而Map Quest收费了，因此我们学习的时候就忽略这玩意儿吧，下面做一个切换地图源的小例子，直接上代码

<html lang="en">
<head>
<style>
    * {padding: 0;margin: 0;}
    body,html {
        width: 100%;
        height: 100%;
    }
    #map {
        height: 80%;
        width: 100%;
    }
</style>
<title>DiracHome</title>
<link rel="stylesheet" href="../v6.3.1-dist/ol.css">
<script src="../v6.3.1-dist/ol.js" charset="utf-8"></script>
</head>
<body>
<div id="map"></div>
<input type="button" value="OpenStreetMap地图" onclick="getOSMap()">
<input type="button" value="bing地图" onclick="getBing()">
<input type="button" value="Stamen地图" onclick="getStame()">
<input type="button" value="加载在线OpenStreetMap地图" onclick="getXYZOpenStreetMap()">
<input type="button" value="加载在线高德地图" onclick="getXYZgaode()">
<input type="button" value="加载在线雅虎地图" onclick="getXYZyahoo()">
<script type="text/javascript">
    var yahooMapLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            tileSize: 512,
            url:'https://{0-3}.base.maps.api.here.com/maptile/2.1/maptile/newest/normal.day/{z}/{x}/{y}/512/png8?lg=ENG&ppi=250&token=TrLJuXVK62IQk0vuXFzaig%3D%3D&requestid=yahoo.prod&app_id=eAdkWGYRoc4RfxVo0Z4B'
        })
    });

    var XYZOpenStreetMap = new ol.layer.Tile({
        source: new ol.source.XYZ({
            url: 'http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
        })
    });
    var XYZgaode = new ol.layer.Tile({
        source: new ol.source.XYZ({
        url:'http://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'
    })
    });

    // Open Street Map 地图层
    let OSMapLayer = new ol.layer.Tile({
        source: new ol.source.OSM()
    });
    // Bing地图层
    var bingMapLayer = new ol.layer.Tile({
        source: new ol.source.BingMaps({
            key: 'AkjzA7OhS4MIBjutL21bkAop7dc41HSE0CNTR5c6HJy8JKc7U9U9RveWJrylD3XJ',
            imagerySet: 'Road'
        })
    });
    // Stamen地图层
    var stamenLayer = new ol.layer.Tile({
        source: new ol.source.Stamen({
            layer: 'watercolor'
        })
    });

    // 定义视图
    let view = new ol.View({
        // projection: 'EPSG:4326',
        center: ol.proj.fromLonLat([118.78, 32.07]),
        zoom: 10,
        minZoom:10,
        maxZoom:14,
    })
    // 实例化地图对象
    var map = new ol.Map({
        target: 'map',
        layers: [
            OSMapLayer
            //默认OSMapLayer地图层
        ],
        view,
    });

    function getOSMap(){
        // 先移除当前的地图，再添加Open Street Map 地图
        map.removeLayer(map.getLayers().item(0));
        map.addLayer(OSMapLayer);
    }
    function getBing(){
        // 先移除当前的地图，再添加Open Street Map 地图
        map.removeLayer(map.getLayers().item(0));
        map.addLayer(bingMapLayer);
    }
    function getStame(){
        // 先移除当前的地图，再添加Open Street Map 地图
        map.removeLayer(map.getLayers().item(0));
        map.addLayer(stamenLayer);
    }

    function getXYZOpenStreetMap(){
        map.removeLayer(map.getLayers().item(0));
        map.addLayer(XYZOpenStreetMap);
    }
    function getXYZgaode(){
        map.removeLayer(map.getLayers().item(0));
        map.addLayer(XYZgaode);
    }
    function getXYZyahoo(){
        map.removeLayer(map.getLayers().item(0));
        map.addLayer(yahooMapLayer);
    }

</script>
</body>

</html>

注意了，以上代码可以直接复制的，关于引入在第一天有详细的介绍。

代码很简单，removeLayer完了之后再addLayer就行了，别忘了事先定义好layer。

2.加载离线瓦片地图
<!Doctype html>
<head>
    <title>OpenLayers</title>
    <link rel="stylesheet" href="../v6.3.1-dist/ol.css">
    <script src="../v6.3.1-dist/ol.js" charset="utf-8"></script>
<style>
    * {
        padding: 0;
        margin: 0;
    }
    body,html {
        width: 100%;
        height: 100%;
    }
    #map {
        height: 80%;
        width: 100%;
    }
</style>
</head>
<body>
    <div id="map" style="width: 100%"></div>
    <script type="text/javascript">
// 地图设置中心，设置到南京，本地离线地图可以通过抓取在线地图的请求获取
var center = ol.proj.transform([118.78, 32.07], 'EPSG:4326', 'EPSG:3857');
    //创建地图
    var map = new ol.Map({
        view: new ol.View({ 
            center: center,
            zoom: 10
        }),
        target: 'map'
    });
    // 加载图层
    map.addLayer(new ol.layer.Image({
        source: new ol.source.ImageStatic({
            url: '../study/images/414.jpg', 
            imageExtent: extent   
        })
    }));
    </script>
</body>
</html>

灰常简单，继续

3.图层叠加和管理
<!Doctype html>
<head>
    <title>OpenLayers</title>
    <link rel="stylesheet" href="../v6.3.1-dist/ol.css">
    <script src="../v6.3.1-dist/ol.js" charset="utf-8"></script>
<style>
    * {
        padding: 0;
        margin: 0;
    }
    body,html {
        width: 100%;
        height: 100%;
    }
    #map {
        height: 80%;
        width: 100%;
    }
</style>
</head>
<body>
    <div id="map" style="width: 100%"></div>
    <div> 显示/隐藏：
        <input type="checkbox" checked="checked" onclick="checkOsm(this);" />底图
        <input type="checkbox" checked="checked" onclick="checkCircle(this);"/>圆
        <input type="checkbox" checked="checked" onclick="checkPoint(this);"/>点
    </div>
    <div>
        图层顺序：
        <input name="seq" type="radio" value="" onclick="upOsm(this);" />底图最上
        <input name="seq" type="radio" value="" checked="checked" onclick="upCircle(this);"/>圆最上
        <input name="seq" type="radio" value="" onclick="upPoint(this);"/>点最上
    </div>
    <script type="text/javascript">
        // 创建3个图层
        // var offlineMapLayer = new ol.layer.Tile({
        // source: new ol.source.OSM()
        // });
        var pointLayer = new ol.layer.Vector({
            source: new ol.source.Vector()
        });
        var circleLayer = new ol.layer.Vector({
            source: new ol.source.Vector()
        });
        var offlineMapLayer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: 'http://192.168.0.241:8447/map/{z}/{x}/{y}.jpg'
            })
        });

        //创建地图
        var map = new ol.Map({
            layers:[offlineMapLayer,circleLayer,pointLayer],
            view: new ol.View({ 
                projection: 'EPSG:4326',
                center: [118.78, 32.07],
                // center: ol.proj.transform([118.78, 32.07], 'EPSG:4326', 'EPSG:3857'),
                zoom: 10 
            }),
            target: 'map'
        });
      // 添加点
      var point = new ol.Feature({
          geometry: new ol.geom.Point([118.78, 32.07])
      });
      point.setStyle(new ol.style.Style({
          image: new ol.style.Circle({
              radius: 5,
              fill: new ol.style.Fill({
                  color: 'red'
              }),
            //   stroke: new ol.style.Stroke({
            //       color: 'red',
            //       size: 10
            //   })
          })
      }));
      pointLayer.getSource().addFeature(point);

          // 添加圆
    var circle = new ol.Feature({
          geometry: new ol.geom.Point([118.78, 32.07])
      });
      circle.setStyle(new ol.style.Style({
          image: new ol.style.Circle({
              radius: 15,
              stroke: new ol.style.Stroke({
                  color: 'green',
                //   size:20
              })
          })
      }));
      circleLayer.getSource().addFeature(circle);
    
    // 隐藏显示osm图层
      function checkOsm(elem) {
        offlineMapLayer.setVisible(elem.checked);
      }

        // 隐藏显示point图层
      function checkPoint(elem) {
          pointLayer.setVisible(elem.checked);
      }
    
      // 隐藏显示circle图层
      function checkCircle(elem) {
          circleLayer.setVisible(elem.checked);
      }
    
      // 置顶osm图层到最上面
      function upOsm (elem) {
          if (elem.checked) {
              offlineMapLayer.setZIndex(3);
              circleLayer.setZIndex(circleLayer.getZIndex()-1);
              pointLayer.setZIndex(pointLayer.getZIndex()-1);
          }
      }
    
      // 置顶circle图层到最上面
      function upCircle (elem) {
          if (elem.checked) {
              circleLayer.setZIndex(3);
              offlineMapLayer.setZIndex(offlineMapLayer.getZIndex()-1);
              pointLayer.setZIndex(pointLayer.getZIndex()-1);
          }
      }
    
      // 置顶point图层到最上面
      function upPoint(elem) {
          if (elem.checked) {
              pointLayer.setZIndex(3);
              offlineMapLayer.setZIndex(offlineMapLayer.getZIndex()-1);
              circleLayer.setZIndex(circleLayer.getZIndex()-1);
          }
      }

    </script>
</body>
</html>

总结一下，就是setZIndex设置层级，使得点圆地图分层显示

3.加载图标
<!Doctype html>
<head>
    <title>OpenLayers</title>
    <link rel="stylesheet" href="../v6.3.1-dist/ol.css">
    <script src="../v6.3.1-dist/ol.js" charset="utf-8"></script>
<style>
    * {
        padding: 0;
        margin: 0;
    }
    body,html {
        width: 100%;
        height: 100%;
    }
    #map {
        height: 80%;
        width: 100%;
    }
    #anchor {
        cursor:pointer;
    }
</style>
</head>
<body>
    <div id="map" style="width: 100%"></div>
    <script type="text/javascript">

      // 我们需要一个vector的layer来放置图标
        var layer = new ol.layer.Vector({
            source: new ol.source.Vector()
        })
		//离线地图，也可以设置在线地图
        var offlineMapLayer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: 'http://192.168.0.241:8447/map/{z}/{x}/{y}.jpg'
            })
        });
        //创建地图
        var map = new ol.Map({
            layers:[offlineMapLayer,layer],
            view: new ol.View({ 
                projection: 'EPSG:4326',
                center: [118.78, 32.07],
                zoom: 8,
                maxZoom:10,
                minZoom:5,
            }),
            target: 'map'
        });


            // 创建一个Feature，并设置好在地图上的位置
        var anchor = new ol.Feature({
            geometry: new ol.geom.Point([118.78, 32.07])
        });
        // 设置样式，在样式中就可以设置图标
        anchor.setStyle(new ol.style.Style({
            image: new ol.style.Icon({
            src: '../study/images/sign.png',
            anchor: [0, 1],//图标位置 范围0-1
            scale: 0.3 //图标相对自己大小 范围0.1-1
            })
        }));
        // 添加到之前的创建的layer中去
        layer.getSource().addFeature(anchor);

          // 监听地图层级变化
        map.getView().on('change:resolution', function(){
            var style = anchor.getStyle();
            // 重新设置图标的缩放率，基于层级30来做缩放
            style.getImage().setScale(this.getZoom() / 30);
            anchor.setStyle(style);
        })
            
    </script>
</body>
</html>

具体的玩意都注释出来了，一步步看懂干嘛的就完事了，底层原理不用追究

4.添加文字
<!Doctype html>
<head>
    <title>OpenLayers</title>
    <link rel="stylesheet" href="../v6.3.1-dist/ol.css">
    <script src="../v6.3.1-dist/ol.js" charset="utf-8"></script>
<style>
    * {
        padding: 0;
        margin: 0;
    }
    body,html {
        width: 100%;
        height: 100%;
    }
    #map {
        height: 80%;
        width: 100%;
    }
    #anchor {
        cursor:pointer;
    }
</style>
</head>
<body>
    <div id="map" style="width: 100%"></div>
    <script type="text/javascript">

      // 我们需要一个vector的layer来放置图标
        var layer = new ol.layer.Vector({
            source: new ol.source.Vector()
        })

        var offlineMapLayer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: 'http://192.168.0.241:8447/map/{z}/{x}/{y}.jpg'
            })
        });
        //创建地图
        var map = new ol.Map({
            layers:[offlineMapLayer,layer],
            view: new ol.View({ 
                projection: 'EPSG:4326',
                center: [118.78, 32.07],
                zoom: 8,
                maxZoom:10,
                minZoom:5,
            }),
            target: 'map'
        });


    // 添加一个文字模板
    var anchor = new ol.Feature({
    geometry: new ol.geom.Point([118.78, 32.07])
  });
  // 设置文字style
  anchor.setStyle(new ol.style.Style({
    text: new ol.style.Text({
      font: '20px sans-serif', //默认这个字体，可以修改成其他的，格式和css的字体设置一样
      text: 'DiracHome',//文字内容
      fill: new ol.style.Fill({
          color: 'red'
      })
    })
  }));
  layer.getSource().addFeature(anchor);
    </script>
</body>
</html>

完事了，也是挺简单的

5.提示信息

这个就厉害了，有效果了，项目里面用的多，一定要整出来。先看代码

<!Doctype html>
<head>
    <title>OpenLayers</title>
    <link rel="stylesheet" href="../v6.3.1-dist/ol.css">
    <script src="../v6.3.1-dist/ol.js" charset="utf-8"></script>
<style>
    * {
        padding: 0;
        margin: 0;
    }
    body,html {
        width: 100%;
        height: 100%;
    }
    #map {
        height: 80%;
        width: 100%;
    }
    #container{
        width: 100%;
        height: 20px;
    }
    #popup{
        width: 80px;
        height: 20px;
    }
</style>
</head>
<body>
    <div id="map" style="width: 100%"></div>
    <div id="popup" class="ol-popup">
        <a href="#" id="popup-closer" class="ol-popup-closer"></a>
        <div id="popup-content"></div>
    </div>
      
    
    <script type="text/javascript">
        var offlineMapLayer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: 'http://192.168.0.241:8447/map/{z}/{x}/{y}.jpg'
            })
        });

    
  // 获取到popup的节点
  var container = document.getElementById('popup');
  var content = document.getElementById('popup-content');
          // 创建一个overlay, 绑定html元素container
        var overlay = new ol.Overlay(/** @type {olx.OverlayOptions} */ ({
            element: container,
            autoPan: true,
            autoPanAnimation: {
            duration: 250
            }
        }));
               //创建地图
               var map = new ol.Map({
            layers:[offlineMapLayer, ],
            view: new ol.View({ 
                projection: 'EPSG:4326',
                center: [118.78, 32.07],
                zoom: 8,
                maxZoom:10,
                minZoom:5,
            }),
            target: 'map'
        });

          // 监听地图点击事件
        map.on('singleclick', function(evt) {
            console.log(evt.coordinate)//这就是当前坐标
            // 获取当前点击坐标，并设置到HTML元素上去
            let zb = evt.coordinate;
            var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(zb, 'EPSG:3857', 'EPSG:4326'));
            content.innerHTML = '<p>You clicked here:</p><code>' + hdms +
                '</code>';
            // 设置overlay的位置，从而显示在鼠标点击处
            overlay.setPosition(zb);
            //将overlay追加到map
            map.addOverlay(overlay)
        });   
    </script>
</body>
</html>

这里用到了事件监听，后面会详细讲，这里只要知道触发单击事件就完事了

二、地图事件

先来一个简单的点击事件

<!Doctype html>
<head>
    <title>OpenLayers</title>
    <link rel="stylesheet" href="../v6.3.1-dist/ol.css">
    <script src="../v6.3.1-dist/ol.js" charset="utf-8"></script>
<style>
    * {
        padding: 0;
        margin: 0;
    }
    body,html {
        width: 100%;
        height: 100%;
    }
    #map {
        height: 80%;
        width: 100%;
    }
</style>
</head>
<body>
    <div id="map" style="width: 100%"></div>
<script type="text/javascript">
    var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        target: 'map',
        view: new ol.View({
          center: ol.proj.transform([118.78, 32.07], 'EPSG:4326', 'EPSG:3857'),
          zoom: 10,
          minZoom:5,
          maxZoom:15
        })
    });

    // 监听singleclick事件
    map.on('singleclick', function(event){
        // 通过getEventCoordinate方法获取地理位置，再转换为wgs84坐标，并弹出对话框显示
        // alert(ol.proj.transform(map.getEventCoordinate(event), 'EPSG:3857', 'EPSG:4326'));
        alert(ol.proj.transform(event.coordinate, 'EPSG:3857', 'EPSG:4326'));
    })
    /*
    设置点击事件只触发一次的方法如下
       1.map.once  只响应一次
       2.将事件赋值给kye，在事件中末尾加入  map.unByKey(key)  
       3.函数中  map.un('singleclick', 事件名) 注销事件
    */
    
   /*
    ol.map:
        左键单击：singleclick
        右键单击：dblclick
        鼠标点击：click
        鼠标移动：pointermove
        鼠标拖拽：pointerdrag
        地图移动：moveend  
    ol.View
        地图缩放：change:resolution
        地图中心改变： change:center
   */
</script>
</body>
</html>

这个例子中只实现了点击事件的功能，其他事件注释中都已列出，可以自己试试，更详细的说明请移步官方文档

哦吼，下班了，先写到这，以后再补充修改

DiracHome
原创文章 2 获赞 3 访问量 106
关注 私信

猜你喜欢

转载自blog.csdn.net/DiracHome/article/details/105845935
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022