jjzjj

Openlayers 快速上手教程

卸载引擎 2023-04-20 原文

📢欢迎点赞👍/ 收藏⭐/ 留言📝如有错误敬请指正！

1. Openlayers简介

Openlayers 是开源的前端地图框架，官网地址：https://openlayers.org/
它的作用主要是用于展现数据并且提供相应的地图操作工具。

1.1 官网首页


1.2 使用示例example

Openlayers6版本官网提供了 228 个使用案例，可以根据自己的需要筛选：
如： popup、draw、style 等

例如搜索popup:

点击进入后有详细的代码示例：

1.3 阅读api

在学会了 Openlayers 的基本使用后，API 的阅读使用则是工作必备。
左侧列表列出了Openlayers的所有类，方便快速搜索

例如搜索Map后进入：



2. 快速开始示例

我将通过一个官网的demo介绍如何使用Openlayers

初始代码：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.13.0/css/ol.css" type="text/css">
    <style>
      .map-class {
        height: 50rem;
        width: 100%;
      }
    </style>
    <!-- 加载OpenLayers 类库 -->
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.13.0/build/ol.js"></script>
    <title>OpenLayers例子</title>
  </head>
  <body>
    <h2>我的地图</h2>
    <div id="map-id" class="map-class"></div>
    <script type="text/javascript">
      var map = new ol.Map({
        // 绑定 DIV 元素
        target: 'map-id',
        // 添加图层
        layers: [
          new ol.layer.Tile({
            // 设置图层的数据源
            source: new ol.source.OSM() 
          })
        ],
        // 设置视图窗口
        view: new ol.View({
          //center: ol.proj.fromLonLat([37.41, 8.82]),
          center: ol.proj.transform([104, 30], 'EPSG:4326', 'EPSG:3857'),
          zoom: 5
        })
      });
    </script>
  </body>
</html>

通过上面例子可以看出 Openlayers 使用很简单，首先定义一个 Map，这是 Openlayers 的核心，它是一个容器，所有动作、设置等都在 Map 中展开。

下面对上面 demo所简要说明：

  1. 将 Map 容器与 HTML 元素（这里是 DIV 元素 map-id）做绑定，Map 提供有 target 属性来绑定；
  2. 将图层 Layer 添加到 Map 中，这里是一个瓦面图层 ol.layer.Tile；
  3. 图层是一个包装盒，需要给图层添加具体的数据源：new ol.source.OSM()，数据源表示一个服务，可以理解为是一个 URL；
  4. 最后设置 Map 容器的视图窗口：new ol.View，就是我们初始化能看到的地图样子。

Openlayers 其核心组件是 Map、Layer、Source、View、Control、Interaction几乎所有的动作都是围绕这几个核心类展开。

Map

Map是 Openlayers 的使用的基础，所有的图层、地图控件、地图工具等必须添加到 Map 中才能使用。
往 Map 中添加图层、地图控件、地图工具等可以在初始化 Map 时就添加（如上 demo），可以调用 Map 相关的方法添加 addControl(control)、addInteraction(interaction)、addLayer(layer)。
Map 还提供了很多事件，如：点击地图（click）、双击地图（dbclick）等。
绑定 click 事件使用：

this.map.on("click", evt => {
  this.map.forEachFeatureAtPixel(evt.pixel, feature => {
	//鼠标点击某一个要素后，获取这个要素，执行业务逻辑
  });
});

PS： 另一种事件调用方式：this.map.dispatchEvent({type: "click", event: 回调函数 })

Layer

Layer 图层：单单一个 Map 是没有什么用的，只用绑定图层才能显示数据，Layer 作用能控制数据是否显示，以及地图可显示的最大或最小比例尺（即放大或缩小到某个级别不显示地图），这里特别说明下，图层主要是根据数据源的不同来选择，不同的数据源选择不同的图层，使用：

this.map.addLayer(new ol.layer.Vector({
  source: new TileWMS({
    url: "http://192.168.1.244:9090/geoserver/fj/wms",
    params: {
         LAYERS: "fj:cityErase"
     }
  })
}))

Source

这是整个 Openlayers 的灵魂，source 分为矢量数据源和影像数据源。有时候底图使用影像数据，而与我们业务相关的河流、行政区、水环境监测点等都是矢量数据。
数据源的使用如下：

this.map.addLayer(new ol.layer.Tile({
        //加载影像数据
   source: new ol.source.XYZ({
        url: "https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=a5dd6a2f1c934394bce6b0fb077203eb",
        attributions: "测试"
   })
}));

this.map.addLayer(new VectorLayer({
    //加载矢量数据
   source: new ol.source.Vector(),
   //这里设置数据展示边框颜色
   style: function(feature) {
        return new Style({
             stroke: new Stroke({
                   color: "blue",
                   width: 1
             })
         })
     }
 }))

View

