openlayers学习（六）绘图

最新推荐文章于 2024-08-17 09:00:00 发布

mylove10086

最新推荐文章于 2024-08-17 09:00:00 发布

阅读量925

点赞数

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

本文链接：https://blog.csdn.net/u014572215/article/details/109204781

版权

geoserver 专栏收录该内容

14 篇文章 18 订阅

订阅专栏

要完成的任务是绘制点、线、面、圆、正多边形，指定半径的圆

官方示例：https://openlayers.org/en/latest/examples/draw-features.html

1、初始化地图

var rootLayer = new ol.layer.Tile({
    source: new ol.source.XYZ({
        url: 'http://mt2.google.cn/vt/lyrs=y&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=G'
    }) //加载谷歌影像地图
});

var view = new ol.View({
    center: [113, 23],
    projection: 'EPSG:4326',
    zoom: 10
});
map = new ol.Map({
    layers: [rootLayer],
    target: 'map',
    view: view
});

source = new ol.source.Vector({wrapX: false});
var vector = new ol.layer.Vector({
    source: source,
});
map.addLayer(vector);

2、初始化绘图的类型

draw = new ol.interaction.Draw({
    //source: source,
    type: value,
    geometryFunction: geometryFunction,
});

3、效果如下

完整代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Draw Shapes</title>
    <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
    <script src="https://unpkg.com/elm-pep"></script>
    <style>
        .map {
            width: 100%;
            height: 400px;
        }
    </style>
    <link rel="stylesheet" href="../lib/openlayerv6.4.3/css/ol.css">
    <script src="../lib/openlayerv6.4.3/build/ol.js"></script>
</head>
<script>
    var map;
    var typeSelect;
    var draw; // global so we can remove it later
    var source;


    function init() {
        var rootLayer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: 'http://mt2.google.cn/vt/lyrs=y&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=G'
            }) //加载谷歌影像地图
        });

        var view = new ol.View({
            center: [113, 23],
            projection: 'EPSG:4326',
            zoom: 10
        });
        map = new ol.Map({
            layers: [rootLayer],
            target: 'map',
            view: view
        });

        source = new ol.source.Vector({wrapX: false});
        var vector = new ol.layer.Vector({
            source: source,
        });
        map.addLayer(vector);
        typeSelect = document.getElementById('type');
        /**
         * Handle change event.
         */
        typeSelect.onchange = function () {
            map.removeInteraction(draw);
            addInteraction();
        };
        addInteraction();//设置回来类型并初始化绘图
    }

    var type;
    var df;
    var r = 10000;

    function addInteraction() {
        type = typeSelect.value;
        var value;
        if (type !== 'None') {
            var geometryFunction;
            switch (type) {
                //圆
                case 'Circle':
                    value = 'Circle';
                    geometryFunction = new ol.interaction.Draw.createRegularPolygon(32);
                    break;
                case 'RCircle':
                    //指定半径圆
                    r = 10000
                    value = 'Point';
                    break;
                case 'Point':
                    value = "Point";
                    break;
                case 'LineString':
                    value = "LineString";
                    break;
                case 'Polygon':
                    value = "Polygon";
                    break;
                case 'Box':
                    value = 'Circle';
                    geometryFunction = new ol.interaction.Draw.createBox();
                    break;
                case 'Square':
                    value = 'Circle';
                    geometryFunction = new ol.interaction.Draw.createRegularPolygon(4);
                    break;
                default:
                    value = 'Point';
                    break;
            }

            draw = new ol.interaction.Draw({
                //source: source,
                type: value,
                geometryFunction: geometryFunction,
            });
            draw.on('drawend', function (e) {
                if ("RCircle" === type) {
                    //绘制指定半径的圆
                    var coors = e.feature.getGeometry().getCoordinates();
                    //创建一个圆，在3857坐标系下
                    var circleIn3857 = new ol.geom.Circle(ol.proj.transform(coors, 'EPSG:4326', 'EPSG:3857'), r, 'XY');
                    //转成4326坐标系
                    var circleIn4326 = circleIn3857.transform('EPSG:3857', 'EPSG:4326');
                    var circle4326 = new ol.geom.Polygon.fromCircle(circleIn4326, 32, 0);
                    var feature = new ol.Feature(circle4326);
                    source.addFeature(feature);//添加到地图中
                } else
                    source.addFeature(e.feature);
            });
            map.addInteraction(draw);
        }
    }
</script>
<body οnlοad="init()">
<div id="map" class="map"></div>
<form class="form-inline">
    <label>Shape type &nbsp;</label>
    <select id="type">
        <option value="Circle">Circle</option>
        <option value="RCircle">RCircle</option>
        <option value="Square">Square</option>
        <option value="Polygon">Polygon</option>
        <option value="Box">Box</option>
        <option value="Point">Point</option>
        <option value="None">None</option>
    </select>
</form>
</body>
</html>