238 lines
6.5 KiB
Markdown
238 lines
6.5 KiB
Markdown
---
|
||
title: 常用控件
|
||
date: 2020-10-29
|
||
author: ac
|
||
tags:
|
||
- OpenLayers
|
||
categories:
|
||
- GIS
|
||
---
|
||
|
||
## 常用控件
|
||
|
||
<img src="./images/image34567.png" alt="image34567" style="zoom:80%;" />
|
||
|
||
### 1. 初始化地图
|
||
|
||
```html
|
||
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<link rel="stylesheet" href="css/ol.css" type="text/css">
|
||
<style>
|
||
.map {
|
||
height: 400px;
|
||
width: 100%;
|
||
}
|
||
</style>
|
||
<script src="lib/ol.js"></script>
|
||
<title>常用控件示例</title>
|
||
</head>
|
||
<body>
|
||
<h2>常用控件示例</h2>
|
||
<div id="mouse_position"></div>
|
||
<div id="map" class="map"></div>
|
||
<div id="scaleline" style="position: relative;height: 50px;"></div>
|
||
<script>
|
||
var shenzhen = [113.958334, 22.535640];
|
||
var map = new ol.Map({
|
||
view: new ol.View({
|
||
center: ol.proj.fromLonLat(shenzhen),
|
||
zoom: 10,
|
||
// rotation: Math.PI/6
|
||
}),
|
||
layers: [
|
||
new ol.layer.Tile({
|
||
source: new ol.source.OSM()
|
||
})
|
||
],
|
||
target: "map"
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
|
||
|
||
### 2. 缩放控件
|
||
|
||
`ol.control.ZoomSlider`用于控制地图的缩放级别。
|
||
|
||
```javascript
|
||
var zoomslider = new ol.control.ZoomSlider();
|
||
map.addControl(zoomslider);
|
||
```
|
||
|
||
|
||
|
||
### 3. 复位（定位）控件
|
||
|
||
`ol.control.ZoomToExtent`用于将地图视图定位到指定区域，可以实现像书签、收藏等类似的功能。
|
||
|
||
```javascript
|
||
//复位（定位）控件
|
||
var initExtent = map.getView().calculateExtent();
|
||
var zoomToExtent = new ol.control.ZoomToExtent({
|
||
extent: initExtent
|
||
});
|
||
map.addControl(zoomToExtent);//可以作为复位按钮
|
||
```
|
||
|
||
|
||
|
||
### 4. 鼠标位置控件
|
||
|
||
`ol.control.MousePosition`用于显示鼠标所在地图上的位置信息。
|
||
|
||
```javascript
|
||
var mouseControl = new ol.control.MousePosition({
|
||
coordinateFormat: ol.coordinate.createStringXY(4) //坐标格式
|
||
, projection: 'EPSG:3857' //投影坐标系
|
||
, className: 'custom-mouse' //自定义的坐标信息显示样式
|
||
, target: document.getElementById("mouse_position") //需要dom对象
|
||
, undefinedHTML: ' ' //定义未定义坐标的标记
|
||
});
|
||
map.addControl(mouseControl);
|
||
```
|
||
|
||
|
||
|
||
### 5. 比例尺控件
|
||
|
||
```javascript
|
||
//比例尺控件
|
||
var scaleLineControl = new ol.control.ScaleLine({
|
||
units: "metric",//设置比例尺单位,支持degrees/imperial/us/nautical/metric，默认:metric
|
||
target: "scaleline",//设置target，将控件渲染到地图视图外部,不指定默认在地图左下角
|
||
});
|
||
map.addControl(scaleLineControl);
|
||
```
|
||
|
||
当`ScaleLine`控件不指定`target`属性时默认在地图视图内部的左下角。
|
||
|
||
|
||
|
||
### 6.鹰眼控件
|
||
|
||
```javascript
|
||
//鹰眼控件
|
||
var overviewControl = new ol.control.OverviewMap({
|
||
layers: [ // 在鹰眼中加载相同坐标系下不同数据源的图层
|
||
new ol.layer.Tile({
|
||
source: new ol.source.OSM()
|
||
})
|
||
]
|
||
,collapseLabel: "\u00BB" //展开时功能按钮上的标识
|
||
,label: "\u00AB" //折叠时功能按钮上的标识
|
||
,collapsed: false //初始状态是否展开
|
||
});
|
||
map.addControl(overviewControl);
|
||
```
|
||
|
||
|
||
|
||
### 7. 全屏显示控件
|
||
|
||
```javascript
|
||
//全屏显示控件
|
||
var fullSreen = new ol.control.FullScreen();
|
||
map.addControl(fullSreen);
|
||
```
|
||
|
||
控件的构造器中都提供了自定义样式的`className`属性，控件的位置由`CSS`样式决定。
|
||
|
||
|
||
|
||
### 完整代码
|
||
|
||
```html
|
||
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<link rel="stylesheet" href="css/ol.css" type="text/css">
|
||
<style>
|
||
.map {
|
||
height: 400px;
|
||
width: 100%;
|
||
}
|
||
</style>
|
||
<script src="lib/ol.js"></script>
|
||
<title>常用控件示例</title>
|
||
</head>
|
||
<body>
|
||
<h2>常用控件示例</h2>
|
||
<div id="mouse_position"></div>
|
||
<div id="map" class="map"></div>
|
||
<div id="scaleline" style="position: relative;height: 50px;"></div>
|
||
<script>
|
||
var shenzhen = [113.958334, 22.535640];
|
||
var map = new ol.Map({
|
||
view: new ol.View({
|
||
center: ol.proj.fromLonLat(shenzhen),
|
||
zoom: 10,
|
||
// rotation: Math.PI/6
|
||
}),
|
||
layers: [
|
||
new ol.layer.Tile({
|
||
source: new ol.source.OSM()
|
||
})
|
||
],
|
||
target: "map"
|
||
});
|
||
map.on("click",function (e) {
|
||
var point = e.coordinate;
|
||
console.log("x:"+point[0]+",y:"+point[1]);
|
||
});
|
||
//导航控件
|
||
var zoomslider = new ol.control.ZoomSlider();
|
||
map.addControl(zoomslider);
|
||
|
||
//复位（定位）控件
|
||
var initExtent = map.getView().calculateExtent();
|
||
var zoomToExtent = new ol.control.ZoomToExtent({
|
||
extent: initExtent
|
||
});
|
||
map.addControl(zoomToExtent);//可以作为复位按钮
|
||
|
||
//鼠标位置控件
|
||
var mouseControl = new ol.control.MousePosition({
|
||
coordinateFormat: ol.coordinate.createStringXY(4) //坐标格式
|
||
, projection: 'EPSG:3857' //投影坐标系
|
||
, className: 'custom-mouse' //自定义的坐标信息显示样式
|
||
, target: document.getElementById("mouse_position") //需要dom对象
|
||
, undefinedHTML: ' ' //定义未定义坐标的标记
|
||
});
|
||
map.addControl(mouseControl);
|
||
|
||
//比例尺控件
|
||
var scaleLineControl = new ol.control.ScaleLine({
|
||
units: "metric",//设置比例尺单位,支持degrees/imperial/us/nautical/metric，默认:metric
|
||
target: "scaleline",//设置target，将控件渲染到地图视图外部,不指定默认在地图左下角
|
||
});
|
||
map.addControl(scaleLineControl);
|
||
|
||
//鹰眼控件
|
||
var overviewControl = new ol.control.OverviewMap({
|
||
layers: [ // 在鹰眼中加载相同坐标系下不同数据源的图层
|
||
new ol.layer.Tile({
|
||
source: new ol.source.OSM()
|
||
})
|
||
]
|
||
,collapseLabel: "\u00BB" //展开时功能按钮上的标识
|
||
,label: "\u00AB" //折叠时功能按钮上的标识
|
||
,collapsed: false //初始状态是否展开
|
||
});
|
||
map.addControl(overviewControl);
|
||
|
||
//全屏显示控件
|
||
var fullSreen = new ol.control.FullScreen();
|
||
map.addControl(fullSreen);
|
||
</script>
|
||
</body>
|
||
</html>
|
||
```
|
||
|