OpenLayer库的学习入门总结

news2024/12/23 17:43:10

前言：

作者跟随视频学习ol库的调用与功能实现，进行初步总结与回顾。

声明：参考新中地的文档，进行作者日后复习再次学习的简化。

1、WebGIS简介

GIS的核心概念

GIS（Geographic Information System）是一种用于存储、分析、管理和展示地理数据的计算机系统。以下是 GIS 中的一些核心概念：

  1. 坐标系：地理数据通常以某种坐标系的形式存储，如经纬度坐标系或投影坐标系。
  2. 地理数据：GIS 中的数据是具有地理上的位置信息的数据，如地图、地形、道路、建筑物、人口数据等。
  3. 地图投影：地图投影是将三维地球表示为二维地图的过程。
  4. 叠加分析：叠加分析是在一张地图上查看多个图层的分析，以探究其相互关系。
  5. 空间分析：空间分析是指使用地理数据分析空间关系，如距离、面积和方位等。
  6. 地理信息数据库：GIS 的核心是地理信息数据库，用于存储和管理地理数据。
  7. 可视化：GIS 的目的之一是提供可视化，以方便人们更好地理解地理数据。

Openlayers的核心概念:

1、一张Map是由很多Layer图层组成的。

2、一个Layer对应一个Source矢量数据源

3、一个Source由很多Feature组成

4、Feature是Geometry和Style组成

OpenLayers是一个开源的地图显示库，它是基于JavaScript语言实现的。下面是OpenLayers的核心概念：

  1. Map: 地图是一个可视化的容器，在其中显示地图内容。
  2. Layer: 图层是地图中显示的一个独立的数据集。OpenLayers支持多种类型的图层，如影像图层，矢量图层，瓦片图层等。
  3. Source是 图层数据的来源，表示图层显示的内容。

"Source"是一个抽象的概念，它是用来获取图层数据的。OpenLayers支持多种不同类型的数据源，如：

  1. Image: 影像图像数据源，适用于显示静态的影像图像数据。
  2. Tile: 瓦片数据源，适用于显示瓦片数据，例如在线地图服务。
  3. Vector: 矢量数据源，适用于显示矢量数据，例如GeoJSON，KML等。

每个数据源都有其特定的配置选项，例如瓦片数据源需要指定瓦片地址模板，而矢量数据源需要指定矢量数据的URL。

通过选择不同的数据源类型，并配置相应的参数，可以实现多种类型的图层显示效果。因此，"source"在OpenLayers中是一个很重要的概念，它决定了图层显示的内容。

  1. View: 视图是地图的显示范围，包括地图的中心点，缩放级别，显示角度等。
  2. Projection: 投影是一种将地理坐标映射到平面坐标系上的方法。OpenLayers支持多种投影系统，如WGS 84，Web Mercator等。
  3. Feature: 特征是地图上一个独立的显示对象，如点，线，面等。
  4. Style: 样式是控制特征显示的方式的方法，如颜色，形状，大小等。

这些概念是OpenLayers的核心概念，通过灵活的配置和扩展，可以实现复杂的地图显示效果。

2、初始化地图

1、导入第三方依赖

<link rel="stylesheet" href="https://lib.baomitu.com/ol3/4.6.5/ol.css">
<script src="https://lib.baomitu.com/ol3/4.6.5/ol.js"></script>

2、初始化地图

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://lib.baomitu.com/ol3/4.6.5/ol.css">
    <script src="https://lib.baomitu.com/ol3/4.6.5/ol.js"></script>
    <style>
      *{margin:0;padding:0}
      #map{
        width:100vw;
        height: 100vh;
      }
    </style>
  </head>

  <body>
    <div id="map">
    </div>
    <script>
      const gaode = new ol.layer.Tile({
        title: "高德地图",
        source: new ol.source.XYZ({
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
          wrapX: false
        })
      });
      const map = new ol.Map({
        target: "map",
        layers: [
          gaode
        ],
        view:new ol.View({
          center:[114.30,30.50],
          zoom:12,
          projection:'EPSG:4326'
        })
      })
    </script>
  </body>
</html>

3、地图参数解释

1、参数target：制定初始化的地图设置到html页面上的哪一个DOM元素上

2、参数layers：

通过这个参数的名字我可以推断一个map可以设置多个layer，图层是构成openlayers的基本单位，地图是由多个layer组成的，这种设计类似于Photoshop里面的图层，多个图层是可以叠加的，在最上面的会覆盖下面的。

3、参数view：视图是设置地图的显示范围，包括中心点，放大级别，坐标

4、EPSG:4326和 EPSG:3857的区别