view 用来设置地图的展示位置范围、地图中心位置以及当前地图使用的投影坐标系（有很多坐标系，如地理坐标系：4326）等，也可以设置地图旋转等，使用：

this.map.setView(new ol.View({
     center: [114.064839,22.548857],    //深圳
     zoom: 15,    
     projection: 'EPSG:4326'     //使用的坐标，这里是 WGS84 坐标系
}))

Control

Control 控件，就是与地图相关操作的工具。如下图：

地图默认包含了放大缩小控件，控件的使用可以更加方便的帮助我们浏览数据，提高交互体验。

new ol.Map({
    target: 'map2',
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ],
    view: new ol.View({
      center: ol.proj.transform(
          [104, 30], 'EPSG:4326', 'EPSG:3857'),
      zoom: 10
    }),
    // 在默认控件的基础上，再加上其他内置的控件
	// 在上面 demo 中没有设置 controls 属性，直接使用 Map 的默认控件（放大、缩小）
    controls: ol.control.defaults().extend([
        new ol.control.FullScreen(),
        new ol.control.MousePosition(),
        new ol.control.OverviewMap(),
        new ol.control.ScaleLine(),
        new ol.control.ZoomSlider(),
        new ol.control.ZoomToExtent()
    ]),
});

Interaction

交互操作就是我们与地图的相互操作，比如在地图上绘制要素、选择、修改、移动、拉伸等等操作。使用如下：

new ol.Map({
      // 修改 openlayers 提供的默认的交互方式
      interactions: ol.interaction.defaults({
          doubleClickZoom: false,
          mouseWheelZoom: false
      }),
      layers: [
        ... ...
      ],
      target: 'map2',
      view: new ol.View({
          ... ...
      })
  });

也可以手动添加：

