百度地图行政区绘制

前段时间有一个很好玩的需求；绘制上海行政区的边界线而且还要在地图上打上热力点，看了下百度地图可以实现就顺便研究了一下，简单的写了demo记录一下。
1.首先获取每个行政区域的边界坐标值，可能会有很多。使用以下方法：

function getBoundary()
    {
        //bdary存储行政区域边界，name存储查询名称
        var bdary = new BMap.Boundary();
        var names = ['崇明区']

       for(var m = 0; m < names.length;m++){
           bdary.get(names[m], function(rs)
           {
    
               //存储行政区域边界的点数
               var count = rs.boundaries.length;
               console.log(rs)
         
           });
       }

    }

最后的json数据文件传不了，贴上又太多。需要的话也可以私发，或者通过上面方法一个区一个区自己获取；
2.获取到的坐标值存入boundaryPoints对象，开始绘制线；

function getBoundary2(point) {
        var n = []
            , pointArray = []
            , pointArr = point.split(";");

        for (var i = 0; i < pointArr.length; i++) {
            var tempPoint = pointArr[i].split(",");
            n.push(new BMapGL.Point(parseFloat(tempPoint[0]), parseFloat(tempPoint[1])));
        }
        ;

        var ply = new BMapGL.Polygon(n, {
            strokeColor: "red",
            strokeWeight: 1,
            strokeOpacity: 1,
            fillColor: "transparent",
            // fillOpacity: 0,
            strokeStyle: "solid",
            enableClicking: !1
        }); //建立多边形覆盖物
        map.addOverlay(ply);  //添加覆盖物
        pointArray = pointArray.concat(ply.getPath());
        map.setViewport(pointArray);    //调整视野
    }
    setTimeout(function () {
        getBoundary2(boundaryPoints.pudongxinqu);//
        getBoundary2(boundaryPoints.baoshan);//
        getBoundary2(boundaryPoints.jingan);//
        getBoundary2(boundaryPoints.huangpu);//
        getBoundary2(boundaryPoints.xuhui);// 徐汇区
        getBoundary2(boundaryPoints.changning);// 长宁区
        getBoundary2(boundaryPoints.putuo);// 普陀区
        getBoundary2(boundaryPoints.hongkou);// 虹口区
        getBoundary2(boundaryPoints.yangpu);
        getBoundary2(boundaryPoints.minhang);
        getBoundary2(boundaryPoints.jiading);
        getBoundary2(boundaryPoints.jinshan);
        getBoundary2(boundaryPoints.songjiang);
        getBoundary2(boundaryPoints.qingpu);
        getBoundary2(boundaryPoints.fengxian);
        getBoundary2(boundaryPoints.chongming);
    }, 1000);

也就是以上简单的两个步骤，行政区域就画好了。美中不足就是部分区域有误差，但是这些坐标值都是百度的API返回的。先看看效果图。

屏幕快照 2020-11-16 上午10.08.41.png

3.打热力点；其实吧这个需要使用的地图类型是type=webgl；引入的文件也不一样；

    <script src="./mapv.min.js"></script>
    <script src="./common.js"></script>
    <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.82/dist/mapvgl.min.js"></script>
    <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.82/dist/mapvgl.threelayers.min.js"></script>

以上几个文件是需要额外引入的，其中mapv.min.js 和 common.js 在百度地图官方demo里扒下来放在本地才可以使用；

