概述

比例尺在地图中是一个非常重要的概念，有着辅助读图的作用。本文在ol框架下，实现webgis中的比例尺功能。

实现效果

概念

在课本中，对其的定义是：地图上所表示的空间尺度称作比例尺。在webgis中，比例尺代表的是一个像素代表实际中多少米，因此在不同的级别比例尺不同。在webgis中，跟比例尺对应的还有一个概念叫做分辨率。在标注切片下，分辨率和比例尺的对应关系如下：

实现

在ol中比例尺的实现代码逻辑如下：

const minWidth = 60
const dom = document.getElementById('scaleLine')
let currentZoom = -1
// 地图拖动和缩放事件
map.on('moveend', function (e) {if(currentZoom === map.getView().getZoom()) returnconst res = map.getView().getResolution()let width = minWidth;let minScale = res * widthlet unit = 'm', scale = minScaleif(minScale / 1000 > 1) {unit = 'km'scale = Math.ceil(minScale / 1000)}const breaks = [1000, 500, 200, 100, 50, 20, 10]for (let i = 0; i < breaks.length; i++) {const b = breaks[i]if(scale / b > 1) {scale = Math.ceil(scale / b) * bbreak}}width = unit === 'm' ? scale / res : scale * 1000 / resdom.style.width = (width + 4) + 'px'dom.innerText = scale + unitcurrentZoom = map.getView().getZoom()
})

实现代码比较简答，下面简单做一个分析：

minWidth是展示比例尺最小的宽度，也是后面计算比例尺的一个基准；
比例尺的展示是通过一个浮动的div来展示的；
通过当前分辨率计算60个像素对应的图上的距离，并做取整处理；

webgis中的比例尺实现相关推荐

(十五)WebGIS中平移功能的设计和实现
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言这一章我们将详细讲解WebGIS工具栏中另一个基础工具--平 ...
MapBar和MapInfo中的比例尺[更新:MapBar比例尺是正确的]
真搞不懂MapBar中的比例尺,今天发上来让大家说说这比例尺怎么个算的.可以先选择缩放级别然后点查看比例尺会有和百度地图中一样的比例尺,只是我搞不懂这比例尺怎么算的,发代码上来让大家讨论下.代码其实很 ...
从底层谈webgis原理设计与实现（九）WebGIS中的矢量查询（针对AGS和GeoServer）
1.前言在第七章里我们知道了WebGIS中要素的本质是UIComponent,而矢量图层的本质是包含了n(n>=0)个UIComponent的Canvas.我们在UIComponent的gra ...
WebGIS学习（九）WebGIS中的矢量查询（针对AGS和GeoServer）
1.前言在第七章里我们知道了WebGIS中要素的本质是UIComponent,而矢量图层的本质是包含了n(n>=0)个UIComponent的Canvas.我们在UIComponent的gra ...
WebGIS中的坐标系
引言坐标系在任何类型的地理信息系统中,都是十分重要的一个角色.坐标系统可以分类两种:即地理坐标和投影坐标.地理坐标中的坐标值都是以度分秒为单位,也就是常说到的经纬度坐标.投影坐标是经纬度坐标经过平面 ...
Openlayers中的比例尺（scale）和分辨率（resolution）
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/dazhi_1314/article/d ...
(十九)WebGIS中I查询的原理及设计(包含AGS、GeoServer、Supermap)
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景我们在使用arcmap时,经常会用到被称为I查询的工具.具体 ...
“GIS讲堂”第十课—WEBGIS中的地图图例
概述: 本节课程讲述了WEBGIS中的地图图例的实现. 课程主题: 地图图例的实现课程内容: 1.地图图例的概念图例是集中于地图一角或一侧的地图上各种符号和颜色所代表内容与指标的说明,有助于更好的 ...
基本符号有_MapGIS 10中各种比例尺、符号尺寸计算说明（三）——随图缩放的符号计算...
随图缩放的符号计算符号随图缩放方式当符号采用随图缩放方式时,在缩放地图的过程中,符号的大小会随着地图缩放而同步变化. 符号尺寸显示采用符号随图缩放方式时,可从以下三个尺寸来了解符号的尺寸.点.线 ...

webgis中的比例尺实现

概述

实现效果

概念

实现

webgis中的比例尺实现相关推荐

最新文章

热门文章