Openlayers學習之地圖比例尺控件
更新時間：2020年09月28日 11:51:27 作者：桃李不言_下自成蹊
這篇文章主要為大家詳細介紹了Openlayers學習之地圖比例尺控件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了Openlayers地圖比例尺控件的具體代碼，供大家參考，具體內容如下
1、新建一個html頁面，引入ol.js和ol.css文件，然后在body中創(chuàng)建兩個div標簽，分別用來作為地圖和比例尺控件的容器；
2、代碼實現(xiàn)
<!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 () {
//實例化比例尺控件
var scaleLineControl = new ol.control.ScaleLine({
//設置度量單位為米
units: 'metric',
target: 'scalebar',
className: 'ol-scale-line'
});
//實例化地圖控件
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source:new ol.source.OSM()
}),
],
view: new ol.View({
center: [0, 0],
zoom:2
}),
});
//將比例尺控件加入到map中
map.addControl(scaleLineControl);
};
</script>
</head>
<body>
<div id="map"></div>
<div id="scalebar"></div>
</body>
</html>
3、運行結果
地圖初始化的時候就能在左下角看見比例尺控件
隨著地圖的放大和縮小，比例尺的值也會發(fā)生相應的改變
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要給大家介紹了關于WPS的JS宏操作方法總結的相關資料,WPS是一款常用的辦公軟件,其中的JS宏功能可以幫助用戶實現(xiàn)自動化操作和批量處理等需求,需要的朋友可以參考下2023-09-09
在開發(fā)微信小程序時,有需求需要使用到柱狀圖,餅圖等圖表,下面這篇文章主要給大家介紹了關于小程序中使用echarts的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了js+html5實現(xiàn)可在手機上玩的拼圖游戲,涉及javascript結合html5進行圖形操作的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
這篇文章主要為大家詳細介紹了原JS實現(xiàn)banner圖的常用功能，，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
在寫原生的Javascript的時候，因為IE的JS引擎與標準瀏覽器的JS引擎之間總有那么些差異，所以經常會去判斷是否是IE瀏覽器2014-04-04
這篇文章主要為大家詳細介紹了js+canvas實現(xiàn)驗證碼功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
javascript限制文本框只允許輸入數(shù)字(曾經與現(xiàn)在的方法對比)
很多時候需要用到限制文本框的數(shù)字輸入，試過許多方法，都不太理想，遂決定自己實現(xiàn)一個來玩玩,接下來介紹曾經使用過的方法與自定義方法的對比，感興趣的朋友可以了解下啊2013-01-01
這篇文章主要介紹了js獲取當前日期前七天的方法,涉及javascript中for語句及日期操作的技巧,需要的朋友可以參考下2015-02-02
這篇文章主要為大家詳細介紹了JS實現(xiàn)拼圖游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
javascript獲取網頁中指定節(jié)點的父節(jié)點、子節(jié)點的方法小結
如何獲取要更新的這些元素呢?用JavaScript獲取這些節(jié)點的方法有很多種，下面是總結的一些方法，感興趣的朋友可以參考下哈2013-04-04