//绘制热力点
    var view = new mapvgl.View({
        effects: [
            new mapvgl.BloomEffect({
                threshold: 0.2,
                blurSize: 2.0
            }),
        ],
        map: map
    });

    var result = [
        {val:789,lng:121.431782004453,lat:30.9642681341948},
        {val:708,lng:121.431782004453,lat:30.9642681341949},
        {val:670,lng:121.919157575991,lat:30.9035939590744},
        {val:667,lng:121.825355226495,lat:31.3558049586876},
        {val:493,lng:121.802442931309,lat:30.912953176492},
        {val:461,lng:121.550541749675,lat:30.9290422415401},
        {val:449,lng:121.671806198764,lat:31.266094798695},
        {val:403,lng:121.492975727007,lat:30.8132603539635},
        {val:393,lng:121.506041941946,lat:30.9772459802241},
        {val:389,lng:121.506041941946,lat:30.9772459802241},
        {val:380,lng:121.595527629271,lat:31.344707142849},
        {val:358,lng:121.633617865205,lat:31.2163921074268},
        {val:329,lng:121.505589518296,lat:30.9748270590443},
        {val:289,lng:121.450802596354,lat:30.91719334329},
        {val:281,lng:121.919157575994,lat:30.9035939590741},
        {val:279,lng:121.478952949669,lat:30.9542164755455},
        {val:278,lng:121.182946638145,lat:31.1231703344326},
        {val:277,lng:121.497595566744,lat:30.8933242444828},
        {val:275,lng:121.919157575994,lat:30.9035939590741},
        {val:268,lng:121.805974880451,lat:30.9873359787536},
        {val:264,lng:121.066772708555,lat:30.9339603915668},
        {val:242,lng:121.557204515666,lat:30.8558976763577},
        {val:239,lng:121.835574315292,lat:30.996177094192},
        {val:231,lng:121.556825559383,lat:30.9789126082471},
        {val:231,lng:121.805974880451,lat:30.9873359787536},
        {val:225,lng:121.455752352081,lat:30.9163614828075},
        {val:224,lng:121.842784510913,lat:31.0316005217389},
        {val:221,lng:121.475382746587,lat:31.6775657927774},
        {val:220,lng:121.483804069933,lat:31.2532254299349},
        {val:210,lng:121.188637727918,lat:30.7922375251362},
        {val:209,lng:121.27694378831,lat:31.0844573320434},
        {val:204,lng:121.726555647371,lat:30.8643323279911},
        {val:203,lng:121.532966511393,lat:31.1024047266507},
        {val:200,lng:121.559616751771,lat:30.8679168721894},
        {val:199,lng:121.80244293131,lat:30.912953176492},
        {val:198,lng:121.848695731111,lat:30.984607582377},
        {val:197,lng:121.196863988484,lat:31.0412119086996},
        {val:196,lng:121.482935393135,lat:31.1791900222244},
        {val:193,lng:121.137110401217,lat:31.0338670160508},
        {val:191,lng:121.509840746203,lat:30.9510788225807},
        {val:188,lng:121.484852011195,lat:31.2498049878928},
        {val:185,lng:121.919157575994,lat:30.9035939590742},
        {val:180,lng:121.244243804633,lat:31.3651819786016},
        {val:177,lng:121.234877923968,lat:31.0201950927357},
        {val:174,lng:121.485388367971,lat:30.9148822709318},
        {val:174,lng:121.44215110879,lat:30.9968866651112},
        {val:170,lng:121.311474772028,lat:31.0600329323991},
        {val:166,lng:121.672344634437,lat:30.8756146973743},
        {val:165,lng:121.576505888384,lat:31.1199795441317},
        {val:156,lng:121.60568207854,lat:31.5274853368479},
        {val:155,lng:121.115410508549,lat:30.9878654834998},
        {val:155,lng:121.278846064208,lat:31.2179126091068},
        {val:154,lng:121.595442418422,lat:30.9342479559519},
        {val:153,lng:121.354685836853,lat:31.0415199403802},
        {val:147,lng:121.539971615232,lat:30.8499012697144},
        {val:146,lng:121.300561272738,lat:30.9429395064981},
        {val:145,lng:121.510282932176,lat:30.9199026025525},
        {val:143,lng:121.620804576506,lat:30.9170400095572},
        {val:143,lng:121.202502901818,lat:31.0144435019937},
        {val:143,lng:121.174486997433,lat:30.9765287135657},
        {val:140,lng:121.599526805227,lat:31.6168179361215},
        {val:134,lng:121.230235738028,lat:31.035863004402},
        {val:133,lng:121.13742428642,lat:30.9588126757972},
        {val:130,lng:121.514584698004,lat:31.3060890902552},
        {val:128,lng:121.44408570109,lat:31.0492754763604},
        {val:127,lng:121.441139879083,lat:30.9754426095972},
        {val:127,lng:121.135366628957,lat:30.9429512015793},
        {val:126,lng:121.271085451819,lat:31.1193831878061},
        {val:125,lng:121.459968251416,lat:30.9358666523786},
        {val:125,lng:121.241834330714,lat:31.0346056252242},
        {val:123,lng:121.317677597878,lat:31.1247943062829},
        {val:121,lng:121.486355038606,lat:30.8995631219027},
        {val:121,lng:121.482429151274,lat:31.3250134511818},
        {val:121,lng:121.300561272737,lat:30.9429395064981},
        {val:119,lng:121.747675150973,lat:30.8802306329458},
        {val:118,lng:121.321023546391,lat:31.7554379495148},
        {val:118,lng:121.664918938184,lat:31.6064714707181},
        {val:117,lng:121.733431213634,lat:31.3703927949236},
        {val:117,lng:121.382316112456,lat:31.0711967944921},
        {val:111,lng:121.504126851383,lat:31.3107512701864},
        {val:111,lng:121.048384557614,lat:30.8870916012052},
        {val:110,lng:121.221979201536,lat:31.0158835895431},
        {val:108,lng:121.550868597551,lat:30.9165253009273},
        {val:108,lng:121.146965943051,lat:31.0043284431695},
        {val:102,lng:121.491866839276,lat:31.2495797775476},
        {val:101,lng:121.591150022426,lat:31.244807057978},
        {val:98,lng:121.215305475087,lat:30.9331621654264},
        {val:97,lng:121.502174582591,lat:31.28969767556},
        {val:95,lng:121.278104305216,lat:31.0372711924916},
        {val:95,lng:121.604405559378,lat:31.2957034135456},
        {val:95,lng:121.704849605714,lat:31.0398062449016},
        {val:94,lng:121.255074739767,lat:31.0205833905096},
        {val:92,lng:121.504450069842,lat:31.2984000328842},
        {val:90,lng:121.79327301289,lat:30.9876258184408},
        {val:88,lng:121.448166964302,lat:30.990603539043},
        {val:88,lng:121.51002770243,lat:31.2799981213916},
        {val:88,lng:121.494224575566,lat:31.1404654201734},
        {val:88,lng:121.477819805974,lat:31.2859274687889},
        {val:86,lng:121.322552187283,lat:31.822488386106},
        {val:84,lng:121.848695731112,lat:30.984607582377},
        {val:83,lng:121.471248655383,lat:30.9542732422639},
        {val:82,lng:121.542603567176,lat:31.2784034588956},
        {val:81,lng:121.524256332712,lat:31.2082452989943},
        {val:80,lng:121.485884824542,lat:30.9181477934037},
        {val:80,lng:121.719302377399,lat:31.390478131818},
        {val:80,lng:121.048288770175,lat:30.8875555335393},
        {val:80,lng:121.345033485478,lat:31.1810822438531},
        {val:79,lng:121.406234657791,lat:31.3603839719667},
        {val:79,lng:121.805974880451,lat:30.9873359787537},
        {val:78,lng:121.385606630368,lat:30.9040154425673},
        {val:78,lng:121.388048422513,lat:30.9547448464682},
        {val:77,lng:121.80244293131,lat:30.912953176492},
        {val:76,lng:121.772429197967,lat:31.1405690784217},
        {val:73,lng:121.583244563776,lat:31.3481124734573},
        {val:73,lng:121.583829958072,lat:31.3499522198157},
        {val:72,lng:121.45104004335,lat:31.6563862764015},
        {val:71,lng:121.644959598817,lat:30.9181286098758},
        {val:68,lng:121.564051689508,lat:31.2313399710765},
        {val:66,lng:121.638982051176,lat:30.9653199921645},
        {val:66,lng:121.840418014645,lat:31.4843066111844},
        {val:66,lng:121.529730442481,lat:31.278820401274},
        {val:66,lng:121.521783761974,lat:31.2581604725776},
        {val:66,lng:121.523902007183,lat:31.2811376338763},
        {val:65,lng:121.319033767147,lat:31.2974336486885},
        {val:65,lng:121.726990456666,lat:30.9587533654403},
        {val:65,lng:121.367458630136,lat:31.0745649560701},
        {val:63,lng:121.506476933774,lat:31.2801574791253},
        {val:63,lng:121.393936705248,lat:31.0409552364329},
        {val:62,lng:121.335236988661,lat:31.3320597271515},
    ];
    draw();
    function draw() {
        var data = [];
        for (var i = 0; i < result.length; i++) {
            var line = result[i];
            data.push({
                geometry: {
                    type: 'Point',
                    coordinates: [line.lng, line.lat]
                },
                properties: {
                    count: line.val
                }
            });
        }
        var whiteLayer = new mapvgl.HeatPointLayer({
            blend: 'lighter',
            style: 'grid',
            shape: 'square',
            size: 1,
            min: 1,
            max: 2,
            gradient: {
                0: '#47f4fc',
                0.2: '#47f4fc',
                0.5: '#47f4fc',
                0.51: '#47f4fc',
                1: '#47f4fc'
            }
        });
        var yellowLayer = new mapvgl.HeatPointLayer({
            blend: 'lighter',
            style: 'grid',
            size: 4,
            min: 1,
            max: 2,
            gradient: {
                0: 'rgb(200, 200, 200, 0)',
                0.2: 'rgb(200, 200, 200, 0)',
                0.5: 'rgb(226, 95, 0, 0.9)',
                1: '#47f4fc'
            }
        });
        view.addLayer(yellowLayer);
        // view.addLayer(whiteLayer);
        // whiteLayer.setData(data);
        yellowLayer.setData(data);
    }

result数组里的热力点可能会有很多，我删了不少，大致就是这样；
4.最终效果

屏幕快照 2020-11-16 上午10.25.47.png