EPSG:4326 和 EPSG:3857 是两个常用的坐标参考系代码，用于在 GIS 中表示地理位置。它们的主要区别如下：

  • EPSG:4326 表示一个地理坐标系，使用经纬度来表示地理位置，通常用于地理位置的显示和制图。
  • EPSG:3857 表示一个 Web 墨卡托坐标系，使用平面墨卡托投影来表示地理位置。

因此，两个坐标系的主要区别在于它们使用的坐标系统不同：EPSG:4326 使用的是经纬度，而 EPSG:3857 使用的是平面墨卡托投影。

EPSG:3857 在在线地图中被广泛使用，因为它能够在 Web 地图上提供更高的精度和更好的分辨率。然而，EPSG:4326 在网络上传输地理位置信息时被更多地使用，因为它使用的是标准的地理坐标系。

总的来说，选择使用哪个坐标系取决于你的应用需求：如果需要高精度和分辨率，选择 EPSG:3857；如果需要标准的地理坐标系，选择 EPSG:4326

3、地图控件

/* 视图跳转控件 */
const ZoomToExtent = new ol.control.ZoomToExtent({
      extent: [110, 30, 160, 30],
})
map.addControl(ZoomToExtent)
/* 放大缩小控件 */
const zoomslider = new ol.control.ZoomSlider();
map.addControl(zoomslider)
//全屏控件
const fullScreen = new ol.control.FullScreen();
map.addControl(fullScreen)

4、设置矢量图形

/* 1、构建要素 */
var point = new ol.Feature({
      geometry: new ol.geom.Point([114.30, 30.50])
})
let style = new ol.style.Style({
      image: new ol.style.Circle({
            radius: 10,
            fill: new ol.style.Fill({
                  color: "#ff2d51"
            }),
            stroke: new ol.style.Stroke({
                  color: "#333",
                  width: 2
            })
      })
})
point.setStyle(style);
/* 2、将要素添加到矢量数据源 */
const source = new ol.source.Vector({
      features: [point]
})
/* 3、将矢量数据源添加到矢量图层 */
const layer = new ol.layer.Vector({
      source
})
/* 4、将矢量图层添加到地图容器 */
map.addLayer(layer)

5、加载geojson数据

1、geojson定义

geojson数据是矢量数据，是包含地理信息的json数据，格式是以key:value的形式存在的。后缀以geojson结尾

2、geojson设置一个点要素

2-1、设置点要素
var data = {
      type: "FeatureCollection",
      features: [
            {
                  type: "Feature",
                  geometry: {
                        type: "Point",
                        coordinates: [114.30, 30.50]
                  }
            }
      ]
}
var source = new ol.source.Vector({
      /* 将geojson数据设置给实例数据源 */
      features: new ol.format.GeoJSON().readFeatures(data)
})
var layer = new ol.layer.Vector({
      source
})
map.addLayer(layer);

设置样式

2-2、设置线
2-3、设置Polygon区
var data = {
      type: "FeatureCollection",
      features: [
            {
                  type: "Feature",
                  geometry: {
                        type: "Polygon",
                        coordinates: [[[114.30, 30.50], [116, 30.50], [116, 30]]]
                  }
            }
      ]
}
//设置样式
const style = new ol.style.Style({
      //边线颜色
      stroke: new ol.style.Stroke({
            color: '#ff2d51',
            width: 2
      }),
      //设置填充色
      fill: new ol.style.Fill({
            color: "rgba(50, 50, 50, 0.3)"
      })

})

3、加载本地geojson文件的数据

const source = new ol.source.Vector({
    url: './data/map.geojson',
    format: new ol.format.GeoJSON()
})
const layer = new ol.layer.Vector({
    source
})
map.addLayer(layer)

4、加载网络数据

const source = new ol.source.Vector({
    url: 'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=420100',
    format: new ol.format.GeoJSON()
})
const layer = new ol.layer.Vector({
    source
})
map.addLayer(layer)

6、地图事件及漫游

1、地图点击事件

map.on("click",(evt)=>{
      var position = evt.coordinate;
      console.log(position)
})
//...初始化地图map
var source = new ol.source.Vector({

});
var layer = new ol.layer.Vector({
      source
})
map.addLayer(layer);
map.on("click", (evt) => {
      var position = evt.coordinate;
      var point = new ol.Feature({
            geometry: new ol.geom.Point(position)
      })
      source.addFeature(point)
})

2、漫游

核心API map.getView.animate()

map.on("click", (evt) => {
      var position = evt.coordinate;
      map.getView().animate({
            center: position,
            zoom: 10,
            duration: 2000,
      })
})

总结：多看文档！！减少单词拼写，单词大小写错误带来的影响！！！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1282973.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

