OpenLayers 3实践与原理探究3-ol3一个完整的例子

最新推荐文章于 2025-10-14 08:16:56 发布

原创

最新推荐文章于 2025-10-14 08:16:56 发布 · 6.6k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#OpenLayers #OL3

本文详细介绍使用OL3实现地图绘制功能，包括点、线、面等几何对象的绘制及地图打印功能。提供了完整的示例代码，展示了如何通过JavaScript与OL3 API实现地图的自定义工具栏，并对地图进行打印。

【注】所有代码挂在我的github上，本例对应demo2

接着我们看一个比较长的例子，例子实现的是可以绘制图形，可以根据自己的设置打印地图
我们先看显示效果是：
ol3完整例子显示效果
由于ol3的api现在更新变化挺大的，所以自己运行的例子的时候注意版本是3.17.1
例子中的解释比较详细，不具体进行展开介绍。本例子主要分为三部分，在js文件中已经隔开
- 第一部分是地图的初始化，包括添加图层，添加控件
- 第二部分加个标注点，点击显示位置的弹出框
- 第三部分自定义工具，包括点、线、面、圆形、菱形、矩形、多边形的绘制工具和打印地图工具
为了节省篇幅，index.css在这里就不在列出，代码挂在我的github上，本例对应demo2,详情可以查看百度云共享的资源
indxe.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>完整的例子</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="pubjs/v3.17.1-dist/ol.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>
</head>

<body>
    <div class="toolsets">
        <button id="search-position" class="search-position btn btn-success  btn-sm">查询坐标</button>
        <button id="draw-point" class="draw-point btn btn-success  btn-sm">点</button>
        <button id="draw-line" class="draw-line btn btn-success  btn-sm">线</button>
        <button id="draw-ploygon" class="draw-ploygon btn btn-success  btn-sm">多边形</button>
        <button id="draw-circle" class="draw-circle btn btn-success  btn-sm">圆形</button>
        <button id="draw-square" class="draw-square btn btn-success  btn-sm">菱形</button>
        <button id="draw-box" class="draw-box btn btn-success  btn-sm">矩形</button>
        <button id="reshape" class="reshape btn btn-info  btn-sm">修改形状</button>
        <button id="print" class