汤姆猫不是猫-CSDN博客

原创 Vue+OpenLayers7入门到实战目录，OpenLayers7中文文档，OpenLayers7中文手册，OpenLayers7中文教程，OpenLayers7文档pdf

本篇作为《Vue+OpenLayers7入门到实战》所有文章的二合一汇总目录，方便查找。本专栏源码是由OpenLayers7.x版本结合Vue框架编写。本专栏从Vue搭建脚手架到如何引入OpenLayers7依赖的每一步详细新手教程，再到通过各种入门案例和综合性的实战案例，带领大家快速上手Vue+OpenLayers7开发。

2024-03-04 17:31:33 876 1

原创 Vue+OpenLayers6从入门到实战进阶案例汇总目录，Vue+OpenLayers6地图整合教程，OpenLayers6中文文档，OpenLayers6中文手册

本篇作为《Vue+OpenLayers入门教程》和《Vue+OpenLayers实战进阶案例》所有文章的二合一汇总目录，方便查找。> 本专栏源码是由OpenLayers结合Vue框架编写。> 本专栏从Vue搭建脚手架到如何引入OpenLayers依赖的每一步详细新手教程，再到通过各种入门案例和综合性的实战案例，带领大家快速上手Vue+OpenLayers开发。

2023-10-31 16:05:04 1867 4

原创 Vue+OpenLayers7入门到实战，OpenLayers加载GeoJson数据并叠加GeoJson中的要素到地图上

本章介绍如何使用OpenLayers7在地图上加载GeoJson数据并叠加GeoJson中的要素到OpenLayers矢量图层上。GeoJson数据格式可以参考博主另一篇文章《GIS开发入门，GeoJSON是什么？GeoJSON格式标准介绍》，那么废话少谈，让我们立刻开始加载GeoJson数据并叠加要素到地图上。

2024-04-23 16:53:13 19

原创适合GIS专业学生和前端webgis小白快速上手的Vue+OpenLayers6入门到实战教程，OpenLayers6中文文档手册

Gis开发入门，OpenLayers、Leaflet、Maplibre-gl和Cesiumjs地图引擎介绍以及几种地图服务vms、vmts介绍OpenLayers介绍，相比较其他地图引擎有什么优点OpenLayers7.x版本和6.x版本有什么区别，是否需要升级到OpenLayers7版本？OpenLayers6实战：OpenLayers创建自定义控件，以创建一个地图复位控件为例OpenLayers6实战，OpenLayers创建自定义鹰眼控件，自定义鹰眼控件样式，调整鹰眼控件位置、大小、文字和按钮等样式。

2024-04-23 10:23:35 756

原创 OpenLayers6实战，OpenLayers鼠标拖拽方式绘制半圆环形（半圆扇形）

本章讲解如何使用OpenLayers特殊图形绘制，通过鼠标拖拽方式来绘制出半圆环形（半圆扇形）的功能，效果像磁铁一样的半圆弧。上一章中我们以及实现了四分之一圆环形的特殊图形绘制《OpenLayers6实战，OpenLayers实现鼠标拖拽方式绘制环形（四分之一圆环），OpenLayers特殊图形绘制》，本章在上一章章基础上修改而成。

2024-04-22 17:05:42 131

原创 OpenLayers6实战，OpenLayers实现鼠标拖拽方式绘制环形（四分之一圆环），OpenLayers特殊图形绘制

本章讲解如何使用OpenLayers在地图上实现鼠标拖拽方式绘制环形（四分之一圆环）的功能。

2024-04-22 16:25:11 122

原创 OpenLayers6实战，OpenLayers实现鼠标拖拽方式绘制空心圆环

本章讲解OpenLayers特殊图形绘制，也即使用OpenLayers实现鼠标拖拽方式绘制空心圆环的功能。

2024-04-19 17:06:40 416

