openlayers给定坐标连线

//声明一个div,map的位置
<div id="map" class="map"></div>
//声明map
map = new ol.Map({
    target : 'map',
    view : new ol.View({
        center : ol.proj.transform([105.571776,28.874441],'EPSG:4326', 'EPSG:3857'),//地图中心点坐标
        zoom : 18,//地图比例
        maxZoom : 19,
        minZoom : 5,
        projection : projection,
    })
});

//为地图添加影像图片
var image_google = new ol.layer.Tile(
        {
            id : 'tianditu',
            title : "影像",
            baseLayer : true,
            source : new ol.source.XYZ(
                    {
                        url: "https://mt" + fRandomBy(0, 3) + ".google.cn/maps/vt?lyrs=s&hl=zh-CN&gl=CN&&x={x}&y={y}&z={z}"
                    }),
            opacity : 1,
        });

map.addLayer(image_google);

//地图选点连线

toline();

function toline(){
   var coordinates = [[105.57147286,28.87404486],[105.57241163,28.87339190],[105.57290252,28.87361188],
        [105.57168207,28.87447703],[105.57069502,28.87515817],[105.57204149,28.87473070],[105.57324848,28.87388514]];

    //声明一个新的数组
    var coordinatesPolygon = new Array();
    //循环遍历将经纬度转到"EPSG:4326"投影坐标系下
    for (var i = 0; i < coordinates.length; i++) {
        console.log("开始转换坐标");
        var pointTransform = ol.proj.transform([coordinates[i][0], coordinates[i][1]], 'EPSG:4326', 'EPSG:3857');
        coordinatesPolygon.push(pointTransform);
    }

    //瓦片图层
    var tileLayer = new ol.layer.Tile({
        source:new ol.source.OSM()
    });
    var source = new ol.source.Vector();
    //矢量图层
    var vector_line = new ol.layer.Vector({
        source: source,
        style: new ol.style.Style({
            fill: new ol.style.Fill({
                color: 'rgba(255, 255, 255, 0.1)'
            }),
            stroke: new ol.style.Stroke({
                color: 'red',
                width: 10
            }),
            image: new ol.style.Circle({
                radius: 10,
                fill: new ol.style.Fill({
                    color: '#ffcc33'
                })
            })
        })
    });
    //多边形此处注意一定要是[坐标数组]
    console.log("画线的坐标集合为="+coordinatesPolygon);
    var plygon = new ol.geom.Polygon([coordinatesPolygon])
    //多边形要素类
    var feature = new ol.Feature({
        geometry: plygon,
    });

    source.addFeature(feature);

    map.addLayer(vector_line);


}

地图展示点位并连线完整代码:https://blog.csdn.net/yc15128221056/article/details/84585872

转载自：https://blog.csdn.net/yc15128221056/article/details/84585552