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

Bertha 。 2022-05-22 07:34 1250阅读 0赞

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

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

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

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

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

**链接: [https://pan.baidu.com/s/1SK4Yt\_SY-FsJ1NlPtTAV1A][https_pan.baidu.com_s_1SK4Yt_SY-FsJ1NlPtTAV1A] 提取码: iiag**

先看一下最后效果：

![70][]

![70 1][]

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

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

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

百度地图demo：[http://lbsyun.baidu.com/jsdemo.htm\#f0\_3][http_lbsyun.baidu.com_jsdemo.htm_f0_3]

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

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

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

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

// 百度地图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也让前端更为简单。

[https_pan.baidu.com_s_1SK4Yt_SY-FsJ1NlPtTAV1A]: https://pan.baidu.com/s/1SK4Yt_SY-FsJ1NlPtTAV1A
[70]: /images/20220522/56cd45450b9e4a35bd824014afb1ede1.png
[70 1]: /images/20220522/539809a3b72c4593a8f1ce5d900966ad.png
[https_lbsyun.baidu.com_index.php_title_jspopular]: https://lbsyun.baidu.com/index.php?title=jspopular
[http_mapv.baidu.com_gallery.html]: http://mapv.baidu.com/gallery.html
[http_mapv.baidu.com_examples_baidu-map-point-time1.html]: http://mapv.baidu.com/examples/#baidu-map-point-time1.html
[http_lbsyun.baidu.com_jsdemo.htm_f0_3]: http://lbsyun.baidu.com/jsdemo.htm#f0_3
[http_lbsyun.baidu.com_jsdemo.htm_c1_10]: http://lbsyun.baidu.com/jsdemo.htm#c1_10
[http_www.cnblogs.com_wondergx_p_5305602.html]: http://www.cnblogs.com/wondergx/p/5305602.html
[https_blog.csdn.net_myfmyfmyfmyf_article_details_69382618]: https://blog.csdn.net/myfmyfmyfmyf/article/details/69382618