原创 OpenLayers9.1.0版本正式发布，OpenLayers9.1.0值得升级吗？9.1.0版相比9.0.0版本又更新了哪些内容？OpenLayers9相较于OpenLayers8更新了哪些内容？

OpenLayers9.1.0版本正式发布，，最近OpenLayers大版本迭代很快，但是几乎没有什么重大的功能更新。比如这次的OpenLayers9.1.0几乎都是修修补补，没有功能更改和升级。

2024-04-19 14:42:53 858

原创 Vue+OpenLayers7入门到实战：OpenLayers加载wkt格式数据，OpenLayers解析wkt格式的要素数据并渲染到地图上

本章介绍如何使用OpenLayers7在地图上加载并解析wkt格式数据，以及渲染wkt格式的要素数据到地图上的功能。使用Point（点）、（LINESTRING）线，和（POLYGON）多变形的wkt数据进行演示。wkt介绍请参考博主另一篇文章《GIS入门，WKT格式详解》

2024-04-17 22:02:03 136

原创 Vue+OpenLayers7入门专栏目录，OpenLayers7中文文档，OpenLayers7中文手册api，OpenLayers7中文教程

本篇作为《Vue+OpenLayers7入门教程》所有文章的二合一汇总目录，方便查找。本专栏源码是由OpenLayers7.x版本结合Vue框架编写。本专栏基本上每章都有详细的源代码和运行示例以供参考，且保证每章代码都可以正常运行，非常适合入门读者从零开始学习。本专栏从Vue搭建脚手架到如何引入OpenLayers7依赖的每一步详细新手教程，再到通过各种简单的入门案例带领大家快速上手Vue+OpenLayers7开发。

2024-04-17 21:26:58 389 1

原创 Vue+OpenLayers7入门到实战：OpenLayers计算matrixIds和resolutions方式加载WMTS地图服务，不需要解析WMTSCapabilities文档方式加载WMTS

本章介绍如何使用OpenLayers7在地图上实现通过计算matrixIds和resolutions方式加载WMTS地图服务，不需要解析WMTSCapabilities文档方式加载WMTS地图服务的功能。在本章之前，已经写过《Vue+OpenLayers7入门到实战：OpenLayers通过WMTSCapabilities.xml加载GeoServer发布的标准wmts地图服务。

2024-04-16 10:02:37 134

原创 Vue+OpenLayers7入门到实战：OpenLayers通过WMTSCapabilities.xml加载GeoServer发布的标准wmts地图服务

本章介绍如何使用OpenLayers7在地图上实现通过WMTSCapabilities.xml加载GeoServer发布的标准wmts地图服务的功能。1、什么是wmts（Web地图平铺服务）？OGC Web Map Tile Service实施标准 (WMTS)定义一组接口，用于使用具有预定义内容、范围和分辨率的分幅图像对空间参考数据的地图分幅进行基于web的请求。本标准包括WMTS规范（“WMTS规范”）以及附带文档，如概要文件和XML文档。

2024-04-16 09:58:06 118

原创 GIS入门，Java不使用任何第三方库实现射线穿越法计算某个点是否与多边形相交，比普通射线法提升了计算性能

在上一章中《GIS入门，Java不使用任何第三方库实现判断一个经纬度点是否在多个经纬度点组成的多边形内，计算某个点是否与多边形相交》，我们使用了一个最简单的算法“射线法”来计算一个点到是否与多边形相交，但是对于多边形非常多的顶点时，计算就会力有不逮。（Ray Crossing Algorithm）或（Ray Casting Algorithm）来更快的计算某个点是否与多边形相交。

2024-04-15 17:39:58 46 1

原创 GIS入门，Java不使用任何第三方库实现判断一个经纬度点是否在多个经纬度点组成的多边形内，计算某个点是否与多边形相交

本章记录Java实现“射线法”判断一个经纬度点是否在多个经纬度点组成的多边形内的算法，也就是检查某个经纬度点是否与该多边形相交。

2024-04-15 17:30:27 150 1

