openlayers-07-交互式绘制-绘制图形

阿发博客

已于 2023-05-22 23:18:16 修改

阅读量252

点赞数

分类专栏： OpenLayers入门与实践文章标签： webgis openlayers

于 2023-05-15 23:58:36 首次发布

本文链接：https://blog.csdn.net/chuanren1991/article/details/130695254

版权

OpenLayers入门与实践专栏收录该内容

19 篇文章 9 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>加载天地图</title>
    <link href="ol/ol.css" rel="stylesheet" type="text/css" />
    <script src="ol/ol.js" type="text/javascript"></script>
    <style type="text/css">
        #mapCon {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <!-- 地图容器 -->
    <div id="mapCon"></div>

    <script type="text/javascript">
        var key = "4689fc6b9bc0fdc8c48298f751ebfb41";//天地图密钥

        //ol.layer.Tile：是一个瓦片图层类，用于显示瓦片资源。
        //source是必填项，用于为图层设置来源。

        //ol.source.XYZ: 
        //创建天地图矢量图层
        var TiandiMap_vec = new ol.layer.Tile({
            title: "天地图矢量图层",
            source: new ol.source.XYZ({
                url: "http://t{0-7}.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=" + key,
                wrapX: false
            })
        });
        //创建天地图矢量注记图层
        var TiandiMap_cva = new ol.layer.Tile({
            title: "天地图矢量注记图层",
            source: new ol.source.XYZ({
                url: "http://t{0-7}.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=" + key,
            })
        });
        //实例化Map对象加载地图
        var map = new ol.Map({
            //地图容器div的ID
            target: 'mapCon',
            //地图容器中加载的图层
            layers: [TiandiMap_vec, TiandiMap_cva],
            //地图视图设置
            view: new ol.View({
                //地图初始中心点（经纬度）
                center: [118.2, 36.5],
                //地图初始显示级别
                zoom: 7,
                projection: "EPSG:4326"
            })
        });
        //如果想画画，首先需要有一张纸或者画布，地图则需要一个绘制层
        //创建一个矢量图层Vector 作为绘制层，ol.source.Vector是用来设置矢量图层数据来源的
        var source = new ol.source.Vector({ wrapX: false });
        //创建一个图层 ol.layer.Vector矢量图层类
        var vector = new ol.layer.Vector({
            source: source,
            style: new ol.style.Style({
                fill: new ol.style.Fill({
                    color: 'rgba(255, 255, 255, 0.2)'
                }),
                stroke: new ol.style.Stroke({
                    color: '#ffcc33',
                    width: 2
                }),
                image: new ol.style.Circle({
                    radius: 7,
                    fill: new ol.style.Fill({
                        color: '#ffcc33'
                    })
                })
            })
        });
        //将绘制层添加到地图容器中
        map.addLayer(vector);
        //根据传递的参数类型，触发绘制不同类型的图形
        function addInteraction(geomType){
            
            if (geomType=='Clear') {
                //清除
                source = null;
                //清空绘制图形
                vector.setSource(source);
            }else{
                if (source == null) {
                    source = new ol.source.Vector({ wrapX: false });
                    //添加绘制层数据源
                    vector.setSource(source);
                }
                var geometryFunction;//几何体改变回调函数
                var maxPoints;//最大顶点数量
                if (geomType == 'Square') {//正方形
                    geomType = 'Circle';
                    //正方形图形（圆）
                    geometryFunction = ol.interaction.Draw.createRegularPolygon(4);

                } 
                else if (geomType == 'Box') {//长方形
                    geomType = 'LineString';
                    maxPoints = 2;
                    geometryFunction = function (coordinates, geometry) {
                        if (!geometry) {
                            //多边形
                            geometry = new ol.geom.Polygon([]);
                        }
                        var start = coordinates[0];
                        var end = coordinates[1];
                        geometry.setCoordinates([
                            [start, [start[0], end[1]], end, [end[0], start[1]], start]
                        ]);
                        return geometry;
                    };
                  }
                //实例化交互绘制类对象并添加到地图容器中
                draw = new ol.interaction.Draw({
                    //绘制层数据源
                    source: source,
                    //几何图形类型 
                    type: geomType,
                    //几何图形变化时调用函数
                    geometryFunction: geometryFunction,
                    //最大顶点数
                    maxPoints: maxPoints
                });
                map.addInteraction(draw);
                
                //移除交互绘制
            	//map.removeInteraction(draw);
            }
        }
        //点击地图添加点
        //addInteraction("Point");

        //点击地图添加线段
        //如果需要将拐点坐标标识出来，可以同时 执行 addInteraction("Point"); 和 addInteraction("LineString");
        //addInteraction("LineString");

        //正方形
        // addInteraction("Square");
        //长方形
        // addInteraction("Box");
        //圆
        // addInteraction("Circle");
        //多边形
        addInteraction("Polygon");

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

示例代码