OpenLayers学习笔记（七）— 类似比例尺的距离环（一）

最新推荐文章于 2024-06-06 22:00:00 发布
最新推荐文章于 2024-06-06 22:00:00 发布
阅读量235 收藏
点赞数
文章标签： css js canvas html python
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sueRimn/article/details/108651146
版权
本文介绍了如何在OpenLayers 3地图中实现一个类似比例尺的动态距离环。该距离环以地图中心为基准，各环间的距离随着地图缩放而变化，提供了一种直观展示地图比例的方式。通过使用虚拟层和CSS，确保了环的尺寸和形状随着地图投影的变化而适应。
摘要由CSDN通过智能技术生成

openlayers 3 地图上创建一个距离环，始终以地图中心为中心，每个环之间的距离类似比例尺，随地图缩放而变化。

添加具有覆盖整个范围的特征的虚拟层，其可以被设置为围绕地图中心的环。注意，根据地图投影，当真实地图比例发生变化时，环尺寸(甚至形状)可能会根据位置而变化，例如，如果从格陵兰岛移动到非洲，这些距离将为50公里，200公里，500公里和1000公里。

GitHub:八至

作者：狐狸家的鱼

本文链接：类似比例尺功能的距离环

 

最低0.47元/天 解锁文章
DebJane
关注
Openlayers实战：extent介绍及实际应用
大剑师兰特的GIS世界
07-23 1197
Openlayers中，extent是重要的属性，它主要目的是圈定边界。setExtent方法可以设定边界的值；fit()方法可以适配狂口的位置。
OpenLayers学习笔记（八）— 类似比例尺的距离环（二）
sueRimn的博客
01-21 586
OpenLayers学习笔记（八）— 类似比例尺的距离环（二） openlayers 3 地图上创建一个距离环，始终以地图中心为中心，每个环之间的距离类似比例尺，随地图缩放而变化。 添加具有覆盖整个范围的特征的虚拟层，其可以被设置为围绕地图中心的环。 这篇是上一篇距离环文章的拓展和完善 GitHub:八至 作者：狐狸家的鱼 在线预览 这是模仿openlayers插件库ol-e...
OpenLayers3实现地图鹰眼以及地图比例尺的添加
10-14
主要为大家详细介绍了OpenLayers3实现地图鹰眼以及地图比例尺的添加，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
openlayer4中，地图通过extent缩放至范围。
liuxu1875的博客
03-08 1万+
//地图缩放，通过extent范围 extent数据类型为int数组，不能为字符串，如果为字符串则先转换为int数组。 function zoomToExtent(extent) { var MapZoom = extent; var mapPadding = [20, 10, 20, 10]; // alert(isArrayFn(extent)); if (is...
Openlayers学习之地图比例尺控件
10-14
在OpenLayers中，地图比例尺控件是一种常用的交互元素，它允许用户直观地理解地图上显示的距离与实际地理距离之间的关系。本篇文章将详细介绍如何在OpenLayers应用中添加和使用地图比例尺控件。 首先，我们需要了解...
OpenLayers学习笔记（七）— 类似比例尺的距离环
sueRimn的博客
01-07 974
OpenLayers学习笔记（七）— 类似比例尺的距离环 openlayers 3 地图上创建一个距离环，始终以地图中心为中心，每个环之间的距离类似比例尺，随地图缩放而变化。 添加具有覆盖整个范围的特征的虚拟层，其可以被设置为围绕地图中心的环。注意，根据地图投影，当真实地图比例发生变化时，环尺寸（甚至形状）可能会根据位置而变化，例如，如果从格陵兰岛移动到非洲，这些距离将为50公里，200公里...
openlayers 根据经纬度画球面上的圆
10-18 873
openlayers 根据经纬度画球面上的圆，需要要效果如下： 实现代码如下： //new ol.geom.Polygon.circular([120.277, 36.330],2000000); new ol.geom.Polygon.circular([120.277, 36.330],2000000,32,6378137); 可能用错的方法如下： new ol.geom.Circle(sPoint1212,10); 此方法结果为正圆，如下图所示： 记录下... ...
openlayers6【四】地图图层Layers详解
热门推荐
@必意玲
04-30 1万+
文章目录1. 什么是图层？？？1.1 线状图层1.2 点状图层1.3 面状图层2. 图层存在一个或者多个3. Layers 的常见属性4. Layers 各种图层及图层类型4.1 `Graticule` 地图上覆盖的网格标尺图层4.2 `HeatMap`，热力图层4.3 `Vector`，矢量图层4.4 `Image Layer` 单张图片的矢量图层4.5 `VectorTile Layer`，矢量瓦片图层4.6 `WebGLPoints，WebGL` 渲染的海量点图层5. Layers 事件触发6. 写
239：vue+ openlayers 设置extent:bbox，限制瓦片图的加载范围，不加载空白瓦片
大剑师兰特的GIS世界
05-31 1118
第239个本示例的目的是介绍演示如何在vue+openlayers中加载geoserver发布的数据，这里主要介绍extent，设置bbox附加载layer上，目的是bbox在可视范围内才加载瓦片，否则不加载，好处是不用加载空白的瓦片数据。
Openlayers-限制地图拖动区域
a18826265589的博客
07-05 959
现在做webgis基本都会用到openlayers或者leaflet。那么在显示地图的时候，特别是显示小区域地图的时候，由于地图区域较小，就会存在把地图拖动到显示区域之外的现象。那么该如何限制地图拖动的区域呢。 在openlayers2中有restrictedExtent属性，直接设置下即可。 [javascript] view plain copy ...
MapboxGL坐标体系
07-02 1546
透视矩阵 * flipY矩阵 * 相机到瓦片中心的距离矩阵 * pitch(rotateX)矩阵 * angle(rotateZ)矩阵 * 平移矩阵 * 维度垂直scale矩阵 * 位置平移矩阵 * scale/zoom矩阵。ecef球的y轴朝上，跟cesium的z轴朝上不一样。x轴朝向经度90°，z轴朝向经度0°。TileCoordinates：瓦片坐标，范围8192，左上角（0, 0）NDC：NDC坐标，上面的GL坐标除以w。，设置的是6371008.8。，大概是1303.797像素。
openlayers 缩放至图层范围 getExtent() 返回 [Infinity, Infinity, -Infinity, -Infinity]
pwl124的博客
02-08 1244
openlayers 缩放至图层范围 getExtent() 返回 [Infinity, Infinity, -Infinity, -Infinity]
三十九、openlayers官网示例Extent Interaction解析——在地图上绘制范围并获取数据
最新发布
aaa_div的博客
06-06 386
在openlayers中可以使用ExtentInteraction添加交互事件，配合shiftKeyOnly实现按住shift键绘制边界区域。监听extentchanged事件，记录绘制的矩形数据。按住shift绘制矩形，按住shift键点击图形删除。
OpenLayers 3 View 简单应用
大树
12-13 987
View简单应用 视图View除了设置地图中心，还可设置地图显示范围和地图缩放级别 一、设置地图显示范围 1、地图项目结构 2、核心代码 // 设置显示地图的视图 view: new ol.View({ //设置成都为地图中心 center: [104.06, 30.67], /** * 根据中心设置地图显示范围 * 注：此时设置的显示层级会失
根据新的地图图幅编号，在openlayers上显示图幅范围和图幅号
做GIS梦的人
07-05 1818
因为性能关系，在Openlayers上同时显示过多时会造成卡顿，这里做成了根据图幅号查询图幅，并在地图显示。注意这里使用的是最新的图幅编号。代码是使用Vue写的，借鉴的时候需要注意一下 selectMapNumber() { const that = this; this.$prompt("请输入图幅号", "图幅选取", { confirmButtonTe...
openlayers 保存当前视角的三种实现方式
wangfengquan_的博客
02-09 712
最近被同事请教了如何openlayers地图视角相关的问题，需求是保存当前地图视角到后端，前端再恢复展示。挺简单的功能，翻阅了一下openlayers官方文档，总结了三种实现方式。废话不多说，先上图。
全网最新版openlayers视频教程
02-27
学习关于二维地理图层渲染，投影转换，各种数据类型渲染，OGC服务，各种地图交互
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值