OpenLayer库的学习入门总结

前言：

作者跟随视频学习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,
      })
})

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

第 374 场 LeetCode 周赛题解

第 374 场 LeetCode 周赛题解

A 找出峰值 枚举 class Solution { public:vector<int> findPeaks(vector<int> &mountain) {int n mountain.size();vector<int> res;for (int i 1; i < n - 1; i)if (mountain[i] > mountain[i - 1] && mountain[i] > mountain[i 1…
阅读更多...
中断方式的数据接收2

中断方式的数据接收2

Echo实验 回忆之前的实验因为数据处理的过程可以瞬间完成所以可以把数据处理的操作放在中断服务函数中执行 但是数据处理要是时间过长就将数据缓存处理 当使用中断方式接收数据的时候 一般有两种方式 数据处理的时间较短可放在中断服务函数内处理&#xff08;就地处理&#…
阅读更多...
【Linux--进程】

【Linux--进程】

目录 一、基本概念1.1描述进程-PCB1.2task_struct中内容分类 二、了解进程2.1查看进程2.2通过系统调用获取进程标识符 三、fork创建进程3.1fork()函数3.2写时拷贝 四、进程的状态4.1操作系统学科里的进程状态&#xff08;运行、阻塞、挂起&#xff09;4.具体的Linux状态是如何维…
阅读更多...
LinuxBasicsForHackers笔记 --常用Linux命令

LinuxBasicsForHackers笔记 --常用Linux命令

在终端中修改用户密码命令&#xff1a;passwd Linux的文件系统是逻辑文件系统。 Linux基本命令 pwd – print working directory. 返回你当前所在目录结构中的位置。 whoami – 查看您当前登录的用户身份。 cd – change directory. 从终端更改目录。 cd / – 移动到根目录…
阅读更多...
大数据实战项目_电商推荐系统

大数据实战项目_电商推荐系统

一、 项目介绍 HadoopSpark (Python)Scala SparkSQLSparkStreaming MongoDB Redis Kafka Flume ( SpringMVC vue) 1 项目介绍 1.1 项目系统架构 项目以推荐系统建设领域知名的经过修改过的中文亚马逊电商数据集作为依托&#xff0c;以某电商网站真实业务数据架构为基…
阅读更多...
openGauss学习笔记-139 openGauss 数据库运维-例行维护-检查应用连接数

openGauss学习笔记-139 openGauss 数据库运维-例行维护-检查应用连接数

文章目录 openGauss学习笔记-139 openGauss 数据库运维-例行维护-检查应用连接数139.1 操作步骤139.2 异常处理 openGauss学习笔记-139 openGauss 数据库运维-例行维护-检查应用连接数 如果应用程序与数据库的连接数超过最大值&#xff0c;则新的连接无法建立。建议每天检查连…
阅读更多...
淘宝商家店铺注册流程

淘宝商家店铺注册流程

如果本身已经有淘宝账号了&#xff0c;直接从第三步骤&#xff1a;创建店铺开始就可以了。一、注册淘宝账号、支付宝账号 首先,如果你有买家账号,是可以直接拿来开店的&#xff0c;不用单独在注册淘宝账号开店。 注意事项: 1:淘宝账号注册后,不能修改,如果会员名有写错情况&a…
阅读更多...
【多线程】-- 10线程同步synchronized方法/块

【多线程】-- 10线程同步synchronized方法/块

多线程 6 线程同步 同步方法 由于我们可以通过private关键字来保证数据对象只能被方法访问&#xff0c;所以我们只需要针对方法提出一套机制&#xff0c;这套机制就是synchronized关键字&#xff0c;它包括以下两种用法&#xff1a; ​ synchronized方法和synchronized块 …
阅读更多...
初始化 Clouder Manager 数据库报错Unable to find JDBC driver for database type: MySQL

初始化 Clouder Manager 数据库报错Unable to find JDBC driver for database type: MySQL

CDH部署初始化 Clouder Manager 数据库报错。 解决方法&#xff1a; 把mysql驱动放到 /usr/share/java/目录下面(没有的新建&#xff09;&#xff0c;驱动名称也要修改为mysql-connector-java.jar 再次执行后成功&#xff1a; sudo /opt/cloudera/cm/schema/scm_prepare_data…
阅读更多...
javaweb mybatis（手动jar包）

javaweb mybatis（手动jar包）

基础&#xff1a;https://blog.csdn.net/qq_67832732/article/details/134764134 条件查询 在映射文件的SQL配置中配置参数 使用parameterType来指定参数类型 使用#{参数名}来接收参数的值 parameterType"string" 表示sql语句需要一个参数&#xff0c;类型为字符…
阅读更多...
串行口的工作原理及应用

串行口的工作原理及应用

前言 对最近串行口的学习进行一下总结。 参考链接 【51单片机】串口通信 - 知乎 (zhihu.com) LED数码管的静态显示与动态显示&#xff08;KeilProteus&#xff09;_proteus数码管显示-CSDN博客 定时器/计数器的应用-CSDN博客 74ls164_百度百科 (baidu.com) 74ls165中文资…
阅读更多...
Kafka 的特点和优势

Kafka 的特点和优势

Apache Kafka 作为一款分布式流处理平台&#xff0c;以其独特的特点和卓越的优势成为实时数据处理领域的瑰宝。本文将深入研究 Kafka 的各项特点和优势&#xff0c;并通过详实的示例代码展示其在不同场景下的强大应用。 高吞吐量和水平扩展 Kafka 的设计注重高吞吐量和水平扩…
阅读更多...
使用外部编辑器编辑执行MAXScript代码的方法

使用外部编辑器编辑执行MAXScript代码的方法

如何使用外部编辑器编辑执行MAXScript代码&#xff1f;这里我们要借助一个3dMax插件程序MXSCOM&#xff0c;MXSCOM允许从外部代码编辑器编辑和执行3ds Max MaxScript和Python文件。 2005年&#xff0c;Simon Feltman发布了第一个MXSCOM&#xff0c;这是一个小型的Visual Basic …
阅读更多...
【Delphi】实现彩色日志显示框

【Delphi】实现彩色日志显示框

目录 一、前言 二、实现方法 1. 第一步 2. 第二步 3. 第三步 三、主程序代码 四、下载 1. 可执行程序 2. 程序源代码 一、前言 在用Delphi做日常开发的时候&#xff0c;经常需要显示程序运行的日志&#xff0c;一般我们会使用TMemo&#xff0c;使用起来简单&#xff0c…
阅读更多...
根据关键词写作文章的软件，根据标题写作文章的工具

根据关键词写作文章的软件，根据标题写作文章的工具

在当今信息化时代&#xff0c;人工智能技术的飞速发展&#xff0c;智能AI写作工具逐渐成为文案创作者的得力助手。这些工具不仅能够根据标题迅速生成文章&#xff0c;而且在提高创作效率的同时&#xff0c;也为我们节省了大量时间和精力。 人工智能的基本原理&#xff1a;人工智…
阅读更多...
Python遥感开发之快速判断TIF数据为空

Python遥感开发之快速判断TIF数据为空

Python遥感开发之快速判断TIF数据为空 前言&#xff1a;介绍一下如何使用python下的gdal读取tif数据的时候&#xff0c;快速判断该tif数据是否为空&#xff0c;如果为空的话就把当前的tif删掉。 如图所示&#xff0c;通过arcgis查看箭头指向的为空值。 仅通过文件的大小无法判…
阅读更多...
java 工具类: CompareUtils（比较对象字段值变化）

java 工具类: CompareUtils（比较对象字段值变化）

一、前言 我们在工作中&#xff0c;可能会在日志中记录数据的变化情况或者在公共处理的数据增加一个日志页面&#xff0c;记录每次修改的变化。我们可以根据CompareUtils工具类比较数据前后发生了怎样的变化, 这样我们就可以知道数据做了哪些改变. 二、条件限制 在写这个通用…
阅读更多...
【Leetcode题单】（01 数组篇）刷题关键点总结01【数组的遍历】

【Leetcode题单】（01 数组篇）刷题关键点总结01【数组的遍历】

【Leetcode题单】&#xff08;01 数组篇&#xff09;刷题关键点总结01【数组的遍历】&#xff08;4题&#xff09; Easy数组的遍历485. 最大连续 1 的个数 Easy495. 提莫攻击 Easy414. 第三大的数 Easy628. 三个数的最大乘积 Easy 大家好&#xff0c;这里是新开的LeetCode刷题系…
阅读更多...
【数组和函数实战: 斗地主游戏】

【数组和函数实战: 斗地主游戏】

目录 1. 玩法说明 2. 分析和设计 3. 代码实现 4. 游戏演示1. 玩法说明 一副54张牌,3最小,两个王最大,其实是2,和上面一样从大到小排列 2. 分析和设计 2.1 分析和设计 常量和变量设计 一副牌有54张,有牌的数值和花色,可以分别用两个数组来存储,card为卡牌表示的数值,color为…
阅读更多...
Git 标签管理

Git 标签管理

前言 标签 tag&#xff0c;就相当于对 某一次的 commit 做一个标识&#xff0c;起了一个别名&#xff0c;例如&#xff1a;在某个项目发布版本的时候&#xff0c;可针对最后一次 commit 起一个别名 v1.0 来标识这一次的commit。tag 的作用&#xff1a;commit id 相对于 tag 是很…
阅读更多...
最新文章

Copyright @ 2022~2023