OpenLayers鼠标位置控件

一、示例简介

  1. 使用**鼠标位置控件**(ol/control/MousePosition)来动态显示地图上鼠标光标的坐标
  2. 并且可以由用户调整**投影**和**坐标精度**。

示例图如下所示:

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoanVlamlhbmc_size_16_color_FFFFFF_t_70

二、代码详解

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>Mouse Position</title>
  8. <link href="ol_v5.0.0/css/ol.css" rel="stylesheet" type="text/css" />
  9. <script src="ol_v5.0.0/build/ol.js" type="text/javascript"></script>
  10. </head>
  11. <body>
  12. <div id="map"></div>
  13. <div id="mouse-position"></div>
  14. <form>
  15. <label>Projection</label>
  16. <select id="projection">
  17. <option value="EPSG:4326">EPSG:4326</option>
  18. <option value="EPSG:3857">EPSG:3857</option>
  19. </select>
  20. <label>Precision</label>
  21. <input id="precision" type="number" min="0" max="12" value="4" />
  22. </form>
  23. <script>
  24. // 创建MousePosition控件
  25. var mousePositionControl = new ol.control.MousePosition({
  26. coordinateFormat: ol.coordinate.createStringXY(4), // 将坐标保留4位小数位,并转换为字符串
  27. projection: 'EPSG:4326', // 定义投影
  28. className: 'custom-mouse-position', // 控件的CSS类名
  29. target: document.getElementById('mouse-position'), // 将控件渲染在该DOM元素中
  30. undefinedHTML: ' ' // 鼠标离开地图时,显示空格
  31. });
  32. var map = new ol.Map({
  33. target: 'map',
  34. controls: ol.control.defaults().extend([mousePositionControl]), // 将鼠标位置控件加入到地图默认控件中
  35. layers: [
  36. new ol.layer.Tile({
  37. source: new ol.source.OSM() // 加入Open Street Map图层
  38. })
  39. ],
  40. view: new ol.View({
  41. center: [0, 0],
  42. zoom: 2
  43. })
  44. });
  45. var projectionSelect = document.getElementById("projection"); // 选取投影的控件
  46. projectionSelect.addEventListener('change', function(event){
  47. // 使mousePositionControl控件的投影与选取投影控件选取的投影一致
  48. mousePositionControl.setProjection(event.target.value);
  49. });
  50. var precisionInput = document.getElementById('precision');
  51. precisionInput.addEventListener('change', function(event){
  52. // 设置mousePositionControl控件的坐标格式
  53. var format = ol.coordinate.createStringXY(event.target.valueAsNumber);
  54. mousePositionControl.setCoordinateFormat(format);
  55. });
  56. </script>
  57. </body>
  58. </html>

发表评论

表情:
评论列表 (有 0 条评论,88人围观)

还没有评论,来说两句吧...

相关阅读