js使用百度地图仅显示中国区域，实现大数据热点图

马上又到年底PPT环节了，各位实现效果之后，麻烦留言点赞。。

 

需求：领导需要在年会上展示我们的用户ip实时数据，做一个网页版的地图，仅仅显示中国区域。

技术分析：echart，hchart等网站都有地图版的，百度地图有热点实例，经过对比，我选用了百度地图，但是百度地图无法只显示中国区域，这个时候就需要我来动动手解决掉最后一关。

应评论的各位想要源码，页面源码包含websocket+mapv.js；下载下来，把push_ip.html中js路径写对哈！！！！

想要改为定时请求文件的，数据格式在html中有，自己去掉websocket写定时获取文件刷新哈，调用refreshData()方法就行了。其他问题留言就好。

链接: https://pan.baidu.com/s/1SK4Yt_SY-FsJ1NlPtTAV1A 提取码: iiag

 

先看一下最后效果：

 

打开百度地图API-JS：https://lbsyun.baidu.com/index.php?title=jspopular

我用的是JavaScript API v2.0中MapV：http://mapv.baidu.com/gallery.html

demo用的是MapV的热点图：http://mapv.baidu.com/examples/#baidu-map-point-time1.html

百度地图demo：http://lbsyun.baidu.com/jsdemo.htm#f0_3

 

以上集成之后：就差一步只显示中国地图了，两种方案：①一个省一个省的添加，34个区域组成中国地图；②自定义经纬度覆盖层，只显示中国地图；

以上方案①比较好写，但是由于百度地图的封闭闭合绘制原理，各个省的起点终点绘制会混乱，造成地图错误。想复现bug的同学可以快速参照一下步骤：打开：http://lbsyun.baidu.com/jsdemo.htm#c1_10，然后找到“覆盖物示例”-->“添加行政区划”，看懂之后，把区划改改“北京市”或者“山西省”试一下，接着参照：http://www.cnblogs.com/wondergx/p/5305602.html和https://blog.csdn.net/myfmyfmyfmyf/article/details/69382618封装一下代码，试试多个省份添加之后的效果（只显示两个省问题就能出现），结果发现百度地图JS自身问题造成无法通过方案一只显示中国地图。

 

那么我们进行方案二，添加如下JS代码，覆盖层代码我已经帮你们一点一点手动量出来了（怎么量：打开百度地图demo，上文列的网址，打开之后找到鼠标示例-->鼠标点击拾取坐标，alert改为consle输出，自己认真点一遍，copy就行啦）。

