Openlayers之地图比例尺控件

最新推荐文章于 2024-02-28 11:43:46 发布
最新推荐文章于 2024-02-28 11:43:46 发布
阅读量5.7k 收藏 6
点赞数 1
分类专栏： OpenLayers3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SmileCoffin/article/details/54963428
版权
本文介绍了如何在OpenLayers中创建地图并添加比例尺控件。通过新建HTML页面，引入ol.js和ol.css，然后在body中设置两个div，一个用于地图显示，另一个用作比例尺容器。完成初始化后，比例尺会显示在地图左下角，并能根据地图缩放级别动态调整其值。
摘要由CSDN通过智能技术生成

1、新建一个html页面，引入ol.js和ol.css文件，然后在body中创建两个div标签，分别用来作为地图和比例尺控件的容器；

2、代码实现

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="../lib/ol/ol.js"></script>
    <link href="../css/ol.css" rel="stylesheet" />
    <style type="text/css">
        #scalebar
        {
            float:left;
            margin-bottom:10px;
            z-index:2000;
        }
    </style>
    <script type="text/javascript">
        window.onload = function ()
最低0.47元/天 解锁文章
桃李不言_下自成蹊
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Openlayers测量距离和面积
ThinkLess404的专栏
06-19 319
开发GIS系统，我们都会提供基本的一些测量功能给用户使用，用于测量地图上的距离和面积，这里我们使用openlayers实现此功能。
Openlayers学习之地图比例尺控件
10-14
主要为大家详细介绍了Openlayers学习之地图比例尺控件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
OpenLayers隐藏默认放大放小按钮
AngieLife
04-20 2698
<div id="map"></div> import {Map, View} from 'ol'; import TileWMS from 'ol/source/TileWMS'; import TileLayer from 'ol/layer/Tile'; import {ScaleLine, defaults as defaultControls} from 'ol/control'; //安徽省数据源 let wmsSource = new TileWMS({ .
OpenLayers实现比例尺控件（ScaleLine）的比例尺长度保持不变，只自适应改变比例尺对应的实际长度
最新发布
heiyihahei的博客
02-28 888
OpenLayers中比例尺控件的比例尺长度和对应的实际长度都是自适应变化的，现在根据业务需求，要实现比例尺长度保持不变，比例尺对应的实际长度自适应改变
openlayers学习——13、openlayers比例尺
记录生活点滴
01-21 3780
openlayers比例尺 前言：基于Vue，学习openlayers，根据官网demo，记录常用功能写法。 本人不是专业GIS开发，只是记录，方便后续查找。 参考资料： openlayers官网：https://openlayers.org/ geojson下载网站：https://datav.aliyun.com/portal/school/atlas/area_selector 地图坐标拾取网站：https://api.map.baidu.com/lbsapi/getpoint/index
记录openlayers遇到的坑——openlayers4.X无法正确加载比例尺
chaoyang89111的博客
05-09 582
首先，这确实是openlayers4.X的bug。 ol.js 461行删除了"degrees"!=e&&(b*=d.Bc())即可，这不是完美解决方案，只适用于经纬度系统。
OpenLayers3实现地图鹰眼以及地图比例尺的添加
10-14
- 将比例尺控件添加到地图中，与添加鹰眼控件的方式相同，可以使用`map.controls.add(scaleLineControl)`或在创建地图时设置`controls`参数。 3. 自定义样式 在HTML中，你可以使用CSS来定制鹰眼控件的外观。例如，...
openlayers 加载天地图示例
02-24
// 添加比例尺控件 map.addControl(new ol.control.ScaleLine()); // 添加定位控件 map.addControl(new ol.control.MousePosition({ coordinateFormat: ol.coordinate.createStringXY(4), projection: 'EPSG:4326...
Openlayers实战：个性化比例尺
大剑师兰特的GIS世界
07-04 383
Openlayers地图中，比例尺经常会用到，所以在我们的实战课程里，详细讲一下其用法，个性化其样式。
OpenLayers加载鹰眼、比例尺、坐标显示
xiao猪仙的博客
08-28 4276
OpenLayers加载鹰眼、比例尺、坐标主要内容加载鹰眼控件加载比例尺控件加载坐标显示关键代码 主要内容 上一期说的如何基于Vue创建OpenLayers应用，这次说说如何加载常用的OpenLayers控件，主要有鹰眼、比例尺、坐标显示。 加载鹰眼控件 1.根据官方文档，首先引入依赖 我们可以这样引入 import { OverviewMap, defaults } from "ol/control"; 2.添加鹰眼控件代码 定义map的control属性，实例化一个鹰眼地图，这里注意鹰眼图不显示或
openlayers修改样式,OpenLayers修改要素样式而不会覆盖交互样式
weixin_28716769的博客
12-22 2109
Is there any way to modify a single feature's style without modifying default style on select interaction?Here is a simple piece of code showing my problem and a jsfiddleMinimal html :And a simple scr...
[1]openlayers API之地图比例尺ScaleLine
NancyHelloWorld的博客
12-07 3675
参考书籍《WebGIS之OpenLayers全面解析》，研究OpenLayers的API，做一些exercise。       地图比例尺表示地图上距离按一定比例比实际缩小的程度，表示为地图的缩小程度，又称为缩尺，这里用到的OpenLayers3封装的比例尺控件ol.control.ScaleLine。       本例在加载OSM地图的基础上加载比例尺控件，显示在地图容器的左下角。 S
openlayers入门学习二——比例尺控件
七月❤的博客
10-23 971
<template> <div id="map" ref="rootmap"> </div> </template> <script> import ol from 'openlayers'; export default { name: 'app', data: function () { return ...
Openlayers实例详解
08-09
本课程选取了OpenLayers一些具有典型代表性的实例进行详解。讲解实例过程中对涉及到的相关知识点进行穿插分析介绍，适合初学者对OpenLayers形成整体认识、树立学习信心。课程涉及到map、view、projection、layer、source、feature、style、overlay、control等组件的实例分析。
020：vue+openlayers设置显示全屏功能（示例代码）
大剑师兰特的GIS世界
08-10 1087
本示例的目的是介绍演示如何在openlayers中使添加使用全屏控件，呈现全屏和还原的效果。直接复制 vue+openlayers源代码，操作2分钟即可运行实现效果
openlayers修改样式_OpenLayers教程：多源数据加载之WMTS
weixin_33506900的博客
01-05 1385
一、WMTS简介 WMTS，即Web地图瓦片服务（Web Map Tile Service），由OGC（开放地理信息联盟）制定。根据WMTS标准，可以使我们轻松的访问瓦片数据。 WMTS提供了一种采用预定义地图瓦片发布数字地图服务的标准化解决方案，它最重要的特征是采用瓦片缓存技术缓解WebGIS服务器端数据处理的压力，提高前后端交互响应速度。 WMS（Web地图服务）提供可定制地图的服...
OpenLayers官方示例详解十五之比例尺控件（Scale Line）
不睡觉的怪叔叔的博客
12-25 5719
目录   一、示例简介 二、代码详解 一、示例简介     本示例展示了如何创建一个比例尺控件（ol.control.ScaleLine），同时让比例尺控件的单位根据用户的选择而改变。     OpenLayers中比例尺控件支持的单位有： metric    ——    通用的，以千米为单位 us    ——    美国单位 nautical    ——    航海单位 im...
openlayers中比例尺的计算原理
高端客户
12-01 4065
3、点分辨率 4 屏幕初始化：中心点 、空间分辨率 5 屏幕上1像素代表的实际距离是多少？ 在计算瓦片的行列号之前，我们需要得到图上一像素代表实际距离多少米。现在假设地图的坐标单位是米，dpi为96 ； 1英寸=2.54厘米； 1英寸=96像素； 最终换算的单位是米； 如果当前地图比例尺为1:125000000，则代表图上1米等于实地125000000米； 米和像素间的换算公式： 1英寸=0.02...
openlayers显示比例尺
weixin_30273175的博客
08-09 1116
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="lib/OpenLayers/ol.css" type="text/css"&g...
OpenLayers3教程：显示比例尺与地图交互
在OpenLayers 3中，比例尺是通过`ol.control.ScaleLine`控件实现的，可以方便地显示地图当前缩放级别的比例信息。教程还涵盖了OpenLayers 3的基本概念、地图的创建、图层管理、交互控件以及矢量图层的样式设置等，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值