openlayers入门添加百度地图绘制点线面

1.构建一个地图容器

<div id="map" class="map"></div>

2.创建一个地图
2.1初始化一个openlayersmap对象

var map=new Map({})

2.2将这个对象添加到div中

var map=new Map({
    target:'map'
})

2.3在layers中定义数组中可用的图层
tile是瓦片

layers:[]
layers: [
    new ol.layer.Tile({
    source: new ol.source.OSM()
    })
]

2.4view用于指定中心点和缩放级别

view:new ol.View({
    center:ol.proj.fromLonLat(x,y)(或者[x,y],
    zoom:12
})
使用百度地图
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.12.0/css/ol.css" type="text/css">
    <style>
        .map {
            height: 400px;
            width: 100%;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.12.0/build/ol.js"></script>
    <title>百度地图</title>
    <style>
        html,
        body,
        #map {
            width: 100%;
            height: 100%
        }
    </style>
</head>

<body>
    <div id="map" class="map"></div>
</body>
<script>
    var projection = ol.proj.get("EPSG:3857");
    var resolutions = [];
    for (var i = 0; i < 19; i++) {
        resolutions[i] = Math.pow(2, 18 - i);
    }
    var tilegrid = new ol.tilegrid.TileGrid({
        origin: [0, 0],
        resolutions: resolutions
    });

    var baidu_source = new ol.source.TileImage({
        projection: projection,
        tileGrid: tilegrid,
        tileUrlFunction: function (tileCoord, pixelRatio, proj) {
            if (!tileCoord) {
                return "";
            }
            let z = tileCoord[0];
            let x = tileCoord[1];
            let y = -tileCoord[2] - 1;

            if (x < 0) {
                x = "M" + (-x);
            }
            if (y < 0) {
                y = "M" + (-y);
            }

            return "http://online3.map.bdimg.com/onlinelabel/?qt=tile&x=" + x + "&y=" + y + "&z=" + z +
                "&styles=pl&udt=20151021&scaler=1&p=1";
        }
    });

    var baidu_layer = new ol.layer.Tile({
        source: baidu_source
    });

    var map = new ol.Map({
        target: 'map',
        layers: [baidu_layer],
        view: new ol.View({
            center:  [12959773,4853101],
            zoom: 12
        })
    });
</script>

绘制点线面

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.12.0/css/ol.css" type="text/css">
    <style>
        .map {
            height: 400px;
            width: 100%;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.12.0/build/ol.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="menu">
        <label>几何图形类型:&nbsp;</label>
        <select id="type">
            <option value="None">无</option>
            <option value="Point">点</option>
            <option value="LineString">线</option>
            <option value="Polygon">多边形</option>
            <option value="Circle">圆</option>
            <option value="Square">正方形</option>
        </select>
    </div>
    <div id="map" class="map"></div>

    <script>
         var projection = ol.proj.get("EPSG:3857");
    var resolutions = [];
    for (var i = 0; i < 19; i++) {
        resolutions[i] = Math.pow(2, 18 - i);
    }
    var tilegrid = new ol.tilegrid.TileGrid({
        origin: [0, 0],
        resolutions: resolutions
    });

    var baidu_source = new ol.source.TileImage({
        projection: projection,
        tileGrid: tilegrid,
        tileUrlFunction: function (tileCoord, pixelRatio, proj) {
            if (!tileCoord) {
                return "";
            }
            let z = tileCoord[0];
            let x = tileCoord[1];
            let y = -tileCoord[2] - 1;

            if (x < 0) {
                x = "M" + (-x);
            }
            if (y < 0) {
                y = "M" + (-y);
            }

            return "http://online3.map.bdimg.com/onlinelabel/?qt=tile&x=" + x + "&y=" + y + "&z=" + z +
                "&styles=pl&udt=20151021&scaler=1&p=1";
        }
    });

    var baidu_layer = new ol.layer.Tile({
        source: baidu_source
    });

    var map = new ol.Map({
        target: 'map',
        layers: [baidu_layer],
        view: new ol.View({
            center:  [12959773,4853101],
            zoom: 12
        })
    });

        var typeSelect = document.getElementById('type'); //绘制类型选择对象
        var draw; //ol.Interaction.Draw类的对象

//首先需要明白的一点是,Source和Layer是一对一的关系,有一个Source,必然需要一个Layer,然后把这个Layer添加到Map上,就可以显示出来了。通过官网的API搜索ol.source可以发现有很多不同的Source,但归纳起来共三种:ol.source.Tile,ol.source.Image和ol.source.Vector。

//ol.source.Tile对应的是瓦片数据源,现在网页地图服务中,绝大多数都是使用的瓦片地图,而OpenLayers 3作为一个WebGIS引擎,理所当然应该支持瓦片。
//ol.source.Image对应的是一整张图,而不像瓦片那样很多张图,从而无需切片,也可以加载一些地图,适用于一些小场景地图。
//ol.source.Vector对应的是矢量地图源,点,线,面等等常用的地图元素(Feature),就囊括到这里面了。这样看来,只要这两种Source就可以搞定80%的需求了。



        //实例化一个矢量图层Vector作为绘制层
        var source = new ol.source.Vector();
        var vectorLayer = 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: '#00c033',
                    width: 2
                }),
                image: new ol.style.Circle({ //点样式
                    radius: 7,
                    fill: new ol.style.Fill({
                        color: '#00c033'
                    })
                })
            })
        });
        //将绘制层添加到地图容器中
        map.addLayer(vectorLayer);

        //用户更改绘制类型触发的事件
        typeSelect.onchange = function (e) {
            map.removeInteraction(draw); //移除绘制图形控件
            addInteraction(); //添加绘制图形控件
        };


