Control

openlayers中control是用来控制地图的元件
https://openlayers.org/en/latest/apidoc/module-ol_control_Control-Control.html

这边只说明几个常用的，其他如果想学习可以透过上图关键字另外去查询

controldefaults：是地图默认的控制元件，zoom in/outFullScreen：控制web全萤幕的按钮MousePosition：可以取得滑鼠座标，透过js控制显示在你想要的网页位置OverviewMap：鹰眼控制元件，可以透过小地图知道对应位置ScaleLine：比例尺

今天我们要玩的是取得滑鼠座标，也是直接进入程式码的世界中来思考吧，因为我不喜欢拖泥带水的解释。

const map = new ol.Map({    layers: [        new ol.layer.Tile({            source: new ol.source.OSM()        })    ],    target: 'map',    view: new ol.View({        projection: "EPSG:3857",        center: ol.proj.fromLonLat([120.846642, 23.488793]),        zoom: 7.5,        maxZoom: 20,        minZoom: 5,        enableRotation: false,    }),    controls: []});var mousePositionControl = new ol.control.MousePosition({        // 设定座标格式    coordinateFormat: ol.coordinate.createStringXY(4),         // 设定显示的座标系统    projection: "EPSG:4326",        // 可以自定义Class名称(地图Canva中)    // className: "custom-mouse-position",        // 若需要控制"地图外"，可以用这个参数指定    // target: document.getElementById("mouse-position"),    });map.addControl(mousePositionControl);

className和target的参数选择一个就可以了，设定好后再另外透过css去控制位置或是颜色、字体大小，依照自己喜欢的样子来修改

如果你成功的话，可以在右上角看到座标，如下图

参考连结

https://github.com/weijung0923/learning-openlayers-micromastery/tree/day06