一、实验内容

  1. 练习OpenLayers的引用形式;
  2. 简单地图加载;
  3. 控件加载。

二、实验步骤

2.1 ol引用

<!doctype html>

<html lang="zh">

<head>

    <link rel="stylesheet"

        href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" type="text/css">

    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>

    <title>OpenLayers example</title>

</head>

<body>

</body>

</html>

2.2 单个地图显示

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta content="text/html;charset=UTF-8">

    <title>OpenLayers example</title>

    <link rel="stylesheet" href="./v6.5.0-dist/ol.css">

    <script src="./v6.5.0-dist/ol.js"></script>

    <style>

        html,

        body,

        div {

            height: 100%;

            width: 100%;

            margin: 0%;

        }

    </style>

</head>

<body>

    <div id="map" class="map"></div>

    <script type="text/javascript">

        var map = new ol.Map({

          target: 'map',

          layers: [

            new ol.layer.Tile({

              source: new ol.source.OSM()

            })

          ],

          view: new ol.View({

            center: ol.proj.fromLonLat([37.41, 8.82]),

            zoom: 10

          })

        });

      </script>

</body>

</html>

2.3 两幅静态地图显示

<html>

<head>

  <meta charset="utf-8">

  <title>单个地图加载</title>

  <link href="./v6.5.0-dist/ol.css" rel="stylesheet" />

  <script src="./v6.5.0-dist/ol.js"></script>

  <style>

    html,

    body {

      height: 100%;

    }

    #map_1 {

      width: 49%;

      height: 99%;

      float: left;

    }

    #map_2 {

      width: 49%;

      height: 99%;

      float: right;

    }

  </style>

</head>

<body>

  <div id="map_1"></div>

  <div id="map_2"></div>

  <script type="text/javascript">

    var map = new ol.Map({

      target: 'map_1',

      layers: [new ol.layer.Tile({

        source: new ol.source.OSM()

      })],

      view: new ol.View({

        center: [0, 0],

        zoom: 2

      })

    });

    var map_2 = new ol.Map({

      target: 'map_2',

      layers: [new ol.layer.Tile({

        source: new ol.source.OSM({

          url: 'http://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png'

        })

      })],

      view: new ol.View({

        center: [0, 0],

        zoom: 2

      })

    })

  </script>

</body>

</html>

2.4 地图联动

<html>

<head>

  <meta charset="utf-8">

  <title>地图加载</title>

  <link href="./v6.5.0-dist/ol.css" rel="stylesheet" />

  <script src="./v6.5.0-dist/ol.js"></script>

  <style>

    html,

    body {

      height: 100%;

    }

    #map_1 {

      width: 49%;

      height: 99%;

      float: left;

    }

    #map_2 {

      width: 49%;

      height: 99%;

      float: right;

    }

  </style>

</head>

<body>

  <div id="map_1"></div>

  <div id="map_2"></div>

  <script type="text/javascript">

    var view = new ol.View({

      center: [0, 0],

      zoom: 2

    })

    var map = new ol.Map({

      target: 'map_1',

      layers: [new ol.layer.Tile({

        source: new ol.source.OSM()

      })],

      view: view

    });

    var map_2 = new ol.Map({

      target: 'map_2',

      layers: [new ol.layer.Tile({

        source: new ol.source.OSM({

          url: 'http://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png'

        })

      })],

      view: view

    })

  </script>

</body>

</html>

2.5 视图属性-旋转角度

<html>

<head>

  <meta charset="utf-8">

  <title>地图加载</title>

  <link href="./v6.5.0-dist/ol.css" rel="stylesheet" />

  <script src="./v6.5.0-dist/ol.js"></script>

  <style>

    html,

    body {

      height: 100%;

    }

    #map_1 {

      width: 49%;

      height: 99%;

      float: left;

    }

    #map_2 {

      width: 49%;

      height: 99%;

      float: right;

    }

  </style>

</head>

<body>

  <div id="map_1"></div>

  <div id="map_2"></div>

  <script type="text/javascript">

    var view = new ol.View({

      center: [0, 0],

      zoom: 2

    })

    var map = new ol.Map({

      target: 'map_1',

      layers: [new ol.layer.Tile({

        source: new ol.source.OSM()

      })],

      view: new ol.View({

        center: [0, 0],

        zoom: 2,

        rotation: Math.PI / 6

      })

    });

    var map_2 = new ol.Map({

      target: 'map_2',

      layers: [new ol.layer.Tile({

        source: new ol.source.OSM()

      })],

      view: view

    })

  </script>

</body>

</html>

2.6 视图属性-限制地图缩放级别

<html>

<head>

  <meta charset="utf-8">

  <title>地图加载</title>

  <link href="./v6.5.0-dist/ol.css" rel="stylesheet" />

  <script src="./v6.5.0-dist/ol.js"></script>

  <style>

    html,

    body {

      height: 100%;

    }

    #map_1 {

      width: 49%;

      height: 99%;

      float: left;

    }

    #map_2 {

      width: 49%;

      height: 99%;

      float: right;

    }

  </style>

</head>

<body>

  <div id="map_1"></div>

  <div id="map_2"></div>

  <script type="text/javascript">

    var view = new ol.View({

      center: [0, 0],

      zoom: 2

    })

    var map = new ol.Map({

      target: 'map_1',

      layers: [new ol.layer.Tile({

        source: new ol.source.OSM()

      })],

      view: new ol.View({

        center: [0, 0],

        zoom: 2,

        rotation: Math.PI / 6,

        minZoom: 4,

        maxZoom: 7,

      })

    });

    var map_2 = new ol.Map({

      target: 'map_2',

      layers: [new ol.layer.Tile({

        source: new ol.source.OSM()

      })],

      view: view

    })

  </script>

</body>

</html>

2.7 View-缩放到范围

<html>

<head>

  <meta charset="utf-8">

  <title>地图加载</title>

  <link href="./v6.5.0-dist/ol.css" rel="stylesheet" />

  <script src="./v6.5.0-dist/ol.js"></script>

  <style>

    html,

    body {

      height: 100%;

    }

    #menu {

      position: absolute;

      top: 100px;

      left: 20px;

      z-index: 11;

    }

    .btn {

      background-color: rgba(0, 60, 136, 0.5);

      display: block;

      margin: 1px;

      padding: 0;

      color: #fff;

      font-size: 1.14em;

      text-decoration: none;

      text-align: center;

      height: 1.375em;

      border: none;

      border-radius: 0 0 2px 2px;

    }

  </style>

</head>

<body>

  <div id="map">

    <div id="menu">

      <button class="btn" onclick="fitToChangsha()">长沙市</button>

      <button class="btn" onclick="fitToPoint()">地信楼</button>

    </div>

  </div>

  <script type="text/javascript">

    var map = new ol.Map({

      target: 'map',

      layers: [new ol.layer.Tile({

        source: new ol.source.OSM()

      })],

      view: new ol.View({

        //设置北京市为地图中心

        center: [12952902.8394, 4852401.2052],

        zoom: 10,

      })

    });

    function fitToChangsha() {

      map.getView().fit([12560816.6134, 3273506.2545, 12591065.3310, 3281592.9487])

    }

    function fitToPoint() {

      map.getView().fit(new ol.geom.Point([12570902.1896, 3269680.4449]), { maxZoom: 18 })

    }

  </script>

</body>

</html>

2.8 View-动画效果

<html>

<head>

  <meta charset="utf-8">

  <title>地图加载</title>

  <link href="./v6.5.0-dist/ol.css" rel="stylesheet" />

  <script src="./v6.5.0-dist/ol.js"></script>

  <style>

    html,

    body {

      height: 100%;

    }

    #menu {

      position: absolute;

      top: 100px;

      left: 20px;

      z-index: 11;

    }

    .btn {

      background-color: rgba(0, 60, 136, 0.5);

      display: block;

      margin: 1px;

      padding: 0;

      color: #fff;

      font-size: 1.14em;

      text-decoration: none;

      text-align: center;

      height: 1.375em;

      border: none;

      border-radius: 0 0 2px 2px;

    }

  </style>

</head>

<body>

  <div id="map">

    <div id="menu">

      <button class="btn" onclick="fitToChangsha()">长沙市</button>

      <button class="btn" onclick="fitToPoint()">地信楼</button>

    </div>

  </div>

  <script type="text/javascript">

    var map = new ol.Map({

      target: 'map',

      layers: [new ol.layer.Tile({

        source: new ol.source.OSM()

      })],

      view: new ol.View({

        //设置长沙市为地图中心

        center: [12952902.8394, 4852401.2052],

        zoom: 10,

      })

    });

    var changsha = [12570902.1896, 3269680.4449];

    var changsha_center = [12571883.0743, 3277963.5524

    ];

    function fitToChangsha() {

      map.getView().animate({

        center: changsha_center,

        duration: 2000,

      })

    }

  </script>

</body>

</html>

