一、实验内容

  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. 100IT 名企 java 面试必考面试题

    一.Java基础(2/133) 二.Java代码报错(52/133) 三.算法与编程(55/133) 四.html&JavaScript&ajax部分 五.Java Web部分 六.数 ...

  2. 【Hadoop面试】基础概念、HDFS、MapReduce、Yarn、实战

    一.Hadoop概念及架构 1.是否看过Hadoop源码 2.正常工作的hadoop集群中hadoop都分别需要启动哪些进程,他们的作用分别是什么 3.hadoop和spark中的文件缓存方式 4.h ...

  3. 【离线数仓】Day04-即席查询（Ad Hoc）：Presto链接不同数据源查询、Druid建多维表、Kylin使用cube快速查询

    一.Presto 1.简介 概念:大数据量.秒级.分布式SQL查询engine[解析SQL但不是数据库] 架构 不同worker对应不同的数据源(各数据源有对应的connector连接适配器) 优缺点 ...

  4. hdoj笔记1000

    1000,A+B problem #include <stdio.h>//要用EOF!! int main() { int a,b; while(scanf("%d%d" ...

  5. 网络编程 UDP套接字

    第十二章 UDP套接字 12.1 前言 上一章讲述了TCP通信方式,它是基于流的面向连接的网络通信.UDP是IP协议上的另一种传输协议. TCP和UDP都是端到端的通信协议,都处于TCP/IP网络模型 ...

  6. css、js 缓存清除

    此种方式完美达到了清除缓存的效果 css引入标签可在一个引号内完成,js引入标签由于解析原因需要将两个标签拆开再组 使用:按照此格式,放在原 <link /> 或 <script&g ...

  7. [数据结构]Hash Table（哈希表）

    Hash Table基本概念 散列函数:一个把查找表中的关键字映射成该关键字对应的地址的函数,记为Hash(key)=Addr. 散列函数可能会把两个或者两个以上的关键字映射到同一个地址,称这种情况为 ...

  8. ASP.NET 6.0 Core 迁移 ASP.NET Core 7.0

    2022年微软发布了.NET 7, 同时提供了详细的升级迁移方案. Migrate from ASP.NET Core 6.0 to 7.0 今天给大家简单整理.分享一篇文章. 一.首先需要升级Vis ...

  9. VUE基础之:visible.sync-模态框显示隐藏、elementUI dialog组件报错或者visible属性不生效问题

    VUE基础之:visible.sync-模态框显示隐藏.elementUI dialog组件报错或者visible属性不生效问题 这篇文档存成草稿2年了,最近终于有时间拉出来写完了.... 我们日常开 ...

  10. 「HNOI2019」校园旅行

    将相邻且颜色相同的点视作一个连通块,若该连通块是二分图,那么从连通块中一点\(x\)到连通块中一点\(y\)的路径的奇偶性确定 所以对于块外一点\(x\)到块内一点\(y\),可以将它们的路径在连通块 ...