function drawBoundary() {

        /*画遮蔽层的相关方法
        *思路: 首先在中国地图最外画一圈，圈住理论上所有的中国领土，然后再将每个闭合区域合并进来，并全部连到西北角。
        *      这样就做出了一个经过多次西北角的闭合多边形*/
        //定义中国东南西北端点，作为第一层
        //向数组中添加一次闭合多边形，并将西北角再加一次作为之后画闭合区域的起点
        var pStart = new BMap.Point(180,90);
        var pEnd = new BMap.Point(0,-90);
        var pArray = [
            new BMap.Point(pStart.lng,pStart.lat),
            new BMap.Point(pEnd.lng,pStart.lat),
            new BMap.Point(pEnd.lng,pEnd.lat),
            new BMap.Point(pStart.lng,pEnd.lat)];
        //循环添加各闭合区域
        pArray.push(new BMap.Point(135.077218,48.544352));
        pArray.push(new BMap.Point(134.92218,48.584352))
        pArray.push(new BMap.Point(134.827218,48.534352))
        pArray.push(new BMap.Point(134.727669,48.495377));
        pArray.push(new BMap.Point(134.304531,48.394091));
        pArray.push(new BMap.Point(133.513447,48.177476));
        pArray.push(new BMap.Point(132.832747,48.054205));
        pArray.push(new BMap.Point(132.519993,47.789172));
        pArray.push(new BMap.Point(131.765704,47.813962));
        pArray.push(new BMap.Point(131.103402,47.776772));
        pArray.push(new BMap.Point(130.919429,48.331824));
        pArray.push(new BMap.Point(130.77225,48.868729));
        pArray.push(new BMap.Point(129.907577,49.351849));
        pArray.push(new BMap.Point(128.73015,49.699156));
        pArray.push(new BMap.Point(127.791888,49.85404));
        pArray.push(new BMap.Point(127.791888,50.492084));
        pArray.push(new BMap.Point(126.927215,51.616759));
        pArray.push(new BMap.Point(126.467283,52.579818));
        pArray.push(new BMap.Point(125.952158,53.059077));
        pArray.push(new BMap.Point(124.701142,53.313247));
        pArray.push(new BMap.Point(123.56051,53.664362));
        pArray.push(new BMap.Point(121.555204,53.46722));
        pArray.push(new BMap.Point(120.340983,53.125528));
        pArray.push(new BMap.Point(119.95464,52.579818));
        pArray.push(new BMap.Point(120.616942,52.523746));
        pArray.push(new BMap.Point(120.506559,52.095236));
        pArray.push(new BMap.Point(119.862653,51.616759));
        pArray.push(new BMap.Point(119.365926,50.959196));
        pArray.push(new BMap.Point(119.089967,50.362806));
        pArray.push(new BMap.Point(119.108364,50.05583));
        pArray.push(new BMap.Point(118.133307,49.925357));
        pArray.push(new BMap.Point(117.471005,49.794528));
        pArray.push(new BMap.Point(116.808702,49.889712));
        pArray.push(new BMap.Point(116.385564,49.758785));
        pArray.push(new BMap.Point(115.962426,48.953617));
        pArray.push(new BMap.Point(115.520891,48.147476));
        pArray.push(new BMap.Point(115.796851,47.677465));
        pArray.push(new BMap.Point(116.27518,47.652609));
        pArray.push(new BMap.Point(117.103059,47.652609));
        pArray.push(new BMap.Point(118.004526,47.801568));
        pArray.push(new BMap.Point(118.887596,47.577968));
        pArray.push(new BMap.Point(119.402721,47.127871));
        pArray.push(new BMap.Point(119.402721,46.800397));
        pArray.push(new BMap.Point(118.464459,46.825659));
        pArray.push(new BMap.Point(117.103059,46.648575));
        pArray.push(new BMap.Point(115.980824,46.088213));
        pArray.push(new BMap.Point(115.226534,45.702829));
        pArray.push(new BMap.Point(114.159491,45.275796));
        pArray.push(new BMap.Point(112.761297,45.171782));
        pArray.push(new BMap.Point(111.639061,45.132727));
        pArray.push(new BMap.Point(111.436691,44.55683));
        pArray.push(new BMap.Point(111.51028,44.001703));
        pArray.push(new BMap.Point(110.682402,43.387647));
        pArray.push(new BMap.Point(108.897864,42.658724));
        pArray.push(new BMap.Point(106.892559,42.522781));
        pArray.push(new BMap.Point(103.82021,42.140555));
        pArray.push(new BMap.Point(102.422016,42.536389));
        pArray.push(new BMap.Point(101.336575,42.82146));
        pArray.push(new BMap.Point(99.478448,42.929712));
        pArray.push(new BMap.Point(97.601924,42.997272));
        pArray.push(new BMap.Point(96.019756,43.815487));
        pArray.push(new BMap.Point(92.72664,45.288784));
        pArray.push(new BMap.Point(91.144473,45.599605));
        pArray.push(new BMap.Point(91.457227,46.483616));
        pArray.push(new BMap.Point(90.794924,47.553064));
        pArray.push(new BMap.Point(89.562305,48.221295));
        pArray.push(new BMap.Point(88.2377,48.953617));
        pArray.push(new BMap.Point(87.722576,49.279683));
        pArray.push(new BMap.Point(87.097067,49.255604));
        pArray.push(new BMap.Point(86.60034,49.122957));
        pArray.push(new BMap.Point(86.177203,48.710696));
        pArray.push(new BMap.Point(85.533297,48.344091));
        pArray.push(new BMap.Point(85.404516,47.875888));
        pArray.push(new BMap.Point(85.349324,47.390897));
        pArray.push(new BMap.Point(84.926186,47.215692));
        pArray.push(new BMap.Point(83.233635,47.315881));
        pArray.push(new BMap.Point(82.865689,47.328391));
        pArray.push(new BMap.Point(82.258578,45.844449));
        pArray.push(new BMap.Point(82.368962,45.366651));
        pArray.push(new BMap.Point(82.093003,45.30177));
        pArray.push(new BMap.Point(80.989165,45.275796));
        pArray.push(new BMap.Point(79.903724,45.015402));
        pArray.push(new BMap.Point(80.326862,44.332772));
        pArray.push(new BMap.Point(80.510835,43.642047));
        pArray.push(new BMap.Point(80.621219,43.186043));
        pArray.push(new BMap.Point(80.27167,43.010775));
        pArray.push(new BMap.Point(79.885327,42.304653));
        pArray.push(new BMap.Point(79.259819,41.838593));
        pArray.push(new BMap.Point(78.487133,41.576647));
        pArray.push(new BMap.Point(77.916816,41.341363));
        pArray.push(new BMap.Point(77.272911,41.16086));
        pArray.push(new BMap.Point(76.739389,41.02167));
        pArray.push(new BMap.Point(76.26106,40.546202));
        pArray.push(new BMap.Point(75.672346,40.75639));
        pArray.push(new BMap.Point(74.881262,40.630357));
        pArray.push(new BMap.Point(74.255754,40.293095));
        pArray.push(new BMap.Point(73.777425,39.939968));
        pArray.push(new BMap.Point(73.74063,39.556517));
        pArray.push(new BMap.Point(73.53826,39.34256));
        pArray.push(new BMap.Point(73.685438,38.725549));
        pArray.push(new BMap.Point(74.034987,38.407771));
        pArray.push(new BMap.Point(74.458125,38.335352));
        pArray.push(new BMap.Point(74.734084,38.074036));
        pArray.push(new BMap.Point(74.844468,37.577865));
        pArray.push(new BMap.Point(74.678892,37.21089));
        pArray.push(new BMap.Point(74.6237,36.975076));
        pArray.push(new BMap.Point(75.414784,36.501232));
        pArray.push(new BMap.Point(75.801127,35.934721));
        pArray.push(new BMap.Point(76.518622,35.379154));
        pArray.push(new BMap.Point(77.309706,35.137703));
        pArray.push(new BMap.Point(77.972008,34.758986));
        pArray.push(new BMap.Point(78.376749,34.241106));
        pArray.push(new BMap.Point(78.523927,33.473647));
        pArray.push(new BMap.Point(78.7079,32.978834));
        pArray.push(new BMap.Point(78.450338,32.745921));
        pArray.push(new BMap.Point(78.30316,32.340745));
        pArray.push(new BMap.Point(78.431941,32.04349));
        pArray.push(new BMap.Point(78.671106,31.572152));
        pArray.push(new BMap.Point(78.855079,31.145879));
        pArray.push(new BMap.Point(79.425395,30.797108));
        pArray.push(new BMap.Point(80.087697,30.447053));
        pArray.push(new BMap.Point(81.301919,29.855455));
        pArray.push(new BMap.Point(81.90903,30.0157));
        pArray.push(new BMap.Point(82.7921,29.485907));
        pArray.push(new BMap.Point(84.539843,28.661613));
        pArray.push(new BMap.Point(85.71727,28.124721));
        pArray.push(new BMap.Point(86.821108,27.732537));
        pArray.push(new BMap.Point(87.998535,27.69979));
        pArray.push(new BMap.Point(88.568851,27.716165));
        pArray.push(new BMap.Point(88.863208,27.108656));
        pArray.push(new BMap.Point(89.580703,27.190949));
        pArray.push(new BMap.Point(89.654292,27.765274));
        pArray.push(new BMap.Point(90.923705,27.650651));
        pArray.push(new BMap.Point(91.751584,27.223849));
        pArray.push(new BMap.Point(92.04594,26.778874));
        pArray.push(new BMap.Point(92.965805,26.646689));
        pArray.push(new BMap.Point(93.830478,26.960375));
        pArray.push(new BMap.Point(94.860727,27.453873));
        pArray.push(new BMap.Point(96.185332,27.798001));
        pArray.push(new BMap.Point(97.123594,27.503101));
        pArray.push(new BMap.Point(97.620321,27.896122));
        pArray.push(new BMap.Point(97.675513,28.059457));
        pArray.push(new BMap.Point(98.080254,27.306056));
        pArray.push(new BMap.Point(98.595378,27.009824));
        pArray.push(new BMap.Point(98.393008,26.066566));
        pArray.push(new BMap.Point(97.804294,25.483523));
        pArray.push(new BMap.Point(97.528335,24.847254));
        pArray.push(new BMap.Point(97.417951,24.10637));
        pArray.push(new BMap.Point(97.804294,23.717348));
        pArray.push(new BMap.Point(98.595378,23.886634));
        pArray.push(new BMap.Point(98.834543,23.123105));
        pArray.push(new BMap.Point(99.239283,22.697005));
        pArray.push(new BMap.Point(99.165694,22.303805));
        pArray.push(new BMap.Point(99.386462,21.857966));
        pArray.push(new BMap.Point(100.251135,21.445169));
        pArray.push(new BMap.Point(100.839848,21.290063));
        pArray.push(new BMap.Point(101.704521,21.031186));
        pArray.push(new BMap.Point(102.05407,21.152053));
        pArray.push(new BMap.Point(101.998878,21.582901));
        pArray.push(new BMap.Point(101.962083,22.132497));
        pArray.push(new BMap.Point(102.587591,22.355156));
        pArray.push(new BMap.Point(103.599443,22.338041));
        pArray.push(new BMap.Point(104.482513,22.560368));
        pArray.push(new BMap.Point(105.383981,22.799392));
        pArray.push(new BMap.Point(106.083078,22.59454));
        pArray.push(new BMap.Point(106.469421,22.286683));
        pArray.push(new BMap.Point(106.874162,21.754879));
        pArray.push(new BMap.Point(107.315697,21.514051));
        pArray.push(new BMap.Point(107.812424,21.410715));
        pArray.push(new BMap.Point(107.775629,21.134792));
        pArray.push(new BMap.Point(106.929353,20.269201));
        pArray.push(new BMap.Point(106.175064,19.17158));
        pArray.push(new BMap.Point(106.377435,18.470789));
        pArray.push(new BMap.Point(107.297299,17.23746));
        pArray.push(new BMap.Point(109.008248,15.675143));
        pArray.push(new BMap.Point(109.688948,13.705222));
        pArray.push(new BMap.Point(109.652153,11.664031));
        pArray.push(new BMap.Point(108.750686,9.571001));
        pArray.push(new BMap.Point(108.198767,6.876803));
        pArray.push(new BMap.Point(108.493124,5.090099));
        pArray.push(new BMap.Point(109.817729,3.612656));
        pArray.push(new BMap.Point(111.10554,3.298351));
        pArray.push(new BMap.Point(114.71141,5.514272));
        pArray.push(new BMap.Point(116.256783,7.556636));
        pArray.push(new BMap.Point(118.758815,10.883133));
        pArray.push(new BMap.Point(119.531502,13.669242));
        pArray.push(new BMap.Point(119.494707,16.617614));
        pArray.push(new BMap.Point(120.414572,18.961654));
        pArray.push(new BMap.Point(121.51841,20.633358));
        pArray.push(new BMap.Point(122.751029,22.303805));
        pArray.push(new BMap.Point(123.247756,23.378111));
        pArray.push(new BMap.Point(124.811526,25.68375));
        pArray.push(new BMap.Point(126.577667,25.900278));
        pArray.push(new BMap.Point(127.479134,26.67975));
        pArray.push(new BMap.Point(128.454191,28.189945));
        pArray.push(new BMap.Point(128.766945,29.93561));
        pArray.push(new BMap.Point(128.73015,31.650877));
        pArray.push(new BMap.Point(127.957464,32.153119));
        pArray.push(new BMap.Point(127.221572,32.745921));
        pArray.push(new BMap.Point(127.019202,33.596907));
        pArray.push(new BMap.Point(125.988953,33.827543));
        pArray.push(new BMap.Point(125.731391,34.546135));
        pArray.push(new BMap.Point(125.878569,35.454458));
        pArray.push(new BMap.Point(125.731391,36.634799));
        pArray.push(new BMap.Point(125.80498,37.51927));
        pArray.push(new BMap.Point(124.425183,37.972159));
        pArray.push(new BMap.Point(124.498772,38.58128));
        pArray.push(new BMap.Point(125.013896,39.242487));
        pArray.push(new BMap.Point(124.590758,39.471014));
        pArray.push(new BMap.Point(124.296402,39.840762));
        pArray.push(new BMap.Point(124.388388,40.081441));
        pArray.push(new BMap.Point(124.940307,40.335346));
        pArray.push(new BMap.Point(125.731391,40.630357));
        pArray.push(new BMap.Point(126.448885,40.96591));
        pArray.push(new BMap.Point(126.798434,41.493704));
        pArray.push(new BMap.Point(127.111188,41.410654));
        pArray.push(new BMap.Point(127.883875,41.271998));
        pArray.push(new BMap.Point(128.490985,41.452192));
        pArray.push(new BMap.Point(128.307012,41.879854));
        pArray.push(new BMap.Point(128.950918,41.921089));
        pArray.push(new BMap.Point(129.484439,42.12686));
        pArray.push(new BMap.Point(129.999564,42.549994));
        pArray.push(new BMap.Point(130.073153,42.807915));
        pArray.push(new BMap.Point(130.404304,42.495557));
        pArray.push(new BMap.Point(130.77225,42.359256));
        pArray.push(new BMap.Point(130.698661,42.726583));
        pArray.push(new BMap.Point(131.195388,42.848541));
        pArray.push(new BMap.Point(131.360964,43.494895));
        pArray.push(new BMap.Point(131.342566,44.491021));
        pArray.push(new BMap.Point(131.820896,45.002351));
        pArray.push(new BMap.Point(132.998323,44.976239));
        pArray.push(new BMap.Point(133.623831,45.599605));
        pArray.push(new BMap.Point(134.102161,46.394582));
        pArray.push(new BMap.Point(134.37812,47.228226));
        pArray.push(new BMap.Point(134.874847,47.851127));
        pArray.push(new BMap.Point(134.985231,48.233588));
        pArray.push(new BMap.Point(135.13241,48.454352));
        pArray.push(new BMap.Point(135.077218,48.474352));

        //添加遮蔽层
        var plyall = new BMap.Polygon(pArray,
                { strokeOpacity: 1, strokeColor: "#091934",
                    strokeWeight: 1, fillColor: "#091934",fillOpacity: 1 }); //建立多边形覆盖物
        map.addOverlay(plyall);

        pStart = new BMap.Point(180,90);
        pEnd = new BMap.Point(0,-90);
        pArray = [
            new BMap.Point(135.077218,48.454352),
            new BMap.Point(pStart.lng,pStart.lat),
            new BMap.Point(pStart.lng,pEnd.lat),
            new BMap.Point(135.077218,48.454352)];
        var sanjiaoxing = new BMap.Polygon(pArray,
                { strokeOpacity: 1, strokeColor: "#091934",
                    strokeWeight: 1, fillColor: "#091934",fillOpacity: 1}); //建立多边形覆盖物
        map.addOverlay(sanjiaoxing);
    }
    setTimeout(function () {
        drawBoundary();
    }, 1000);