OpenLayers入门练习的更多相关文章

  1. OpenLayers入门（一）

    OpenLayers简介 OpenLayers(https://openlayers.org/)是一个用来帮助开发Web地图应用的高性能的.功能丰富的JavaScript类库,可以满足几乎所有的地图开 ...

  2. Webgis中关于Openlayers入门使用（一）安装及生成基本地图

    一．WebGis项目中使用的版本2.12 下载地址:https://github.com/openlayers/ol2/releases https://github.com/openlayers/o ...

  3. openlayers4 入门开发系列之地图展示篇（附源码下载）

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  4. GIS之家资源

    分享资源之arcgis软件系列 arcgis10.0(arcgis desktop以及arcgis server):下载 arcgis10.1(arcgis desktop以及arcgis serve ...

  5. GIS之家demo源代码咨询

    GIS之家demo源代码咨询收费服务(希望对 webgis 新人有所帮助) GIS之家QQ群(采取QQ群入群收费模式): GIS之家001:296438295 需要入群的giser们,入群之前联系GI ...

  6. OpenLayers 3 入门教程

    OpenLayers 3 入门教程摘要OpenLayers 3对OpenLayers网络地图库进行了根本的重新设计.版本2虽然被广泛使用,但从JavaScript开发的早期发展阶段开始,已日益现实出它 ...

  7. openLayers 3 之入门

    openLayers 3 之入门 openlayer是web GIS客户端开发提供的javascript类库,也是开源框架,可以加载本地数据进行展示地图 1.下载相关引用的js.css文件 2.类似于 ...

  8. 【OpenLayers】入门教程地址

    [OpenLayers]入门教程地址:  点击进入   http://anzhihun.coding.me/ol3-primer/index.html 简书地址 :  http://www.jians ...

  9. SuperMap iClient for JavaScript 新手入门

    地理信息系统(英语:Geographic Information System,缩写:GIS)是一门综合性学科,结合地理学与地图学,已经广泛的应用在不同的领域,是用于输入.存储.查询.分析和显示地理数 ...

  10. openlayers 学习笔记之1

    1. 为Web Gis客户端开发的javascript 框架 百度文库中的教程:入门经典> 1) 初始化map: map = new OpenLayers.Map(mapContainerNam ...

随机推荐

  1. 【JVM调优】Day01：Garbage的概念、垃圾回收的算法（标记清除、拷贝、标记压缩）、各种垃圾回收器（Serial、Parallel、CMS并发）及存在的问题

    〇.前言 简历写上:熟悉GC常用算法,熟悉常见垃圾回收器.具有实际JVM调优实战经验 瞬间涨3k 一.什么是garbage Java中垃圾回收器自动进行垃圾回收,不用自己回收 new 对象在内存中,c ...

  2. 单节锂电池充电管理芯片，IC电路图

    PW4054 是一款性能优异的单节锂离子电池恒流/恒压线性充电器.PW4054 适合给 USB 电源以及适配器电源供电.基于特殊的内部 MOSFET 架构以及防倒充电路, PW4054 不需要外接检测 ...

  3. C/C++标准输入输出函数终极最全解析（不全捶我）

    C/C++的一众输入输出函数的区别常常搞得人晕头转向,二者之中又以输入函数更加令人头疼.本文尝试整理C/C++的各种输入输出函数. 由于输入涉及空格.换行符的读取.忽略等问题,因此输入比输出更麻烦.所 ...

  4. 《HTTP权威指南》– 16.重定向与负载均衡

    重定向 重定向 的目标是尽快地将HTTP报文发送到可用的Web服务器上去.在穿过因特网的路径上,HTTP报文传输的方向会受到HTTP应用程序和报文经由的路由设备的影响: 配置创建客户端报文的浏览器应用 ...

  5. 你的 GitHub 年度报告「GitHub 热点速览 v.22.52」

    辞旧迎新的日子,又是年度报告满天飞的时候.GitHub 也不落其他平台之后,推出了用户 GitHub Contributions 报告.不知道,今年的你是不是比去年搬了更多的砖呢?在本期的 News ...

  6. [python] 基于Gradio可视化部署机器学习应用

    Gradio是一个开源的Python库,用于构建机器学习和数据科学演示应用.有了Gradio,你可以围绕你的机器学习模型或数据科学工作流程快速创建一个简单漂亮的用户界面.Gradio适用于以下情况: ...

  7. 一份前端够用的 Linux 命令

    前言 你好,我是悦创.我用 VuePress 搭建博客,又实现了 GitHub 和 Gitee Pages 的自动部署,但我最终还是决定自己建站,而在建站的过程中,必不可少会用到 Linux 命令,所 ...

  8. 诗词API

    1.js依赖 /** * 今日诗词V2 JS-SDK 1.2.2 * 今日诗词API 是一个可以免费调用的诗词接口:https://www.jinrishici.com */ !function(e) ...

  9. Unity之GPS定位（高德解析）

    Unity之GPS定位 Unity之GPS定位(高德解析) 前言 开篇 Unity版本及使用插件 正题 创建场景 写脚本 把脚本挂载到场景中 打包发布场景 安装真机并且测试 代码中的==Key==怎么 ...

  10. springcloud-gateway整合jwt+jcasbin实现权限控制

    jcasbin简介: jcasbin 是一个用 Java 语言打造的轻量级开源访问控制框架https://github.com/casbin/jcasbin,是casbin的Java语言版本.目前在 ...