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>
Logo
CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐

嵌入式作业（七）：基于Ardunio的STM32串口通信

嵌入式作业（七）0作业要求1Ardunio 完成STM32的串口通信（1）安装Ardunio IDE（2）stm32串口通信2关于 stduino IDE0作业要求安装 Ardunio IDE 和相关软件支持库，在Ardunio 完成STM32板子的串口通信程序：（1）持续向串口输出“Hello world！”；（2）当接收到“stop!”时，停止输出。网上有一个国人版的MCU集成开发平台， st

avatar CSDN学习社区

JDBC详解

JDBC文章目录JDBC什么是JDBC?JDBC驱动程序:Java使用JDBC访问数据库的步骤:设置classpath:Oracle连接字符串的书写格式:简单的例子:常用数据库的驱动程序及JDBC URL:Oracle数据库:SQL Server数据库MySQL数据库Access数据库PreparedStatement接口:JNDI-数据源（Data Source）与连接池（Connection

avatar CSDN学习社区

“模式识别与机器学习”学习笔记no2.再谈感知机

接**上篇：上篇主要进行了PLA，Pocket算法的理论过程分析和在给定数据集上利用pocket算法对数据集进行分类学习，得到错分数量最少的分类面。上篇中pocket算法的过程已经进行了编程和测试，框架已经建立了起来，这一篇主要上篇中没有提到或涉及不深的几个问题。1.数据集的构造。上篇是直接使用了题目给的向量，这次来根据正态分布来产生数据集。np.random.normal函数可以根据均值和方差生

avatar CSDN学习社区