原创 OpenLayers6特殊图形绘制教程目录汇总文档，使用OpenLayers画点、线、多边形、圆形、半圆、椭圆、圆环、半圆环、环形扇形、三角形、矩形、平行四边形、梯形、菱形、五角星、六角形和箭头等图形

本章用于汇总OpenLayers地图中各种特殊图形绘制系列汇总目录。内容包含：点、线、多边形、圆形、半圆、四分之一圆、椭圆、圆环、半圆环、环形扇形、三角形、矩形、正方形、长方形、平行四边形、梯形、菱形、五角星、六角形（六芒星）以及箭头等等特殊图形。

2024-04-12 14:29:08 48

原创 OpenLayers6实战，OpenLayers鼠标拖拽方式绘制半圆形（半圆扇形）

本章讲解使用OpenLayers在地图上实现鼠标拖拽方式绘制半圆形（半圆扇形）

2024-04-12 14:12:11 196

原创 OpenLayers6实战，OpenLayers实现鼠标拖拽方式绘制椭圆

本周讲解使用OpenLayers在地图上实现鼠标拖拽方式绘制椭圆的功能。

2024-04-12 14:07:38 420

原创 OpenLayers6实战，OpenLayers实现鼠标拖拽方式绘制矩形（拖拽方式绘制长方形和正方形）

本章介绍使用OpenLayers在地图上实现鼠标拖拽方式绘制矩形（拖拽方式长方形和正方形）。OpenLayers本身是可以通过鼠标点击多个点的方式来绘制多边形的，当然也包括长方形和正方形，但是这种多边形绘制出来的图形并不是准确的“长方形”和“正方形”，多多少少都会有一些变形（形状不规则），而且也不好控制。本章就是为了解决上述问题，只需要通过鼠标拖拽方式就可以直接实时生成形状规则的“矩形”。

2024-04-11 17:41:16 132

原创 OpenLayers6实战，OpenLayers实现鼠标拖拽方式绘制平行四边形

本章介绍如何使用OpenLayers在地图上使用实现鼠标拖拽方式绘制平行四边形。

2024-04-11 17:33:39 131

原创 Vue+OpenLayers7入门到实战：OpenLayers加载WFS服务的要素资源数据并叠加到地图上

本章讲解如何使用OpenLayers6加载WFS服务的要素资源数据并叠加到地图上的功能。WFS是基于地理要素级别的数据共享和数据操作，WFS规范定义了若干基于地理要素（Feature）级别的数据操作接口，并以 HTTP 作为分布式计算平台。通过 WFS服务，客户端可以得到矢量数据格式描述的单个地理要素的空间数据或要素集的空间数据，并可以对单个地理要素进行编辑、删除、添加等数据操作。WFS采用 GML描述地理要素特征，根据用户请求的内容返回 GML描述的空间数据。

2024-04-08 19:22:31 40

原创 Vue+OpenLayers7入门到实战：OpenLayers实现地图原地旋转动画效果

本章介绍如何使用OpenLayers7在地图上实现地图原地旋转动画效果。

2024-04-08 19:17:21 138

原创 Vue+OpenLayers7入门到实战：OpenLayers实现鼠标拖拽方式绘制三角形，OpenLayers鼠标拖拽方式自定义绘制特殊图形

本章介绍如何使用OpenLayers7在地图上实现鼠标拖拽方式绘制三角形，OpenLayers鼠标拖拽方式自定义绘制特殊图形的功能。OpenLayers本身是可以通过多边形绘制来绘制自行绘制三角形的，但是这种绘制方式是通过鼠标点击每个点来实现线条链接的，不支持固定的三角形这种特殊图形绘制的。因此本章我们通过自定义OpenLayers的绘制事件，来让OpenLayers支持鼠标拖拽方式绘制三角形，让绘制三角形变得更加方便。

2024-04-07 15:09:29 120