// 添加绘制工具
this.map.addInteraction(new Draw({
  //在地图上绘制好的要素添加到指定数据源
  source: this.drawVectorSource,   
  //绘制要素的类型
  type: GeometryType.POLYGON
});

📢欢迎点赞👍/ 收藏⭐/ 留言📝如有错误敬请指正！
后续持续更新中…

Openlayers快速spanclasstoken前端javascript

有关Openlayers 快速上手教程的更多相关文章

  1. postman接口测试工具-基础使用教程 - 2

    1.postman介绍Postman一款非常流行的API调试工具。其实，开发人员用的更多。因为测试人员做接口测试会有更多选择，例如Jmeter、soapUI等。不过，对于开发过程中去调试接口，Postman确实足够的简单方便，而且功能强大。2.下载安装官网地址:https://www.postman.com/下载完成后双击安装吧，安装过程极其简单，无需任何操作3.使用教程这里以百度为例,工具使用简单，填写URL地址即可发送请求，在下方查看响应结果和响应状态码常用方法都有支持请求方法:getpostputdeleteGet、Post、Put与Delete的作用get：请求方法一般是用于数据查询，

  2. 在VMware16虚拟机安装Ubuntu详细教程 - 2

    在VMware16.2.4安装Ubuntu一、安装VMware1.打开VMwareWorkstationPro官网，点击即可进入。2.进入后向下滑动找到Workstation16ProforWindows，点击立即下载。3.下载完成，文件大小615MB，如下图：4.鼠标右击，以管理员身份运行。5.点击下一步6.勾选条款，点击下一步7.先勾选，再点击下一步8.去掉勾选，点击下一步9.点击下一步10.点击安装11.点击许可证12.在百度上搜索VM16许可证，复制填入，然后点击输入即可，亲测有效。13.点击完成14.重启系统，点击是15.双击VMwareWorkstationPro图标，进入虚拟机主

  3. hadoop安装之保姆级教程（二）之YARN的配置 - 2

    1.1.1 YARN的介绍 为克服Hadoop1.0中HDFS和MapReduce存在的各种问题⽽提出的，针对Hadoop1.0中的MapReduce在扩展性和多框架⽀持⽅⾯的不⾜，提出了全新的资源管理框架YARN. ApacheYARN（YetanotherResourceNegotiator的缩写）是Hadoop集群的资源管理系统，负责为计算程序提供服务器计算资源，相当于⼀个分布式的操作系统平台，⽽MapReduce等计算程序则相当于运⾏于操作系统之上的应⽤程序。 YARN被引⼊Hadoop2,最初是为了改善MapReduce的实现，但是因为具有⾜够的通⽤性，同样可以⽀持其他的分布式计算模

  4. ruby - 如何以表格格式快速打印 Ruby 哈希值？ - 2

    有没有办法快速将表格格式的ruby​​哈希打印到文件中？如:keyAkeyBkeyC...1232343451253474456...其中散列的值是不同大小的数组。还是使用双循环是唯一的方法？谢谢 最佳答案 试试我写的这个gem(在表中打印散列、ruby对象、ActiveRecord对象):http://github.com/arches/table_print 关于ruby-如何以表格格式快速打印Ruby哈希值？，我们在StackOverflow上找到一个类似的问题：

  5. ruby - 在 RUBY 上的 PADRINO 框架上使用 RSPEC 进行测试的教程 - 2

    我是Ruby新手，并被要求在我们的新项目中使用它。我们还被要求使用Padrino(Sinatra)作为后端/框架。我们被要求使用Rspec进行测试。我一直在寻找可以指导在Padrino上使用RspecforRuby的教程。我得到的主要是引用RoR。但是，我需要RubyonPadrino。请在任何入门/指南/引用/讨论等方面指导我。如有不妥之处请指正。可能是我没有针对我的问题搜索正确的词/短语组合。我正在使用Ruby1.9.3和Padrinov.0.10.6。注意:我还提到了SOquestion,但它没有帮助。 最佳答案 我没用过Pa

  6. 电脑启动后显示器黑屏怎么办？排查下面4个问题，快速解决 - 2

    电脑启动出现显示器黑屏是一个相当常见的问题。如果您遇到了这个问题，不要惊慌，因为它有很多可能的原因，可以采取一些简单的措施来解决它。在本文中，小编将介绍下面4种常见的电脑启动后显示器黑屏的原因，排查这些原因，快速解决！ 演示机型：联想Ideapad700-15ISK-ISE系统版本：Windows10一、显示器问题如果出现电脑启动后显示器黑屏的情况。那么首先您需要检查一下显示器是否正常工作。您可以通过更换另一个显示器或将当前显示器连接到另一台计算机来检查显示器是否存在问题。如果问题仍然存在，那么您可以排除显示器故障的可能性。 二、显卡问题如果您的电脑配备了独立显卡，那么显卡故障也可能是导致电脑

  7. 区块链入门教程(6)--WeBASE-Front节点前置服务安装 - 2

    文章目录1.任务背景2.任务目标3.相关知识点4.任务实操4.1安装配置JDK4.2启动FISCOBCOS4.3下载解压WeBASE-Front4.4拷贝sdk证书文件4.5启动节点4.6访问节点4.7检查运行状态5.任务总结1.任务背景FISCOBCOS其实是有控制台管理工具，用来对区块链系统进行各种管理操作。但是对于初学者来说，还是可视化界面更友好，本节就来介绍WeBASE管理平台，这是一款微众银行开源的自研区块链中间件平台，可以降低区块链使用的门槛，大幅提高区块链应用的开发效率。微众银行是腾讯牵头设立的民营银行，在国内民营银行里还是比较出名的。微众银行参与FISCOBCOS生态建设，一定

  8. ruby-on-rails - rails 教程 : Putting flash messages in partial yields error "undefined method ` each' for nil:NilClass"? - 2

    这个问题在这里已经有了答案:关闭10年前。PossibleDuplicate:FlashMessagesinPartials(Rails3)我正在做MichaelHartl的Railstutorial和listing7.26将flash消息添加到应用程序布局:...">...这很好用。但是，我试图通过在我的部分文件夹中创建一个_flash.html.erb来清理这段代码...">-->...并且比使用......在我的应用程序布局中，我的所有Rspec测试开始失败，每个测试都显示以下消息:Failure/Error:before{visitsignup_path}ActionView:

  9. ruby - 使单元测试快速失败以进行突变测试 - 2

    mutationtesting遇到一个问题是它很慢，因为默认情况下您会为每个生成的突变执行完整的测试运行(测试文件或一组测试文件)。加快突变测试的一种方法是，一旦遇到单一故障(但仅在突变测试期间)，就停止对给定突变体的测试运行。更好的做法是让变异测试者记住杀死最后一个变异体的第一个测试是什么，并将其首先交给下一个变异体。ruby中是否有任何东西可以做这些事情，或者我最好的选择是开始猴子修补？(是的，我知道单元测试应该很快。显示所有失败的测试在突变测试之外很有用，因为它不仅可以帮助您识别出问题，还可以查明哪里出了问题)编辑:我目前正在对测试/单元使用heckle。如果测试/单元不可能记住

  10. ruby-on-rails - Ruby on Rails 教程 - 5.26 - Sublime Text "Unable to Save"新文件 "spec/support/utilities.rb" - 2

    我正在使用SublimeText2，同时遵循MichaelHartl的RubyonRails教程。可以在http://ruby.railstutorial.org/book/ruby-on-rails-tutorial找到我所指的教程的具体部分。(ctrl+F“list5.26”)。我能够创建规范/支持文件。但是，在尝试创建spec/support/utilities.rb文件时，我收到消息“无法保存~/rails_projects/sample_app/spec/support/utilities.rb”。有人知道为什么会这样吗？SublimeText论坛上有人似乎遇到了完全相同的问

随机推荐