另外想要我的地图样式的同学请拷贝以下代码：

    // 百度地图API功能
    var map = new BMap.Map("map", {
        enableMapClick: false
    });    // 创建Map实例
    map.centerAndZoom(new BMap.Point(105.403119, 38.028658), 5);  // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放

    // 地图自定义样式
    map.setMapStyle({
        styleJson: [{
            "featureType": "water",
            "elementType": "all",
            "stylers": {
                "color": "#044161"
            }
        }, {
            "featureType": "land",
            "elementType": "all",
            "stylers": {
                "color": "#091934"
            }
        }, {
            "featureType": "boundary",
            "elementType": "geometry",
            "stylers": {
                "color": "#064f85"
            }
        }, {
            "featureType": "railway",
            "elementType": "all",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "highway",
            "elementType": "geometry",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "highway",
            "elementType": "geometry.fill",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "highway",
            "elementType": "labels",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "arterial",
            "elementType": "geometry",
            "stylers": {
                "color": "#004981",
                "lightness": -39
            }
        }, {
            "featureType": "arterial",
            "elementType": "geometry.fill",
            "stylers": {
                "color": "#00508b"
            }
        }, {
            "featureType": "poi",
            "elementType": "all",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "green",
            "elementType": "all",
            "stylers": {
                "color": "#056197",
                "visibility": "off"
            }
        }, {
            "featureType": "subway",
            "elementType": "all",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "manmade",
            "elementType": "all",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "local",
            "elementType": "all",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "arterial",
            "elementType": "labels",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "boundary",
            "elementType": "geometry.fill",
            "stylers": {
                "color": "#029fd4"
            }
        }, {
            "featureType": "building",
            "elementType": "all",
            "stylers": {
                "color": "#1a5787"
            }
        }, {
            "featureType": "label",
            "elementType": "all",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "poi",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#ffffff"
            }
        }, {
            "featureType": "poi",
            "elementType": "labels.text.stroke",
            "stylers": {
                "color": "#1e1c1c"
            }
        }, {
            "featureType": "administrative",
            "elementType": "labels",
            "stylers": {
                "visibility": "on"
            }
        }, {
            "featureType": "road",
            "elementType": "labels",
            "stylers": {
                "visibility": "off"
            }
        }]
    });

 

方案二结合MapV代码基本实现了页面展示，线上项目实测显示10万个点完全没有问题。

 

另外此项目还有一块关于数据的设计方案，我也分享一下：我们起初用的后端netty+前端JS-websocket实现的，由于我们的10万个数据点大小超过了5M，netty需要手动设置数据包大小，所以为了以后的展示，我们不能实时修改netty项目代码，最后在年会结束，淘汰了此方式。我观察了一下mapv，新浪，腾讯等大数据地图，都是读取的文件方式，于是跟我们做统计的人员商量了一下设计方案：json文件+前端JS实现，统计人员每30分钟生成一份最新的数据存放在我们的FTP服务器上，JS-ajax请求我的接口，我的接口从文件服务器把文件流拿下来给JS做显示，直接节省了我们的netty中继的压力，去掉了websocket也让前端更为简单。