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

作者：笔触狂放9 | 2024-05-22 08:43:28

踩

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>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/607448