openlayers创建地图以及添加鼠标光标二维坐标的控件

最新推荐文章于 2024-03-25 00:00:00 发布

~HT猫L~

最新推荐文章于 2024-03-25 00:00:00 发布

阅读量889

点赞数

分类专栏： openlayers 文章标签： openlayers

本文链接：https://blog.csdn.net/weixin_44614518/article/details/121751180

版权

本文为初学者提供了清晰的指南，如何使用OpenLayers创建地图，并详细介绍了如何添加一个显示鼠标光标二维坐标的控制组件。通过跟随步骤，读者可以实现地图的显示以及实时坐标显示功能。

摘要由CSDN通过智能技术生成

对小白极其友好，希望这篇文章是刚刚入门看不懂英文官网的小白的一根救命“稻草”

话不多说，先上代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <!-- 引入openlayers样式 -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/css/ol.css" type="text/css">
       <!-- 引入openlayers的js -->
        <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/build/ol.js"></script>
        <title>OpenLayers example</title>
        <style>
            .map {
            //这样地图可以铺满全屏
              position: absolute;
              top: 0;
              bottom: 0;
              left: 0;
              right: 0;
            }            
          </style>
      </head>
      <body>