//ol.interaction.Draw的可选参数
                //features,绘制的要素的目标集合;
        // source,绘制的要素的目标图层来源,即目标图层的 source属性 ;
        // snapTolerance,自动吸附完成点的像素距离,也就是说当鼠标位置距离闭合点小于该值设置的时候,会自动吸附到闭合点,默认值是 12;
        // type,绘制的地理要素类型,ol.geom.GeometryType类型,包含 Point、 LineString、 Polygon、MultiPoint、MultiLineString 或者 MultiPolygon;
        // minPointsPerRing,绘制一个多边形需要的点数最小值,数值类型,默认是 3;
        // style,要素素描的样式,是 ol.style.Style对象之一;
        // geometryName,绘制的地理要素的名称,string类型;
        // condition,一个函数,接受一个ol.MapBrowserEvent类型的参数,返回一个布尔值表示是否应该调用事件处理函数。默认情况下,增加一个顶点,类型为 ol.events.ConditionType。
        
        绘制完成之后将其添加到
        
        
        // 添加事件
     
               
        function addInteraction() {
            var typeValue = typeSelect.value; //绘制类型

            if (typeValue !== 'None') {
                var geometryFunction, maxPoints;
                if (typeValue === 'Square') { //正方形
                    typeValue = 'Circle'; //设置绘制类型为Circle
                    //设置几何信息变更函数,即创建正方形
                    geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
                }
                console.log(typeValue);
                //实例化图形绘制控件对象并添加到地图容器中
                // 给地图添加该交互功能,首先需要实例化一个ol.interaction.Draw,必须指定 source和type属性:
                draw = new ol.interaction.Draw({
                    source: source,
                    type: typeValue, //几何图形类型
                    geometryFunction: geometryFunction, //几何信息变更时的回调函数
                    maxPoints: maxPoints //最大点数
                });
                 // 最后首先执行绑定函数addInteraction();,然后点击鼠标进行绘制:
                map.addInteraction(draw);
            } else {
                //清空绘制的图形
                source.clear();
            }
        }
    </script>
</body>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
OpenLayers是一个开源的JavaScript库,用于在Web上渲染交互式地图。它提供了丰富的功能和API,允许用户在地图上添加各种不同的元素,包括点、线和面。 以下是OpenLayers绘制点、线和面的基本步骤: 1. 创建地图对象 使用OpenLayers创建一个地图对象,设置地图中心点和缩放级别。 2. 创建矢量图层 使用OpenLayers创建一个矢量图层,并将其添加到地图中。 3. 创建要素 使用OpenLayers创建一个要素对象,可以是点、线或面。 4. 绘制要素 使用OpenLayers提供的绘制工具,将要素添加到矢量图层中。可以通过鼠标交互或代码方式来进行绘制。 5. 渲染地图 将地图渲染到页面上,可以使用OpenLayers提供的默认样式,也可以自定义样式。 下面是一个简单的示例代码,演示如何使用OpenLayers绘制点、线和面: ``` // 创建地图对象 var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([116.38, 39.9]), zoom: 10 }) }); // 创建矢量图层 var vectorLayer = new ol.layer.Vector({ source: new ol.source.Vector(), 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(vectorLayer); // 创建要素 var point = new ol.geom.Point(ol.proj.fromLonLat([116.38, 39.9])); var line = new ol.geom.LineString([ol.proj.fromLonLat([116.38, 39.9]), ol.proj.fromLonLat([116.4, 39.9])]); var polygon = new ol.geom.Polygon([[ ol.proj.fromLonLat([116.38, 39.9]), ol.proj.fromLonLat([116.4, 39.9]), ol.proj.fromLonLat([116.4, 39.92]), ol.proj.fromLonLat([116.38, 39.92]), ol.proj.fromLonLat([116.38, 39.9]) ]]); // 绘制要素 var pointFeature = new ol.Feature(point); var lineFeature = new ol.Feature(line); var polygonFeature = new ol.Feature(polygon); vectorLayer.getSource().addFeatures([pointFeature, lineFeature, polygonFeature]); // 渲染地图 map.render(); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值