一、实验内容

  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. .NET 6 中外部引用项目NU1105异常问题解决

    .NET 6 Project中,添加了其他解决方案的工程后,本地能编译通过,代码签入后,其他同事下载代码,编译报错: 错误 NU1105 找不到"E:\Teld\01Code\TTP_CTP ...

  2. mysql下载及环境配置

    目录 mysql简介 mysql下载 启动mysql 系统mysql服务的启动 mysql虚拟环境配置 (可以直接看这个) 卸载说明 mysql简介 为什么是mysql? 虽然数据库软件有很多 但是操 ...

  3. 铁威马NAS如何开启二次验证提高系统安全性

    想到登录TNAS时更安全?直接开启OTP二次验证,通过 TNAS mobile生成的一次性密码登录NAS存储,简单设置,提升TOS系统访问安全性给你TNAS双重保护. 1.首先,确认你的TOS系统在5 ...

  4. Nmap扫描参数

    执行Nmap/nmap --help查看帮助文档,将显示Namp的用法及其功能Nmap的相关参数的含义与用法:扫描目标时用到的参数:-iL:从文件中导入目标主机或目标网段-iR:随意选择目标主机--e ...

  5. loadrunner11安装时提示缺少Microsoft Visual c++2005 sp1组件的解决办法

    解决方法: 1.进入loadrunner-11安装程序\loadrunner-11\Additional Components\IDE Add-Ins\MS Visual Studio .NET文件夹 ...

  6. css处理渲染的图片变形问题：object-fit: cover

    object-fit: cover完美解决!~

  7. 什么是RPC? （全面了解）

    一:RPC 1.什么是RPC? RPC 是指远程过程调用,也就是说两台服务器,A 和 B,一个应用部署在A 服务器上,想要调用B 服务器上应用提供的函数或方法,由于不在一个内存空间,不能直接调用,需要 ...

  8. c#5.0(.net 4.5之后)的 Async+await+Task的异步机制的调试笔记

    1.)无返回值的情况(异步也是基于线程). using System; using System.Collections.Generic; using System.Linq; using Syste ...

  9. Hive详解(05) - 压缩和存储

    Hive详解(05) - 压缩和存储 Hadoop压缩配置 MR支持的压缩编码 压缩格式 算法 文件扩展名 是否可切分 DEFLATE DEFLATE .deflate 否 Gzip DEFLATE ...

  10. Java学习笔记：2022年1月2日

    Java学习笔记:2022年1月2日 摘要:为何学习Java及Java的基础语法知识,记事本的显示原理,Java中的重要知识点 目录 Java学习笔记:2022年1月2日 1.正式开始学习Java! ...