中心点按钮、地图放大缩小滑块、全图和比例尺控件
直接上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--在线引用ol3
<script src="https://cdn.jsdelivr.net/npm/ol@v10.1.0/dist/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v10.1.0/ol.css">
-->
<!--离线引用ol3-->
<script src="./v10.0.0-package/dist/ol.js"></script>
<link rel="stylesheet" href="./v10.0.0-package/ol.css">
<title>初始化地图</title>
<style>
*{margin:0;padding:0}
#map{
width:100vw;
height: 100vh;
}
.ol-zoomslider {
top: 7.5em;
left: .5em;
height: 200px;
}
</style>
</head>
<body>
<div id="map">
<button id="btn" onclick='btn()'>按钮</button>
</div>
<script>
/***初始化一个高德地图***/
const gaodeLayer = new ol.layer.Tile({
title:"高德地图",
source:new ol.source.XYZ({
// 有标注电子地图
url:'http://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}',
// 无标注影像地图
//url:'https://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
// 影像地图路网
//url:'https://wprd0{1-4}.is.autonavi.com/appmaptile?&x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=8<ype=11',
wrapX:false
})
});
const map = new ol.Map({
target:"map",
layers:[
gaodeLayer
],
view:new ol.View({
//xy值转至经纬度
//center:ol.proj.transform([13951671.781120978, 5449979.971864047], 'EPSG:3857','EPSG:4326' ),
//projection:'EPSG:4326',
// 经纬度转至xy值
center:ol.proj.transform([125.33,43.90],'EPSG:4326', 'EPSG:3857'),
zoom:11
}),
});
// 放大缩小滑动控件
const zoomSlider = new ol.control.ZoomSlider();
map.addControl(zoomSlider);
// 全屏控件
const fullScreen = new ol.control.FullScreen();
map.addControl(fullScreen);
// 比例尺
const scale = new ol.control.ScaleLine();
map.addControl(scale);
// 范围
// 定位范围控件
const zoomToExtent = new ol.control.ZoomToExtent({
// 吉林市范围
extent:[14042852.042145478, 5425525.753594573, 14129222.565575363, 5452876.419347371]
})
map.addControl(zoomToExtent);
function btn() {
// 获取当前可见视图范围
//console.log(map.getView().calculateExtent())
// 设置中心点
map.getView().setCenter(ol.proj.transform([125.33,43.90], 'EPSG:4326', 'EPSG:3857'));
}
/*
1、通过样式信息和几何信息构建点要素
*/
const point = new ol.Feature({
geometry:new ol.geom.Point([125.33,43.90]),
});
let style = new ol.style.Style({
/* image属性设置点要素的样式 */
image:new ol.style.Circle({
/* radius设置点的班级 单位：degree*/
radius:100,
fill:new ol.style.Fill({
color:"#ff2d51"
}),
/*设置边框*/
stroke:new ol.style.Stroke({
width:2,
color:"#333"
})
})
})
point.setStyle(style);
/*2、将要素添加到矢量数据源*/
let source = new ol.source.Vector({
features:[point]
})
/*3、将矢量数据源添加到矢量图层*/
let layer = new ol.layer.Vector({
source
})
/*4、添加矢量图层到地图容器*/
map.addLayer(layer);
/***
* 初始化一个天地图
*
* vec_w - 地图；img_w - 影像；ter_w - 地形； cva_w - 地图标注
*
* tk="天地图申请的密钥"
* ***/
/*const tdtVECLayer = new ol.layer.Tile({
title:"高德地图地图",
source:new ol.source.XYZ({
url:'http://t{0-7}.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=352d4b1313777a8643542046a28d17e5',
wrapX:false
})
});
const tdtCVALayer = new ol.layer.Tile({
title:"高德地图标注",
source:new ol.source.XYZ({
url:'http://t{0-7}.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=352d4b1313777a8643542046a28d17e5',
wrapX:false
})
});
const map = new ol.Map({
target:"map",
layers:[
tdtVECLayer,
tdtCVALayer
],
view:new ol.View({
// EPSG:3857投影
center:[13951671.781120978, 5449979.971864047],
projection:'EPSG:3857',
// EPSG:4326投影
//center:[125.33,43.90],
//projection:'EPSG:4326',
zoom:11,
})
});*/
</script>
</body>
</html>
![sicp每日一题[2.24-2.27]](https://i-blog.csdnimg.cn/direct/6f33a360fd7f47ebb6fd022c7cc0b395.png)
