openlayers学习二：画多边形

最新推荐文章于 2025-07-09 16:09:08 发布

原创最新推荐文章于 2025-07-09 16:09:08 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

openlayers 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个使用OpenLayers库实现的地图绘制应用，用户可以选择绘制多边形、点、线和圆等几何图形，并提供了坐标系转换的功能。通过简单的交互操作即可在地图上绘制所需的图形。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>画多边形</title>
    <script src="dist/ol.js"></script>
    <link rel="stylesheet" href="dist/ol.css">
<style>
    #map{
        width: 100%;
        height: 500px;
    }
</style>
</head>
<body>
<div id="map"></div>

<form class="form-inline">
    <label>几何类型 &nbsp;</label>
    <select name="" id="type">
        <option value="Polygon">多边形</option>
        <option value="Point">点</option>
        <option value="LineString">线</option>
        <option value="Circle">圆</option>
        <option value="None">无</option>
    </select>
</form>
<div id="content"></div>

<script type="text/javascript">
    var raster = new ol.layer.Tile({
        source:new ol.source.OSM()
    });
    //ol.source.Vector，提供矢量图层数据，继承自 ol.source.Source
    //wrapX，是否在地图水平坐标轴上重复，默认是true
    var source = new ol.source.Vector({wrapX:false});
    //ol.layer.Vector用于显示在客户端渲染的矢量数据。
    var vector = new ol.layer.Vector({
        source:source
    });

    //地图部分
    var map = new ol.Map({
        //设置地图图层
        layers:[raster,vector],
        // 让id为map的div作为地图的容器
        target:'map',
        // 设置显示地图的视图
        view:new ol.View({
            center:[0,0],  // 定义地图显示中心
            zoom:4  //缩放层级
        }),

    });

    //下拉列表切换
    var typeSelect = document.getElementById('type');
    //添加形状的函数
    var draw;
    function addInteraction() {
        var value = typeSelect.value;
        if(value !== 'None'){
            //ol.interaction.Draw该类允许用户在地图上绘制一些几何图形，
            // 可以通过构造方法设置type属性来指写是绘制哪种几何图形。目前支持点，线，多边形，圆形。
            draw = new ol.interaction.Draw({
                source:source,// 注意设置source，这样绘制好的线，就会添加到这个source里
                type: (typeSelect.value)
            });
            map.addInteraction(draw);
        }
    }
    typeSelect.onchange = function () {
        map.removeInteraction(draw);
        addInteraction();
    };
    addInteraction();

    //向地图中添加点击处理程序以显示坐标系。
    var content = document.getElementById('content');
    map.on('click',function (evt) {
        //坐标
        var coordinate = evt.coordinate;
        console.log(coordinate);
        //ol.proj.transform(coordinate:source, destination)转换不同的坐标系
        var hdms = ol.proj.transform(
            coordinate,'EPSG:3857','EPSG:4326'
    );
    content.innerHTML = "坐标系："+hdms;
    });

</script>
</body>
</html>