background picture of the home page

Hi,Friend

临时 | 永久设置 npm 源

文章介绍了 npm 源的临时与永久配置方法,帮助开发者根据需求切换软件包下载地址。内容涵盖使用 `--registry` 参数临时指定源、通过 `npm get registry` 查看当前源,以及利用 `npm set registry` 命令设置永久源。文中列出了淘宝 npm 源、腾讯云 npm 源、华为云 npm 源和 npm 官方默认源等地址,便于提升依赖安装效率并灵活管理 npm 环境。

thumbnail of the cover of the post

Turf.js

Turf.js | 用于地理空间分析的 JavaScript 库 文档地址 内含详细使用教程 Turf.js中文网 Turf.js官网 Turf.js 介绍 Turf.js 是一个开源 JavaScript 库,它能够对地理空间数据执行操作。该库可在浏览器和 Node.js 环境中使用,提供一组用于

thumbnail of the cover of the post

Cesium 创建地图

本文介绍 Vue3+Vite 集成 Cesium 的基础使用流程,包括安装依赖、配置 vite-plugin-cesium、创建 Viewer 实例及初始化地图。内容涵盖 Viewer 参数设置、影像图层与地形配置、相机定位与飞行控制、经纬度与笛卡尔坐标转换,以及 Entity 实体绘制点位等常用操作。通过示例代码帮助开发者掌握 Cesium 地图创建、视角控制和空间数据处理的基本方法。

thumbnail of the cover of the post

OpenLayers API文档

OpenLayers API文档介绍了该库的核心组成与功能模块,涵盖地图应用开发中的主要对象和能力。内容包括管理地图整体结构的 Map、控制地图视图的 View、负责图层管理的 Layers、界面控制的 Control、用户交互处理的 Interactions,以及数据来源与格式转换的 Sources and formats。此外,还涉及投影坐标系转换、观察对象变化机制和其他组件,为开发者理解和使用 OpenLayers 提供参考。

thumbnail of the cover of the post

OpenLayers 动态绘制点, 线, 面, 图片

本文介绍 OpenLayers 中动态绘制地图元素的方法,包括点、线、面、图片和 DOM 图标等内容。通过创建 VectorLayer 与 VectorSource,可在新图层或已有图层中添加 Feature,并使用 Style 自定义显示效果。文章分别展示了 Icon 绘制图片、CircleStyle 绘制点、LineString 绘制路线、Polygon 绘制区域填充,以及 Overlay 添加 DOM 图标的实现方式。同时介绍了通过 Draw 交互在地图中动态绘制图形并添加到图层的方法,为地图标注、区域展示和交互绘制提供了实现参考。

thumbnail of the cover of the post

OpenLayers 创建图层 TileLayer, VectorLayer, ImageLayer

文章介绍了在 Vue3 项目中使用 OpenLayers 创建多类型地图图层的方法,包括 TileLayer、VectorLayer 和 ImageLayer。通过 Map、View 配置地图实例,利用 XYZ 加载瓦片地图,VectorSource 加载 GeoJSON 数据并设置样式,ImageStatic 添加静态图片图层。同时展示了完整实现代码,包含动态创建矢量图层、添加 Feature 点要素、设置图标样式,以及通过键盘控制地图中心移动等交互功能。读者可通过示例掌握 OpenLayers 多图层组合、要素管理和基础地图交互开发流程。

thumbnail of the cover of the post

OpenLayers 地图图源

文章整理了 OpenLayers 可使用的多类地图图源地址,包括 Google 实景地图、 高德影像图层、高德矢量底图、ArcGIS 街道图层以及 Wayback 不同时序影像图层。内容提供了对应瓦片 URL 模板,便于开发者在地图应用中配置不同类型的底图资源,并附带国内常用地图瓦片源地址汇总,帮助快速查找和使用相关地图服务。

thumbnail of the cover of the post

OpenLayers 移动视图, 控制视图平移

OpenLayers中移动视图可通过获取View对象和当前中心坐标,调用setCenter设置新的中心点实现平移,并结合render重新渲染地图。示例展示了在Vue3中监听键盘上下左右方向键,根据按键调整坐标控制地图移动。文章还介绍了view.animate方法,通过center和duration参数实现带动画效果的视图平移,并给出按键触发动画移动的实现方式。

thumbnail of the cover of the post

OpenLayers 坐标体系

文章介绍了 OpenLayers 中 EPSG:3857 与 EPSG:4326 两种坐标体系的特点和使用方式。EPSG:3857 是默认投影坐标系,基于 Web Mercator,适合地图显示但数值较大、不利于存储;EPSG:4326 是 WGS84 地理坐标系,常用于 GPS 数据,易读且便于存储。实际开发中通常使用 4326 存储数据,使用 3857 进行地图展示,并通过投影转换设置视图中心。

thumbnail of the cover of the post

Vue3 + OpenLayers 创建地图

Vue3 + OpenLayers 创建地图 如图示例: 安装 OpenLayers npm i ol -S 引入 OpenLayers 创建地图容器, 编写渲染方法, 执行渲染方法 import { Map, View } from 'ol' // 地图实例方法、视图方法 import

thumbnail of the cover of the post