openlayers 地图添加比例尺

太过爱你忘了你带给我的痛 2023-07-18 02:17 14阅读 0赞

知识点：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoanVlamlhbmc_size_16_color_FFFFFF_t_70][]

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoanVlamlhbmc_size_16_color_FFFFFF_t_70 1][]

// 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;
        }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoanVlamlhbmc_size_16_color_FFFFFF_t_70]: /images/20230528/9cc5cd30c8574d019b39358ad2207dc2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoanVlamlhbmc_size_16_color_FFFFFF_t_70 1]: /images/20230528/71f3af3e54e748ceaf4aa4682d303d81.png

发表评论取消回复

表情：

评论列表（有 0 条评论，14人围观）

还没有评论，来说两句吧...

相关阅读

相关 095：vue+openlayers 地图上添加网格线（示例代码）

![在这里插入图片描述][a957f6e5910d474facb7f2ad7fab4ce3.png_pic_center] 第095个 [点击查看专栏目录][Link 1]

谁借莪１个温暖的怀抱￠/ 2024年04月08日 11:36/ 0 赞/ 74 阅读

相关 157：vue+openlayers 地图上添加Echarts饼图

![在这里插入图片描述][a957f6e5910d474facb7f2ad7fab4ce3.png_pic_center] 第157个 [点击查看专栏目录][Link 1]

深藏阁楼爱情的钟/ 2024年04月01日 09:19/ 0 赞/ 49 阅读

相关 160：vue+openlayers 地图上添加Echarts柱状图

![在这里插入图片描述][a957f6e5910d474facb7f2ad7fab4ce3.png_pic_center] 第160个 [点击查看专栏目录][Link 1]

朱雀/ 2024年04月01日 06:26/ 0 赞/ 59 阅读

相关 159：vue+openlayers 地图上添加Echarts环形图

![在这里插入图片描述][a957f6e5910d474facb7f2ad7fab4ce3.png_pic_center] 第159个 [点击查看专栏目录][Link 1]

太过爱你忘了你带给我的痛/ 2024年04月01日 06:12/ 0 赞/ 65 阅读

相关 Openlayers实战：个性化比例尺

Openlayers地图中，比例尺经常会用到，所以在我们的实战课程里，详细讲一下其用法，个性化其样式。效果图 ![在这里插入图片描述][d5c051c6067048b

我会带着你远行/ 2024年03月17日 14:52/ 0 赞/ 78 阅读

相关 openlayers 地图添加比例尺

知识点： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2

太过爱你忘了你带给我的痛/ 2023年07月18日 02:17/ 0 赞/ 14 阅读

相关地图比例尺学习、超图最小可见比例尺和最大可见比例尺

比例尺是表示地图距离与实际距离之比，表示图上距离比实际距离缩放的程度。比例尺可对地图上的元素大小和元素间的距离进行直观指示。比例尺越大，地图所表示的范围越小，图内表

悠悠/ 2023年01月03日 15:29/ 0 赞/ 506 阅读

相关 openlayers在地图上添加maker

如下图所示，点击地图的时候，显示一个小红点 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ib

朱雀/ 2022年11月25日 10:10/ 0 赞/ 321 阅读

相关 Openlayers中实现地图上添加一条红色直线

场景 Openlayers中加载Geoserver切割的EPSG:900913离线瓦片地图并显示： [https://blog.csdn.net/BADAO\_LIUM

ゞ浴缸里的玫瑰/ 2022年10月19日 04:10/ 0 赞/ 385 阅读

相关最新百度地图级别与比例尺关系

日期：2018/09/28更新百度地图API 3.0 级别比例尺 19 : 20米 18 : 50米 17

￡神魔★判官ぃ/ 2022年05月09日 00:10/ 0 赞/ 313 阅读