Openlayer给定坐标进行绘制多边形

今天在绘制平谷区域用给定的坐标，绘制图形的，怎么调试都不知道，最后才发现是参数传错了，没仔细看api文档，真的很恶心啊。废话不多说看代码：

先放张图：
 

一、坐标的转换

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

注意ol.proj.fromLonLat后面如果不填要转换的坐标系，默认为3857

二、全部源代码

        //北京市平谷区的坐标
        var coordinates = [[117.39680614984, 40.233089086201], [117.3600565732, 40.242113456225], [117.34874458404, 40.250260274602],
            [117.34302344712, 40.283707567814], [117.30241786584, 40.284010303013], [117.30089945595, 40.298823482743],
            [117.29495791414, 40.307241631948], [117.28090327938, 40.31483263219], [117.27787165052, 40.331469477361],
            [117.28158063671, 40.338247525913], [117.26875571365, 40.343837920124], [117.24821332321, 40.376802733207],
            [117.23311626435, 40.375365915021], [117.23011329982, 40.381697774551], [117.22184575331, 40.383995827578],
            [117.21027968492, 40.379304161599], [117.18913489167, 40.383847635371], [117.16955596667, 40.377573094897],
            [117.16201098872, 40.379609944384], [117.15156389182, 40.374358469115], [117.1461431628, 40.367421131629],
            [117.12300485064, 40.359558075585], [117.11864440401, 40.358974561797], [117.11380102691, 40.364149005012],
            [117.10453631204, 40.365747471036], [117.07808699163, 40.347405333082], [117.06520517495, 40.342543682533],
            [117.05951109694, 40.349081054111], [117.04244565157, 40.35250818155], [117.0250699279, 40.340493098635],
            [117.02117101934, 40.333168625588], [117.01588753438, 40.331656255311], [117.01173132175, 40.32337571318],
            [117.01591420209, 40.312498282132], [117.00799784424, 40.305823430052], [117.00636157925, 40.296778788538],
            [116.9970503394, 40.296137984976], [116.99575758984, 40.292616557636], [116.97796493669, 40.288167135931],
            [116.97696786259, 40.282481020224], [116.97075825127, 40.28108093448], [116.95848391237, 40.267707809995],
            [116.95715258101, 40.263327709699], [116.98168044494, 40.25377572019], [116.96338018644, 40.238052279683],
            [116.95795687613, 40.242937187356], [116.94329751003, 40.238005833847], [116.93175719996, 40.233136537486],
            [116.92430219371, 40.224967956262], [116.93485016275, 40.210980369693], [116.94526901764, 40.19855812205],
            [116.94603449564, 40.19354561168], [116.94951752277, 40.188098708124], [116.95882736017, 40.177581436424],
            [116.97897749255, 40.176575285822], [116.97881329629, 40.154560252512], [116.97587001134, 40.146838503303],
            [116.98371154588, 40.133455992809], [116.97593603278, 40.124828346814], [116.98315680573, 40.100140533332],
            [116.97155622343, 40.086210562194], [116.99084261053, 40.081393909686], [116.98663839805, 40.06927009966],
            [116.96955722573, 40.068076860016], [116.96884211824, 40.057480462171], [116.97636631342, 40.054371684127],
            [116.9795686888, 40.047516077888], [116.98518115869, 40.044388313572], [116.99304702223, 40.045029326691],
            [117.00085160401, 40.042331508548], [117.00745407085, 40.038313328591], [117.03161208113, 40.040467631252],
            [117.04575150493, 40.055833869462], [117.06992028353, 40.067915618111], [117.08846730729, 40.070826442849],
            [117.09595404341, 40.076218017715], [117.11977736834, 40.07863161916], [117.1425959885, 40.070345862074],
            [117.16234951106, 40.075084806785], [117.16799658016, 40.082010788788], [117.18330740326, 40.078432633031],
            [117.19158959317, 40.091180779552], [117.21946331827, 40.102793872514], [117.23085386426, 40.100744473507],
            [117.2308084102, 40.104832177913], [117.2565631512, 40.125816298924], [117.26463610295, 40.118734529522],
            [117.2720390385, 40.117442160668], [117.28248965384, 40.119346336362], [117.29631227787, 40.128663778615],
            [117.30298578394, 40.127129306082], [117.31838231488, 40.145192295628], [117.35175120566, 40.14858516025],
            [117.3647252165, 40.166701558473], [117.36002676882, 40.179323942797], [117.37183376251, 40.184576516774],
            [117.39959624353, 40.184618207342], [117.41343867583, 40.191765541398], [117.41039919172, 40.194936098147],
            [117.39584874998, 40.193328689781], [117.3867886771, 40.198351231932], [117.38715826407, 40.205987067737],
            [117.39482310976, 40.20909112999], [117.39525305779, 40.212222926017], [117.38556017544, 40.214479099127],
            [117.38481402713, 40.223681632946], [117.3994912696, 40.227137227499], [117.39680614984, 40.233089086201]]
        //声明一个新的数组
        var coordinatesPolygon = new Array();
        //循环遍历将经纬度转到"EPSG:4326"投影坐标系下
        for (var i = 0; i < coordinates.length; i++) {
            var pointTransform = ol.proj.fromLonLat([coordinates[i][0], coordinates[i][1]], "EPSG:4326");
            coordinatesPolygon.push(pointTransform);
        }
        //瓦片图层
        var tileLayer = 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.1)'
                }),
                stroke: new ol.style.Stroke({
                    color: 'red',
                    width: 2
                }),
                image: new ol.style.Circle({
                    radius: 10,
                    fill: new ol.style.Fill({
                        color: '#ffcc33'
                    })
                })
            })
        });
        //多边形此处注意一定要是[坐标数组]
        var plygon = new ol.geom.Polygon([coordinatesPolygon])
        //多边形要素类
        var feature = new ol.Feature({
            geometry: plygon,
        });
        console.log(feature);
        source.addFeature(feature);
        console.log(vector.getSource().getFeatures().length);
        var view=new ol.View({
            center:[116.46,39.92],
            zoom: 10,
            projection: "EPSG:4326"
        });
        var map = new ol.Map({
            layers: [tileLayer, vector],
            
            view:view,
            target: "map"
        });

三、总结

代码简单。但是如果写错了可无语，他也不错，你根本不知道从哪找错误，一直都动态绘图，从来没用过给定的点进行绘图。关于那个坐标转换的问题也可以用下面的方式：

           var geom = new ol.geom.Polygon(coord);
            //将经纬度坐标转换为map对应的坐标
            geom = geom.transform("EPSG:4326", map.getView().getProjection());

转载自：https://blog.csdn.net/weixin_40184249/article/details/81186181