OpenLayer4.6.5绘制和编辑要素及获取定位点

田成化
2023-12-01

OpenLayer4.6.5绘制和编辑要素及获取定位点

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>绘制修改要素</title>
        <script src="../jslib/jquery-1.7.2.min.js"></script>
        <link rel="stylesheet" href="../css/ol.css" type="text/css">
       <script src="../jslib/ol.js"></script>


    </head>
    <body>
        <div id="map" class="map" style="height: 80%;">

        </div>
          <label>几何类型 &nbsp;</label>
          <select id="type">
            <option value="Point">Point</option>
            <option value="LineString">LineString</option>
            <option value="Polygon">Polygon</option>
            <option value="Circle">Circle</option>
          </select>
        <script>
            var raster=new ol.layer.Tile({
                source:new ol.source.OSM()
            });

            var source=new ol.source.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:'#000',
                        width:5
                    }),
                    image:new ol.style.Circle({
                        radius:7,
                        fill:new ol.style.Fill({
                            color:"#F00"
                        })
                    })
                })
            });

            var map=new ol.Map({
                layers:[raster,vector],
                target:"map",
                view:new ol.View({
                    center:[0,0],
                    zoom:4
                })
            })

            var modify=new ol.interaction.Modify({source:source});
            map.addInteraction(modify);
            var draw=null;
            var snap=null;
            function addInteractions(){
                draw=new ol.interaction.Draw({
                    source:source,
                    type:$("#type").val()
                });
                map.addInteraction(draw);
                snap=new ol.interaction.Snap({
                    source:source
                });
                map.addInteraction(snap);
            }
            //选择样式
            $("#type").change(function(){
                map.removeInteraction(draw);
                map.removeInteraction(snap);
                addInteractions();
            });
            addInteractions();//默认为点样式


            map.on("click",function(e){
                alert(e.coordinate);
                alert(ol.proj.transform(e.coordinate, 'EPSG:3857', 'EPSG:4326'));
                // 通过getEventCoordinate方法获取地理位置,再转换为wgs84坐标,并弹出对话框显示
                alert(map.getEventCoordinate(e.originalEvent));
                alert(ol.proj.transform(map.getEventCoordinate(e.originalEvent), 'EPSG:3857', 'EPSG:4326'));

                var lonlat = map.getCoordinateFromPixel(e.pixel);
                alert(lonlat);
                alert(ol.proj.transform(lonlat,"EPSG:3857", "EPSG:4326")); //由3857坐标系转为4326
            })

        </script>
    </body>
</html>
 类似资料: