一、实验内容

  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. PW6276是一颗高效同步升压转换芯片，内部集成低阻抗功率 MOS

    概述PW6276是一颗高效同步升压转换芯片,内部集成低阻抗功率 MOS. 具有短路保护功能内部集成软启动电路,无需外部补偿电容,外部反馈网络.PW6276采用 SOP8-EP 封装配合较少的外围原件使 ...

  2. ATM购物车项目 三层架构

    目录 项目开发流程 项目需求 三层架构 (重点) 实际案例 展示层 核心逻辑层 数据处理层 ATM项目 项目开发流程 # 1.项目需求分析 产品经理(客户) 架构师 开发经理 1.架构师 开发经理提前 ...

  3. loadrunner11汉化时提示模块插件无法注册的解决方法

    安装汉化程序时,关闭杀毒软件.

  4. RabbitMQ、RocketMQ、Kafka延迟队列实现

    延迟队列在实际项目中有非常多的应用场景,最常见的比如订单未支付,超时取消订单,在创建订单的时候发送一条延迟消息,达到延迟时间之后消费者收到消息,如果订单没有支付的话,那么就取消订单. 那么,今天我们需 ...

  5. CTFshow——funnyrsa1的wp理解

    题目如下: 题目分析: 拿到题,发现给的e不常规,p1和p2相等,有两个不同n,两个不同c和两个不同e.给定两个密文的情况下,通常需要找到两者之间存在的关系,"合并"密文求解才能得 ...

  6. Java关键词synchronized解读

    目录 1 引入Synchronized 2 Synchronized的使用 2.1 对象锁 2.1.1 Synchronized修饰实例方法 2.1.2 Synchronized修饰代码块 2.2 类 ...

  7. 内网渗透-smb&wmi明文&hash传递

    首先我们要知道,在windows2012以上版本默认会关闭wdigest,那么攻击者就无法从内存中获取明文密码了 windows2012以下的版本如果安装了KB2871997补丁,那么同样也会导致无法 ...

  8. Ubuntu 中科大源的使用

    官方网址: https://mirrors.ustc.edu.cn/help/ubuntu.html

  9. P3934 [Ynoi2016] 炸脖龙 I

    题面 给一个长为 \(n\) 的序列,\(m\) 次操作,每次操作: 1.区间 \([l,r]\) 加 \(x\) 2.对于区间 \([l,r]\),查询: \[a[l]^{a[l+1]^{a[l+2 ...

  10. centos7.6安装本地yum源

    centos7.6安装本地yum源 前言:文章内容可能会因环境不同而有所差异,所谓集思广益说不定灵感就来了呢; 文章初衷旨在交流学习.记录个人成长,如果能帮助到您,那就点个赞噢. 环境说明: 1.本实 ...