干货|水表基础知识大全

干货|水表基础知识大全

第一部分 水表基础知识 第一节 水表的作用 水表:是用来记录流经自来水管道中水量的一种计量器具,也称为计量器具。 1、水表的发展简史 1825年英国的克路斯发明了真正具有仪表特征的平衡罐式水表以来&#xff0c;水表的发展已有近二百年的历史。期间&#xff0c;水表的结构…
阅读更多...
比较简洁的个人简历精选6篇

比较简洁的个人简历精选6篇

为大家精选了6篇高质量简历模板案例&#xff0c;简洁、专业、有效&#xff0c;助力大家在众多求职者中脱颖而出&#xff0c;轻松斩获心仪职位&#xff0c;让您的求职之路更加顺畅。 简洁的简历模板下载&#xff08;可在线编辑制作&#xff09;&#xff1a;来幻主简历&#xff…
阅读更多...
三十七、XA模式

三十七、XA模式

目录 一、XA模式原理 在XA模式中&#xff0c;一个事务通常被分为两个阶段&#xff1a; 二、Seata的XA模式 RM一阶段的工作&#xff1a; TC一阶段的工作&#xff1a; RM二阶段的工作&#xff1a; 1、优点&#xff1a; 2、缺点&#xff1a; 三、实现XA模式 1、修改yml文…
阅读更多...
深入解析Linux进程管理机制

深入解析Linux进程管理机制

本文将深入探讨Linux操作系统中的进程管理机制&#xff0c;重点介绍进程的创建、调度和终止过程&#xff0c;以及进程间的通信方式。通过对进程相关概念和机制的全面解析&#xff0c;读者将能够更好地理解和应用Linux进程管理&#xff0c;提升系统的性能和可靠性。 引言 Linux作…
阅读更多...
Wireshark中的ICMP协议包分析

Wireshark中的ICMP协议包分析

接上文&#xff1a; 打开ARP响应数据包报文 通过分析可知&#xff0c; 1.ICMP协议尽管并不传输数据内容&#xff0c;仍然归于网络层&#xff0c;但是基于ip协议。 2.主机发送一个ICMP Echo Request的包&#xff0c;接受方在可正常响应的情况下&#xff0c;返回一个ICMP Echo R…
阅读更多...
vue项目切换菜单添加特效

vue项目切换菜单添加特效

我这边mian/index.vue是配置二级路由出口 关于导航的过渡特效&#xff0c;vue官网有教程 在<style scoped lang"scss"></style>里添加自己想要的特效就可以
阅读更多...
vscode的eslint检查代码格式不严谨的快速修复

vscode的eslint检查代码格式不严谨的快速修复

问题&#xff1a; 原因&#xff1a;复制的代码&#xff0c;esLint检查代码格式不正确。或者写的代码位置不严谨&#xff0c;总是提示 解决 设置在Ctrl S保存时自动格式化代码 1、vscode设置 2、点击右上角&#xff0c;切换json模式 3、添加设置 "editor.codeActionsOn…
阅读更多...
焊接专业个人简历（通用25篇）

焊接专业个人简历（通用25篇）

如果大家想在焊接行业的求职中脱颖而出&#xff0c;轻松斩获心仪职位&#xff0c;参考这25篇通用的焊接专业个人简历案例&#xff0c;无论您是初学者还是资深焊工&#xff0c;都能从中找到适合自己的简历内容。参考这些简历&#xff0c;让您的求职之路更加顺畅。 焊接专业个人…
阅读更多...
C++继承（详解）

C++继承（详解）

一、继承的概念 1.1、继承的概念 继承(inheritance)机制是面向对象程序设计使代码可以复用的最重要的手段&#xff0c;它允许程序员在保持原有类特性的基础上进行扩展&#xff0c;增加功能&#xff0c;这样产生新的类&#xff0c;称派生类。继承呈现了面向对象程序设计的层次结…
阅读更多...
国际语音呼叫中心的优势有哪些？

国际语音呼叫中心的优势有哪些？

国际语音呼叫中心是一种专业化的客户服务方式&#xff0c;它采用先进的语音技术和人工智能算法&#xff0c;为企业提供高效、准确、优质的服务。在当下商业竞争中&#xff0c;客户服务质量是企业成功的重要因素之一。而国际语音呼叫中心可以帮助企业提高客户满意度、增强客户忠…
阅读更多...
Springboot养老院信息管理系统的开发-计算机毕设 附源码 27500

Springboot养老院信息管理系统的开发-计算机毕设 附源码 27500

