Openlayers學習之地圖比例尺控件
更新時間：2020年09月28日 11:51:27 作者：桃李不言_下自成蹊
這篇文章主要為大家詳細介紹了Openlayers學習之地圖比例尺控件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了Openlayers地圖比例尺控件的具體代碼，供大家參考，具體內(nèi)容如下
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ā)生相應的改變
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了javascript實現(xiàn)隨機生成DIV背景色的具體代碼，如何設置DIV背景色為隨機色，感興趣的小伙伴們可以參考一下2016-06-06
js的map、flatMap和find、filter的使用詳解
map和flatMap都是返回一個新數(shù)組,map不會改變數(shù)組長度,flatMap可以改變長度,find和filter都是過濾操作,find只會返回第一個找到的值,而filter會返回全部符合要求的對象2024-12-12
這篇文章主要介紹了小程序開發(fā)基礎之view視圖容器，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
JAVASCRIPT中keycode總結，方便需要控制keycode的朋友2009-02-02
在html中引入外部js文件,并調(diào)用帶參函數(shù)的方法
下面小編就為大家?guī)硪黄趆tml中引入外部js文件,并調(diào)用帶參函數(shù)的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
要慎用readonly和disabled, 指定了disabled的表單,在submit時,不會把它的值傳出去, 如下所示,有兩個text,一個是readonly一個是disabled,submit后,只能發(fā)送那個不是disabled的,注意地址欄的值. 要保存到本地,因為submit了,不然,看不到效果.2008-04-04
這篇文章主要介紹了基于javascript處理二進制圖片流過程詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-06-06
ESLint是一個流行的JavaScript代碼檢查工具,它可以幫助團隊確保代碼質(zhì)量,避免常見的錯誤和格式問題,這篇文章主要給大家介紹了關于前端技巧之ESLint忽略檢查行和文件的相關資料,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了JS實現(xiàn)勻速與減速緩慢運動的動畫效果,結合實例形式分析了JavaScript封裝結合定時器的頁面元素動態(tài)變換效果動畫相關操作技巧,需要的朋友可以參考下2018-08-08
ECharts餅圖的顏色可以通過多種方式進行設置,下面這篇文章主要給大家介紹了關于echarts餅圖自定義設置顏色的3種實現(xiàn)方式,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-02-02