一、实验内容

  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. 微服务开发平台 Spring Cloud Blade 部署实践

    本文介绍使用 Rainbond 快速部署 Spring Cloud Blade 微服务平台.Spring Cloud Blade 是一个由商业级项目升级优化而来的微服务架构,采用Spring Boot ...

  2. python什么是异常?如何处理异常

    异常处理 什么是异常 异常是程序错误发生的信号.程序一旦出现错误,就会产生一个异常,如果程序中没有处理该异常,该异常就会抛出来,程序的运行也随即终止. 错误分为两种 1.语法错误 2.逻辑错误 如何处 ...

  3. 大数据 - DWS层 业务实现

    统计主题 需求指标[ADS] 输出方式 计算来源 来源层级 访客[DWS] pv 可视化大屏 page_log 直接可求 dwd UV(DAU) 可视化大屏 需要用 page_log 过滤去重 dwm ...

  4. python之路51 聚合查询 分组查询

    图书管理系统 1.表设计 先考虑普通字段再考虑外键字段 数据库迁移.测试数据录入 2.首页展示 3.书籍展示 4.书籍添加 5.书籍编辑 后端如何获取用户想要编辑的数据.前端如何展示出待编辑的数据 6 ...

  5. 【Vue3.0】关于 script setup 语法糖的用法

    script setup - 简介 先来看一看官网关于 <script setup> 的介绍: 要彻底的了解 setup 语法糖,你必须先明确 setup() 这个 组合式API 官网中对 ...

  6. HHKB Programming Contest 2022 Winter(AtCoder Beginner Contest 282)

    前言 好久没有打 AtCoder 了.有点手生.只拿到了 \(\operatorname{rk}1510\),应该上不了多少分. 只切了 \(\texttt{A,B,C,D}\) 四题. A - Ge ...

  7. P8796 [蓝桥杯 2022 国 AC] 替换字符

    题面 给定一个仅含小写英文字母的字符串 \(s\) 和 \(m\) 次操作,每次操作选择一个区间 \([l_i,r_i]\) 将 \(s\) 的该区间中的所有字母 \(x_i\) 全部替换成字母 \( ...

  8. 2023牛客寒假算法基础集训营2 ABCDEFHJKL

    比赛链接 A 题解 知识点:数学. 用 \(n\) 减去区间1的端点得到匹配的一个区间,求一下与区间2的交集. 一个小公式,两区间 \([L_1,R_1]\) 和 \([L_2,R_2]\) 的交集长 ...

  9. C#/VB.NET 在Excel中添加水印

    在工作中,为了防止文件被随意复制和传播,通常我们会选择在文档中添加水印来对文件进行有效保护.文字水印是比较常见的一种保护手段,它可以有效防止文件被任意复制和随意打印传播.不过,Excel默认并没有水印 ...

  10. DLL的两种加载方式

    案例简述 在某项目中,需要使用两个不同版本的HCNetSDK库,我们通常使用的静态加载DLL的方式不能满足该需求,故用到动态加载DLL的方式. 背景技术及术语解释 静态加载:也称隐式调用,指在运行程序 ...