openlayers学习二：画多边形

2019-07-19 14:06:57 阅读：278 来源： 互联网

标签：map ol 多边形 coordinate 学习 source openlayers var new

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>画多边形</title>
    <script src="dist/ol.js"></script>
    <link rel="stylesheet" href="dist/ol.css">
<style>
    #map{
        width: 100%;
        height: 500px;
    }
</style>
</head>
<body>
<div id="map"></div>

<form class="form-inline">
    <label>几何类型 &nbsp;</label>
    <select name="" id="type">
        <option value="Polygon">多边形</option>
        <option value="Point">点</option>
        <option value="LineString">线</option>
        <option value="Circle">圆</option>
        <option value="None">无</option>
    </select>
</form>
<div id="content"></div>

<script type="text/javascript">
    var raster = new ol.layer.Tile({
        source:new ol.source.OSM()
    });
    //ol.source.Vector，提供矢量图层数据，继承自 ol.source.Source
    //wrapX，是否在地图水平坐标轴上重复，默认是true
    var source = new ol.source.Vector({wrapX:false});
    //ol.layer.Vector用于显示在客户端渲染的矢量数据。
    var vector = new ol.layer.Vector({
        source:source
    });

    //地图部分
    var map = new ol.Map({
        //设置地图图层
        layers:[raster,vector],
        // 让id为map的div作为地图的容器
        target:'map',
        // 设置显示地图的视图
        view:new ol.View({
            center:[0,0],  // 定义地图显示中心
            zoom:4  //缩放层级
        }),

    });

    //下拉列表切换
    var typeSelect = document.getElementById('type');
    //添加形状的函数
    var draw;
    function addInteraction() {
        var value = typeSelect.value;
        if(value !== 'None'){
            //ol.interaction.Draw该类允许用户在地图上绘制一些几何图形，
            // 可以通过构造方法设置type属性来指写是绘制哪种几何图形。目前支持点，线，多边形，圆形。
            draw = new ol.interaction.Draw({
                source:source,// 注意设置source，这样绘制好的线，就会添加到这个source里
                type: (typeSelect.value)
            });
            map.addInteraction(draw);
        }
    }
    typeSelect.onchange = function () {
        map.removeInteraction(draw);
        addInteraction();
    };
    addInteraction();

    //向地图中添加点击处理程序以显示坐标系。
    var content = document.getElementById('content');
    map.on('click',function (evt) {
        //坐标
        var coordinate = evt.coordinate;
        console.log(coordinate);
        //ol.proj.transform(coordinate:source, destination)转换不同的坐标系
        var hdms = ol.proj.transform(
            coordinate,'EPSG:3857','EPSG:4326'
    );
    content.innerHTML = "坐标系："+hdms;
    });

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

标签：map,ol,多边形,coordinate,学习,source,openlayers,var,new
来源： https://blog.csdn.net/weixin_39520640/article/details/96478934

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

openlayers学习二：画多边形