原创 Vue+OpenLayers7入门到实战：OpenLayers如何销毁已经创建好的地图容器

本章介绍如何使用OpenLayers7在地图上如何销毁已经创建好的地图容器。在某些场景下，可能会需要销毁之前的地图，重新创建新的地图的需要，因此本章介绍一下在开始创建地图前如何先销毁之前的地图的功能。

2024-04-07 15:03:42 411

原创 OpenLayers6实战，OpenLayers实现鼠标拖拽方式绘制梯形

本章讲解如何使用OpenLayers实现鼠标拖拽方式绘制梯形。点击鼠标拖拽梯形，松开鼠标后绘制完成。

2024-04-03 17:32:12 139

原创 GIS入门，EPSG:3857介绍，纯JS如何实现简化得Web墨卡托投影的逆变换和高精度Web墨卡托投影逆变换转换EPSG:3857坐标成EPSG:4326坐标

EPSG:3857坐标系，也称为（Web Mercator projection），是一种用于Web地图的常见投影系统。它是由谷歌地图在2005年引入并广泛采用的。这个投影系统将地球表面的经纬度坐标转换为平面坐标，使得地图在Web上的显示更加方便和流畅。坐标系使用的是（Mercator projection），它将地球表面投影到一个平面上，以保持经线和纬线之间的角度不变。这意味着在墨卡托投影下，经线和纬线都是直线，而且纬度越高的地方，投影后的坐标值越大。尽管。

2024-04-03 09:58:29 187

原创 OpenLayers6实战，OpenLayers实现鼠标拖拽绘制三角形，OpenLayers自定义绘制特殊图形

本章讲解使用OpenLayers如何绘制三角形。OpenLayers本身是可以通过多边形绘制来绘制自行绘制三角形的，但是这种绘制方式是通过鼠标点击每个点来实现线条链接的，不支持固定的三角形这种特殊图形绘制的。因此本章我们通过自定义OpenLayers的绘制事件，来让OpenLayers支持鼠标拖拽方式绘制三角形，让绘制三角形变得更加方便。

2024-04-02 11:25:42 167 1

原创 OpenLayers6实战，OpenLayers实现鼠标拖拽方式绘制扇形，OpenLayers绘制特殊殊图形四分之一圆

本章讲解使用OpenLayers实现绘制扇形，绘制特殊殊图形扇形（也即：四分之一圆）的功能。本章代码是在绘制圆形的基础上扩展修改而成：圆形绘制可以参考：《OpenLayers6入门，OpenLayers图形绘制功能，OpenLayers实现在地图上绘制线段、圆形和多边形。

2024-04-02 11:06:53 348

原创 OpenLayers6实战，OpenLayers绘制六角形（六角星）图形，OpenLayers绘制特殊图形

本章讲解使用OpenLayers实现六角形（六角星）特殊图形的绘制功能。本章是在《OpenLayers6实战，OpenLayers绘制特殊图形，OpenLayers绘制四角形（菱形），OpenLayers绘制菱形》，《OpenLayers6实战，OpenLayers绘制五角星，OpenLayers绘制特殊图形，地图上画五角星》基础上扩展修改而成。

2024-04-01 17:18:05 140

原创 OpenLayers6实战，OpenLayers自定义overlay弹框拖拽事件，点击地图后弹框并使用鼠标拖拽overlay弹框到任意地图位置并在弹框内容实时显示经纬度位置

本章使用OpenLayers实现自定义overlay弹框拖拽事件，点击地图后弹框并使用鼠标拖拽overlay弹框到任意地图位置并在弹框内容实时显示经纬度位置的功能。本章在《OpenLayers6入门，OpenLayers地图鼠标点击事件使用，点击地图后弹框并显示当前位置经纬度》基础上增加overlay弹框拖拽事件。

2024-04-01 17:09:05 130

原创 GIS入门，Web墨卡托投影是什么？ Web墨卡托投影使用EPSG:3857坐标系，Web墨卡托投影和普通墨卡托投影有什么区别？

