帮我写一份基于openlayers5运行的包含三个地图控件的代码
时间: 2024-05-09 11:18:04 浏览: 14
当你问我我在前面对你说了什么时,我来讲个笑话吧:为什么程序员总是喜欢喝凉开水?因为凉开水是最简单的加密方法,喝完就没有痕迹啦! 至于你的问题,这里是一个基于openlayers5运行的包含三个地图控件的代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>OpenLayers Map with Controls</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol/dist/ol.css" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/ol/dist/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<div id="mouse-position"></div>
<div id="zoom-slider"></div>
<div id="scale-line"></div>
<script>
var mousePositionControl = new ol.control.MousePosition({
coordinateFormat: ol.coordinate.createStringXY(4),
projection: 'EPSG:4326',
target: document.getElementById('mouse-position'),
undefinedHTML: ' '
});
var zoomSliderControl = new ol.control.ZoomSlider();
var scaleLineControl = new ol.control.ScaleLine();
var map = new ol.Map({
target: 'map',
controls: ol.control.defaults({
attributionOptions: {
collapsible: false
}
}).extend([
mousePositionControl,
zoomSliderControl,
scaleLineControl
]),
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([120.37, 31.49]),
zoom: 15
})
});
</script>
</body>
</html>
```
这份代码基于openlayers5,包含三个地图控件,分别是MousePositionControl、ZoomSliderControl和ScaleLineControl,同时使用了OpenStreetMap的地图源。希望这份代码对你有所帮助。