Springboot养老院信息管理系统的开发 摘 要 随着互联网趋势的到来&#xff0c;各行各业都在考虑利用互联网将自己推广出去&#xff0c;最好方式就是建立自己的互联网系统&#xff0c;并对其进行维护和管理。在现实运用中&#xff0c;应用软件的工作规则和开发步骤&#xff0c;…
阅读更多...
正运动技术EtherCAT扩展模块接线参考以及使用流程

正运动技术EtherCAT扩展模块接线参考以及使用流程

本文以正运动扩展模块EIO16084为例 一、EtherCAT扩展模块接线参考 EIO16084数字量扩展模块为单电源供电&#xff0c;主电源就可以给IO供电&#xff0c;主电源采用24V直流电源。 EIO16084扩展模块在扩展接线完成后&#xff0c;不需要进行进行二次开发&#xff0c;只需手动在E…
阅读更多...
Windows系列：Zabbix agent一键部署-windows版本（windows 安装zabbix客户端安装、bat文件修改文件内容）

Windows系列：Zabbix agent一键部署-windows版本（windows 安装zabbix客户端安装、bat文件修改文件内容）

Zabbix agent一键部署-windows版本&#xff08;windows 安装zabbix客户端安装、bat文件修改文件内容&#xff09; 一. Zabbix agent一键部署-windows版本二. windows 安装zabbix客户端安装1.下载安装zabbix agent2.配置zabbix agent2.1 修改配置文件2.2 将zabbix agent安装为wi…
阅读更多...
备战春招——12.04 算法

备战春招——12.04 算法

哈希表 哈希表主要是使用 map、unordered_map、set、unorerdered_set、multi_&#xff0c;完成映射操作&#xff0c;主要是相应的函数。map和set是有序的&#xff0c;使用的是树的形式&#xff0c;unordered_map和unordered_set使用的是散列比表的&#xff0c;无序。 相应函数…
阅读更多...
Ubuntu20.04/Linux中常用软件的安装

Ubuntu20.04/Linux中常用软件的安装

文章目录 一、安裝与卸载微信二、安裝与卸载QQ三、安装Chrome浏览器并加入apt更新四、安裝VScode4.1 安装常用插件4.2 减小Ipch缓存&#xff1a; 五、安装代码对比工具Meld六、安裝WPS七、安装PDF阅读器Foxit Reader八、安装文献管理软件Zotero九、安装有道云笔记十、安装远程控…
阅读更多...
多线程详解1-互斥锁，读写锁，生产者消费者模型

多线程详解1-互斥锁，读写锁，生产者消费者模型

文章目录 互斥量mutex互斥量基本原理死锁代码实现 读写锁基本概念为什么需要读写锁&#xff1f;相关函数读写锁实现 生产-消费者模型PV操作条件变量函数生产者消费者问题生产-消费者模型实现代码 互斥量mutex 互斥量基本原理 Linux系统编程 —互斥量mutex 互斥量mutex 前文提…
阅读更多...
webpack学习-1.起步

webpack学习-1.起步

webpack学习-1.起步 1.基础设置2.配置文件的引入3.总结 1.基础设置 首先 webpack是干嘛的呢&#xff0c;用官网的一张图 Webpack 是一个现代的静态模块打包工具。它主要用于将前端应用程序中的各种资源&#xff08;例如 JavaScript、CSS、图片等&#xff09;打包成一个或多个…
阅读更多...
Docker Compose简单入门

Docker Compose简单入门

Docker Compose 简介 Docker Compose 是一个编排多容器发布式部署的工具&#xff0c;提供命令集管理容器化应用的完整开发周期&#xff0c;包括服务构建&#xff0c;启动和停止。 Docker Compose 真正的作用是在一个文件&#xff08;docker-compose.yml&#xff09;中定义并运…
阅读更多...
《opencv实用探索·九》中值滤波简单理解

《opencv实用探索·九》中值滤波简单理解

1、引言 均值滤波、方框滤波、高斯滤波&#xff0c;都是线性滤波方式。由于线性滤波的结果是所有像素值的线性组合&#xff0c;因此含有噪声的像素也会被考虑进去&#xff0c;噪声不会被消除&#xff0c;而是以更柔和的方式存在。这时使用非线性滤波效果可能会更好。中值滤波是…
阅读更多...
代码随想录第二十一天（一刷C语言）|回溯算法组合

代码随想录第二十一天（一刷C语言）|回溯算法组合

创作目的&#xff1a;为了方便自己后续复习重点&#xff0c;以及养成写博客的习惯。 一、回溯算法 1、种类 排列、组合、分割、子集、棋盘问题 2、回溯步骤 &#xff08;0&#xff09;回溯抽象 回溯法解决的问题均可以抽象为树形结构&#xff08;N叉树&#xff09; &…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023