openlayers 地图添加比例尺

知识点：

效果图：

// html
<div class="my-scale-line"></div>
// 也可以动态创建// js// 比例尺function initScaleLine() {let scaleLineControl = new ol.control.ScaleLine({className: 'my-scale-line'});scaleLineControl.setUnits('metric');map.addControl(scaleLineControl);}// 样式.my-scale-line {position: absolute;right: 75px;font-weight: 700;font-size: 12px;color: white;bottom: 60px;left: auto;border: 2px solid white;border-top: none;text-align: center;background-color: hsla(0, 0%, 100%, 0);height: 8px;line-height: 0;}

openlayers 地图添加比例尺相关推荐

cesium给地图添加比例尺学习踩坑记录
cesium给地图添加比例尺学习踩坑记录因项目需要在cesium地图中展示比例尺,本来应该是很简单的事,但却碰到了一个引用文件的坑,特此记录: *1.引用依赖文件相信需要用到cesium比例尺组件 ...
android 高德比例尺,高德地图——添加比例尺控件
AMap.Scale 距离控件 AMap.ToolBar 比例尺插件 &plugin=AMap.Scale,AMap.ToolBar map,addControl(new AMap.Scal ...
openlayers入门添加百度地图绘制点线面
1.构建一个地图容器 <div id="map" class="map"></div> 2.创建一个地图 2.1初始化一个openlay ...
014：vue+openlayers添加比例尺（代码示例）
第014个点击查看专栏目录本示例的目的是介绍如何在openlayers中使添加使用比例尺控件,实现添加比例尺的效果. 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果 ...
OpenLayers 3地图添加图标
OpenLayers 3地图添加图标一.overlay方式在地图添加图标 1.项目结构 2.map.html <!Doctype html> <html xmlns='http:/ ...
百度地图添加工具条、比例尺控件
百度地图添加工具条.比例尺控件 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-T ...
openlayers地图初始化
1.安装ol(官网ol已更新到openlayers7版本,我所用的是v6.14.1) yarn add ol //安装openlayers 2.初始化openlayer地图先创建一个容器来存放map ...
Openlayers中的比例尺（scale）和分辨率（resolution）
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/dazhi_1314/article/d ...
Leaflet中实现添加比例尺控件与自定义版权控件与链接
场景 Leaflet快速入门与加载OSM显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880 上面加载显示 ...

openlayers 地图添加比例尺

openlayers 地图添加比例尺相关推荐

最新文章

热门文章