OpenLayers 图形绘制

❝

注：当前使用的是 ol 5.3.0 版本，天地图使用的key请到天地图官网申请，并替换为自己的key

图形绘制功能是指在地图容器中绘制点、线、面、圆、矩形等图形。图形绘制功能在WebGIS中具有重要作用，可以辅助查询、编辑、分析功能。本节主要介绍加载图形绘制。

1. 图形绘制原理

图形绘制通过地图单击事件开始绘制，鼠标移动事件绘制临时对象，鼠标双击事件或者右键事件结束绘制。可以通过鼠标事件自定义实现图形绘制，也可以通过地图库提供的交互事件进行绘制。

2. 图形绘制结构页面

本示例主要介绍点、线、面、圆、正方形、矩形的绘制。

ini 复制代码

<div id="map" title="地图显示"></div>
<div class="draw-div">
    <label for="">绘制几何图形：&nbsp;</label>
    <select name="" id="draw-type">
        <option value="None">无</option>
        <option value="Point">点</option>
        <option value="LineString">线</option>
        <option value="Polygon">面</option>
        <option value="Circle">圆</option>
        <option value="Square">正方形</option>
        <option value="Box">矩形</option>
    </select>
</div>

创建图层数据源和样式

css 复制代码

const vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector({
    wrapX: false
  }),
  style: new ol.style.Style({
    fill: new ol.style.Fill({
      color: "#9b65ff30"
    }),
    stroke: new ol.style.Stroke({
      color: "yellow",
      width: 2.5,
    }),
    image: new ol.style.Circle({
      fill: new ol.style.Fill({
        color: "blue"
      }),
      radius: 2.5,
      stroke: new ol.style.Stroke({
        color: "blue",
        width: 1.5,
      }),
    })
  })
})

3. 完整代码

其中libs文件夹下的包需要更换为自己下载的本地包或者引用在线资源。

xml 复制代码

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>绘制几何图形</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="../libs/css/ol.css">
    <script src="../libs/js/ol-5.3.3.js"></script>
    <script src="../libs/js/jquery-2.1.1.min.js"></script>

    <style>
        * {
            padding: 0;
            margin: 0;
            font-size: 14px;
            font-family: '微软雅黑';
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        #map {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .ol-mouse-position {
            padding: 5px;
            top: 10px;
            height: 40px;
            line-height: 40px;
            background: #060505ba;
            text-align: center;
            color: #fff;
            border-radius: 5px;
        }

        .draw-div {
            position: relative;
            margin: 0 auto;
            top: 50px;
            width: 180px;
            background-color: #060505ba;
            text-align: center;
            padding: 5px 10px;
            color: #ddd;
            border-radius: 2.5px;
            filter: brightness(0.95);
        }

        .load-div:hover {
            cursor: pointer;
            /* font-size: 16px; */
            transition: font-size .2s;
            fill-opacity: 0.8;
            filter: brightness(1);
            color: #fff;
        }
    </style>
</head>

<body>
    <div id="map" title="地图显示"></div>
    <div class="draw-div">
        <label for="">绘制几何图形：&nbsp;</label>
        <select name="" id="draw-type">
            <option value="None">无</option>
            <option value="Point">点</option>
            <option value="LineString">线</option>
            <option value="Polygon">面</option>
            <option value="Circle">圆</option>
            <option value="Square">正方形</option>
            <option value="Box">矩形</option>
        </select>
    </div>
</body>

</html>

<script>
    //==============================================================================//
    //============================天地图服务参数简单介绍==============================//
    //================================vec：矢量图层==================================//
    //================================img：影像图层==================================//
    //================================cva：注记图层==================================//
    //======================其中：_c表示经纬度投影，_w表示球面墨卡托投影================//
    //==============================================================================//
    const TDTImgLayer = new ol.layer.Tile({
        title: "天地图影像图层",
        source: new ol.source.XYZ({
            url: "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2",
            attibutions: "天地图注记描述",
            crossOrigin: "anoymous",
            wrapX: false
        })
    })
    const TDTImgCvaLayer = new ol.layer.Tile({
        title: "天地图影像注记图层",
        source: new ol.source.XYZ({
            url: "http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2",
            attibutions: "天地图注记描述",
            crossOrigin: "anoymous",
            wrapX: false
        })
    })
    const map = new ol.Map({
        target: "map",
        loadTilesWhileInteracting: true,
        view: new ol.View({
            center: [11421771, 4288300],
            zoom: 5,
            worldsWrap: true,
            minZoom: 1,
            maxZoom: 20,
            projection: 'EPSG:3857'
        }),
        // 鼠标控件：鼠标在地图上移动时显示坐标信息。
        controls: ol.control.defaults().extend([
            // 加载鼠标控件
            new ol.control.MousePosition()
        ])
    })

    const gaodeLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            title: "高德",
            url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}"
        })
    })
    map.addLayer(gaodeLayer)

    let draw = null
    let drawType = document.querySelector("#draw-type")

    const source = new ol.source.Vector({
        wrapX: false
    })
    const vectorLayer = new ol.layer.Vector({
        source: source,
        style: new ol.style.Style({
            fill: new ol.style.Fill({
                color: "#9b65ff30"
            }),
            stroke: new ol.style.Stroke({
                color: "yellow",
                width: 2.5,
            }),
            image: new ol.style.Circle({
                fill: new ol.style.Fill({
                    color: "blue"
                }),
                radius: 2.5,
                stroke: new ol.style.Stroke({
                    color: "blue",
                    width: 1.5,
                }),
            })
        })
    })
    map.addLayer(vectorLayer)

    // 获取地图容器元素
    const mapContainer = map.getTargetElement()

    // 监听绘制更改事件
    drawType.onchange = (evt) => {
        if (draw) {
            clearInteraction()
        }
        addInteraction(drawType.value)
    }

    // 添加交互绘制
    function addInteraction(value) {
        if (value === "None") {
            clearInteraction()
            return
        }
        mapContainer.style.cursor = "crosshair"
        let geometryFunction = null
        switch (value) {
            case "Square":
                // 方形
                value = "Square"
                geometryFunction = ol.interaction.Draw.createRegularPolygon(4)
                break
            case "Box":
                // 矩形
                value = "LineString"
                geometryFunction = ol.interaction.Draw.createBox()
        }
        draw = new ol.interaction.Draw({
            source: vectorLayer.getSource(),
            type: value,
            geometryFunction: geometryFunction
        })
        map.addInteraction(draw)
    }
    // 清除交互对象
    function clearInteraction() {
        mapContainer.style.cursor = 'pointer'
        map.removeInteraction(draw)
        draw = null
        // 清除绘制对象
        // source.clear()
    }
</script>

❝

OpenLayers示例数据下载，请回复关键字：ol数据

全国信息化工程师－GIS 应用水平考试资料，请回复关键字：GIS考试
❝

【GIS之路】 已经接入了智能助手，欢迎关注，欢迎提问。

欢迎访问我的博客网站-长谈GIS ：http://shanhaitalk.com

都看到这了，不要忘记点赞、收藏 + 关注哦！

本号不定时更新有关 GIS开发 相关内容，欢迎关注 !