- 博客(53)
- 收藏
- 关注
原创 JavaScript异步简介|Promise快速入门
异步编程技术使你的程序可以在执行一个可能长期运行的任务的同时继续对其他事件做出反应而不必等待任务完成。与此同时,你的程序也将在任务完成后显示结果。
2024-08-07 17:43:37
983
原创 前端构建工具|vite快速入门
通过以上步骤,可以快速上手 Vite 并开始开发现代 Web 应用。如果有更多需求,可以查阅 Vite 的官方文档,了解更多高级功能和配置选项。还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。可以使用 npm、Yarn 或 pnpm 来创建 Vite 项目。在安装了 Vite 的项目中,可以在 npm scripts 中使用。上面的命令创建了一个新的 Vite 项目并安装了所需的依赖项。这将启动 Vite 开发服务器,并在浏览器中自动打开项目。这将生成生产环境的静态文件,并将它们输出到。
2024-08-07 17:40:16
1300
原创 终端命令行|CLI工具|CMD|PowerShell
管道命令(Pipeline)是命令行中的一种强大工具,用于将一个命令的输出直接作为下一个命令的输入。Prettier 是一款专门为前端开发人员设计的代码格式化工具,专注于基于 javascript 的语言,并增加了对 HTML、CSS、SCSS、JSON 等的支持。无论是在 Windows (指的是cmd)还是 Linux 系统上,终端命令都是进行系统管理和操作的重要工具。果你正在运行任何用于 web 开发的工具,你一定需要打开命令行并运行一些命令来使用你所选择的工具 (这样的工具被称为。
2024-08-06 19:16:31
1777
原创 软件包管理|npm【前端工具链】
pnpm 全称 performant npm,意思为 高性能的 npm。pnpm 由 npm/yarn 衍生而来,解决了 npm/yarn 内部潜在的 bug,极大的优化了性能,扩展了使用场景。被誉为最先进的包管理工具。官网:https://pnpm.io/中文网站:https://pnpm.io/zh/
2024-08-06 19:09:10
809
原创 WebGIS的地图渲染|SVG|Canvas|Canvas
可伸缩矢量图层(Scalable Vector Graphics, SVG)用来定义用于网络中基于矢量的图形。SVG使用XML格式定义图形,可以用来绘制矢量图层。SVG可以通过定义必要的线和形状来创建一个图形,也可以修改已有的位图,或者将这两种方式结合起来创建图形。图形及其组成部分可以形变、合成,或者通过滤镜完全改变外观。Canvas是HTML5的一个新特性,Canvas又称为画布。顾名思义,我们可以在Canvas上绘制所需的图形。
2024-07-25 22:12:25
1460
原创 css渐变色背景|<gradient
可以直接将渐变色用作元素的背景,可以看做是一种特殊的背景图片。(是作为背景background一个属性值不是背景颜色的属性值 )是一种从一种颜色平滑过渡到另一种颜色的效果,由<gradient>数据类型表示,它是<image>的一种特殊类型,由两种或多种颜色之间的渐变过渡构成。<//* 线性渐变 */width;height;background;/* 径向渐变 */width;height;background;
2024-07-25 22:03:21
3149
原创 vue3引入openlayers
使用npm安装OpenLayers库,通过Vue 3组件结合TypeScript语法引入OpenLayers模块,创建简单地图实例并渲染到页面中。
2024-07-24 20:51:05
449
原创 Geoserver介绍与安装
GeoServer是一个开源的Java软件,用于分享和编辑地理空间数据。它支持多种开放标准格式,并实现了OGC的网络要素服务、网络覆盖服务和网络地图服务。安装简单,只需下载并解压文件即可运行。通过浏览器访问http://localhost:8080/geoserver即可使用。停止时关闭命令行窗口或运行shutdown.bat文件。卸载时停止GeoServer并删除安装目录即可。详细信息请参考官方文档。
2024-07-24 20:22:20
867
原创 参考椭球体与坐标系|大地水准面|地理坐标系|投影坐标系|EPSG|SRID
大地水准面是地球表面在重力和地球自转影响下的理想海平面,是不规则的光滑曲面。参考椭球体是一个几何模型,用来近似表示大地水准面,并包含椭球的长短半轴、扁率等参数。基于参考椭球体,可以建立地理坐标系和投影坐标系来进行位置描述和距离测量。地理坐标系以经度和纬度表示,投影坐标系则是平面上的米制单位。地图投影将地球椭球面展开到平面上,不可避免地产生变形,不同投影方法会有不同的变形特性。EPSG代码标准化了地理空间参考系统,用于在各种系统中统一坐标系的定义和使用。
2024-07-23 16:47:00
2578
原创 JavaScript数字对象与数学对象|Number|Math
JavaScript 数字对象主要涉及到Number对象,它提供了处理和操作数值的多种方法和属性。在 JavaScript 中,数值类型(number)是原始类型。
2024-07-22 21:10:21
1173
原创 JavaScript异常处理|try...catch
JavaScript异常处理的作用是帮助开发者识别和处理运行时的错误和异常情况,确保程序在出现问题时能够优雅地降级或恢复,而不是导致整个应用崩溃或产生不可预测的行为。是 JavaScript 中的一种标准异常类型,它在试图引用一个未定义的变量或对象时抛出。错误对象包含关于发生错误的信息,例如错误消息和错误堆栈跟踪。语句抛出任意类型的对象作为异常。然而,为了更好地处理错误和调试,通常使用标准的异常类型。块包含可能会抛出异常的代码。根据错误类型,可以用’name’和’message’获取更精炼的信息。
2024-07-21 17:06:59
1869
原创 【webgis】地图切片|矢量地图切片|栅格地图切片
地图矢量切片和地图栅格切片采用了相同的思路。地图矢量切片以金字塔方式切割矢量数据,只不过切割的不是栅格图片,而是矢量数据的描述性文件。目前地图矢量切片主要有以下三种格式:GeoJSON、TopoJSON和Mapbox Vector Tile(MVT)。GeoJSON易于阅读、通用性强,大多数软件可以直接打开这类文件,但存储的地理数据较多时易产生冗余信息。
2024-07-21 13:45:51
2535
原创 WebGSI地图切片|栅格地图切片原理|地图矢量切片原理
地图矢量切片和地图栅格切片采用了相同的思路。地图矢量切片以金字塔方式切割矢量数据,只不过切割的不是栅格图片,而是矢量数据的描述性文件。目前地图矢量切片主要有以下三种格式:GeoJSON、TopoJSON和Mapbox Vector Tile(MVT)。GeoJSON易于阅读、通用性强,大多数软件可以直接打开这类文件,但存储的地理数据较多时易产生冗余信息。
2024-07-21 10:15:16
1458
原创 WebGIS的Web服务概述
Web服务是一种运行于Web服务器上的程序。Web服务提供一个XML接口,是通过标准Web协议实现通信的,支持系统间的松耦合连接,适用于任何类型的Web环境,无论互联网、Intranet还是Extranet。Web服务是一种用来解决跨网络应用集成问题的开发模式,这种模式为实现“软件作为服务”提供了技术保障。
2024-07-21 10:00:55
1583
原创 Openlayers瓦片数据源 |VectorTileSource |XYZ |WMTS
适用于需要高效数据传输和灵活客户端渲染的应用。适合需要高分辨率、动态样式和交互的场景。**XYZ**: 适用于简单配置和快速实现的场景。支持栅格和矢量瓦片,适合大多数常见的地图应用。**WMTS**: 提供标准化的接口和服务描述,适合需要高度互操作性和标准化的应用,主要用于栅格瓦片。除了XYZ和WMTS,OpenLayers 还支持多种其他瓦片数据加载方式,包括TileWMSBingMapsStamen和CartoDB。这些不同的数据源各有特点,适用于不同的应用场景和需求。
2024-07-20 18:02:36
1588
原创 ol/geom 与 ol/Feature比较
ol/geom和ol/Feature是 OpenLayers 中两个密切相关但功能不同的模块。ol/geom模块包含了一系列类,用于表示几何图形。这些类定义了地图上的各种形状,如点、线和多边形等。几何图形主要是关于空间位置和形状的信息,包含了坐标数据和相关的几何操作(例如计算长度、面积等)。ol/Feature是用于表示地图上的特征的类。特征不仅包含几何图形,还可以包含与几何图形相关的属性数据。ol/geom。
2024-07-20 17:58:27
453
原创 Openlayers简介|体系架构|主要API|
OpenLayers是最早的WebGIS开源库之一,迭代开发的历史较长,目前是WebGIS中功能齐全、资料和教程丰富的框架,同时其学习曲线比较平缓,很容易上手。OpenLayers采用了Canvas、WebGL和HTML5中最新的技术来构建框架,可以在移动设备上运行。
2024-07-20 16:35:33
2948
原创 WebGIS主流的客户端框架比较|OpenLayers|Leaflet|Cesium
实现 WebGIS 应用的主流前端框架主要包括 OpenLayers、Leaflet、Mapbox GL JS 和 Cesium 等。每个框架都有其独特的功能和优势,适合不同的应用场景。
2024-07-20 16:31:23
1198
原创 Poetry学习指南|python依赖管理|常用命令速查
Poetry是Python中用于依赖管理和打包的工具。它允许你声明你的项目所依赖的库,它会为你管理(安装/更新)它们。
2024-07-17 18:00:22
2255
1
原创 【openlayers系统学习】4.3VectorTile 功能交互(指针悬停在要素上时,绘制矩形框)
在OpenLayers中实现与矢量切片交互,通过添加指针移动事件监听器,在鼠标悬停在要素上时绘制边界框。利用VectorLayer和VectorSource来实现这一功能。
2024-05-27 09:03:33
733
原创 【openlayers系统学习】4.2Mapbox 样式渲染图层
使用Mapbox样式渲染图层,通过配置MapboxVectorLayer并指定样式URL,实现自定义地图样式渲染。也介绍了使用ol-mapbox-style包创建整个地图的方法。
2024-05-27 09:01:45
588
原创 【openlayers系统学习】4.1渲染矢量瓦片、VectorTile 层
学习如何使用OpenLayers的VectorTile图层加载矢量切片数据,并展示了一个简单的世界地图。
2024-05-24 13:29:39
1958
原创 【openlayers系统学习】3.6-3.7添加可视化选择器,手动选择可视化的图像源
在这个示例中,我们为用户添加了一个可视化选择器,让他们可以选择不同的图像和可视化类型。
2024-05-24 13:26:18
1128
原创 【openlayers系统学习】3.5colormap详解(颜色映射)
在openlayers中通过 colormap 包定义图层样式的颜色表达式。并详细介绍colormap 的使用。
2024-05-23 19:34:13
1518
原创 【openlayers系统学习】3.4波段数学计算(计算NDVI)
使用OpenLayers中的GeoTIFF源和WebGLTile图层计算并渲染归一化植被指数(NDVI),通过计算近红外和红色波段的差异比率来突出显示植被分布情况。通过插值和颜色映射,实现了对NDVI图像的可视化呈现。
2024-05-23 19:12:54
1382
原创 【openlayers系统学习】3.3假彩色图像合成(三个波段合成假彩色图像)
使用OpenLayers中的GeoTIFF源来合成假彩色图像,突出显示植被和裸露土壤区域。通过加载近红外、红色和绿色反射率数据合成假彩色图像。
2024-05-23 19:10:43
1040
原创 【openlayers系统学习】3.1-3.2彩色GeoTIFF图像渲染
介绍了如何在OpenLayers中渲染Sentinel-2卫星任务收集的真彩色GeoTIFF图像。通过使用ol/source/GeoTIFF和ol/layer/WebGLTile组件,可以加载和渲染远程托管的GeoTIFF文件。通过配置地图视图的投影和范围,以及使用GeoTIFF源的getView()方法获取视图属性的promise,可以简化代码并实现更高效的地图渲染。
2024-05-22 21:25:50
1618
原创 【openlayers系统学习】1.7美化map,使用样式类(设置style)
介绍了如何在OpenLayers中为要素添加样式,包括静态样式和动态样式。通过配置矢量图层的样式选项,可以控制要素的填充颜色、描边颜色等。此外,还介绍了根据几何区域面积来确定颜色的样式函数的实现方法。
2024-05-21 17:52:59
1453
原创 【openlayers系统学习】1.6下载要素,将要素数据序列化为 GeoJSON并下载
通过序列化要素数据为GeoJSON格式,并创建带有download属性的元素来触发文件下载对话框。同时,添加清除功能按钮以清除地图上的要素。
2024-05-21 17:49:48
592
原创 【openlayers系统学习】1.5交互-捕捉要素
通过配置Snap交互操作与矢量源一起工作,并添加到地图中,用户可以在编辑数据时捕捉要素的端点或交点,从而保持拓扑关系。
2024-05-21 17:45:23
384
原创 【openlayers系统学习】1.4 交互-绘制新要素
通过创建Draw交互对象并配置为绘制多边形,并将绘制的要素添加到矢量源中,用户可以在地图上绘制新的几何图形。
2024-05-21 17:38:07
269
原创 【openlayers系统学习】1.3交互-修改要素(features)
通过创建Modify交互对象并连接到矢量源,用户可以通过拖动要素的顶点来修改要素。
2024-05-21 17:34:05
360
原创 【openlayers系统学习】1.2交互-拖放文件
通过创建矢量源和图层,并配置拖放交互,用户可以将GeoJSON文件拖放到地图上进行渲染查看。
2024-05-21 17:30:29
234
原创 【openlayers系统学习】1.1渲染GeoJSON,添加link交互
介绍了如何使用OpenLayers加载和渲染GeoJSON数据,并添加交link互功能以保持地图视图稳定。
2024-05-21 15:05:00
574
原创 【openlayers系统学习】00openlayers基础结构
创建带有OpenLayers地图的简单网页,理解代码。地图是渲染到网页的图层集合,支持瓦片、矢量瓦片、图像和矢量图层。配置控件和交互。替换index.html和main.js文件,创建地图并查看。
2024-05-21 08:21:25
844
原创 【openlayers系统学习】00官网的Workshop介绍
OpenLayers官方Workshop提供了系统学习OpenLayers的机会。通过基本设置,您可以下载并解压Workshop文件,安装依赖项后启动开发服务器。Workshop包含多个模块,每个模块都有特定目标,如添加地图、使用矢量数据、移动地图、GeoTIFF渲染、矢量瓦片样式、WebGL点渲染和部署。通过逐步完成这些模块,您可以建立对OpenLayers的知识库。
2024-05-20 18:06:54
684
1
原创 00.openlayers基本概念教程
OpenLayers是一个模块化、高性能、功能丰富的地图库,支持各种商业和免费地图图像和矢量切片源,以及开放和专有矢量数据格式。它内置了对不同投影的支持,可以在浏览器中进行重投影,支持自定义投影和动态三角测量。
2024-05-20 08:19:53
1018
原创 00.OpenLayers快速开始
介绍了如何使用OpenLayers创建一个基本的Web地图应用程序。通过设置新项目,包括HTML标记、JavaScript和CSS样式,您可以快速开始构建地图应用。文档提供了创建项目、组成部分和部署应用的步骤,包括示例代码和说明。通过npm命令创建项目,导入OpenLayers模块,设置地图视图和图层,以及部署应用。最后,通过npm run build命令进行应用程序的构建。
2024-05-19 17:36:55
1149
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人