中心点按钮、地图放大缩小滑块、全图和比例尺控件
直接上代码：
<!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>
![[深度学习]神经网络](https://i-blog.csdnimg.cn/direct/1c538e3f8e754a3f84a46eb2bdba4de2.png)