Web墨卡托投影的原理基于墨卡托投影，但为了适应Web地图开发的需求，做出了一些调整和优化。下面是Web墨卡托投影的基本原理：球体到平面的投影：墨卡托投影是一种将地球表面上的经纬度坐标投影到平面上的投影方式。在Web墨卡托投影中，地球被假设为一个完美的球体，而不是椭球体，这样可以简化计算。圆柱投影：Web墨卡托投影是一种圆柱投影，即将地球表面投影到一个无限长的圆柱体上，然后展开成平面。这种投影方式保持了地图的方向性，即保证了地图上东西方向和实际地球表面上的东西方向一致。

2024-03-31 10:42:05 114

原创 Web墨卡托投影和普通墨卡托投影是一样的吗？Web墨卡托投影与EPSG:3857坐标系的关系，EPSG:3857坐标系和EPSG:4326坐标系有什么区别？

普通墨卡托投影Web墨卡托投影总的来说，Web墨卡托投影是普通墨卡托投影在Web开发中的一种特定应用，主要用于在Web地图中显示地图数据，并且通常有特定的坐标范围和单位。

2024-03-31 10:24:33 235

原创 GIS入门，WGS84坐标如何转换为墨卡托投影坐标，以及球面墨卡托投影公式介绍

WGS84坐标系：WGS84是一种地理坐标系统，用于描述地球表面上的位置。它使用经度和纬度来表示位置，以度为单位。WGS84坐标系是一种球面坐标系，用于直接表示地球上的点的位置。墨卡托投影坐标：墨卡托投影是一种地图投影方法，用于将地球表面上的经纬度坐标投影到平面上。墨卡托投影将地球上的点投影到一个平面上的直角坐标系，通常使用x和y坐标来表示。墨卡托投影坐标通常用于地图制作和导航等应用中。

2024-03-30 16:44:31 211

原创 GIS硬核入门，二维地图是如何使用WGS84坐标系来转换成墨卡托投影的xyz地图瓦片切片的详细原理

二维地图一般分成两种，一种是简化的道路地图视图，一种是卫星拍摄的高清影像地图。

2024-03-30 16:28:36 177

原创 Vue+OpenLayers7入门到实战：OpenLayers选择拖拽功能，OpenLayers实现对地图上的任意要素进行选择和拖拽

本章介绍如何使用OpenLayers7在地图上进行任意要素进行选择和拖拽，可以选择并拖动要素点、圆形、线段、多边形、图标等等任意要素图形。

2024-03-29 23:20:04 153

原创 Vue+OpenLayers7入门到实战：OpenLayers涂鸦手绘线条、圆形和多边形，涂鸦线条自动收尾连接成多边形

本章介绍如何使用OpenLayers7在地图上进行绘制图形的功能，上一章中《Vue+OpenLayers7入门到实战：OpenLayers图形绘制功能，OpenLayers实现在地图上绘制线段、圆形和多边形》我们已经讲过多种图形的绘制，本章主要讲解自由涂鸦手绘绘制线条，圆形和任意形状。

2024-03-29 23:18:20 174

原创 OpenLayers6扩展插件进阶之ol-ext使用：使用ScaleLine缩放比例扩展组件根据屏幕PPI算出正确的缩放比例

本章介绍OpenLayers扩展插件ol-ext的ScaleLine缩放比例显示控件的使用方法，使用ScaleLine扩展组件根据屏幕PPI算出正确的缩放比例。OpenLayers6扩展插件进阶，已知屏幕分辨率和屏幕尺寸，JavaScript如何计算屏幕PPI像素密度OpenLayers默认的控件中显示地图的比例在某些投影和默认墨卡托投影会保留角度，但不会保留距离。这意味着整个地图上的比例尺不同。控件在地图上的中心显示投影，在地球上移动时可能会发生变化。

2024-03-28 11:39:07 162