preface

Unconsciously, 2017 has already passed, and the first month of 2018 is coming to an end. I have to lament how time flies. I have been very busy recently, so I have no time to update my blog, so the blog is shorter than a month.

The body of the

Recently, due to business requirements, it is necessary to realize the coordinate diagram of massive data points for visual presentation and analysis of data. The approximate realization effect diagram is as follows:

From the above analysis, it can be seen that the effect is similar to that of loading mass points DEMO in Baidu Map, so mass points are used to achieve this effect:

First, we need to create a Map instance and set the Map’s center point coordinates with the image level:

var map = new BMap.Map("map", {}); Map. CenterAndZoom (new BMap. Point (110.000, 36.000), 6); map.enableScrollWheelZoom();Copy the code

Here, let’s set up the theme of the map. Here we share a theme of our custom dark series:

var style_map = [ { "featureType": "background", "elementType": "all", "stylers": { "color": "#39437bff" } }, { "featureType": "road", "elementType": "all", "stylers": { "color": "#011438ff" } } ]; // Use map.setmapstyle ({styleJson:style_map});Copy the code

Next, we fetch the corresponding data from the back-end interface, which contains the latitude and longitude of each Point position, and then create the Point instance according to each latitude and longitude, and save it in the corresponding list set:

Var points = []; $.each(data,function (index,el) { var poi = new BMap.Point(el[1], el[0]); points.push(poi); });Copy the code

After the above Point instance is created, it is necessary to start drawing. According to the official DEMO, we first need to judge whether to support drawing massive points, and then set relevant parameters:

If (document.createElement('canvas').getContext) {var options = {size: BMAP_POINT_SIZE_BIG, / / the enumeration dimension, reference: http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html#a3b23 shape: BMAP_POINT_SHAPE_CIRCLE, / / enumeration shape, reference: http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html#a3b22 color: '#db2e3169' // color value where color value effect is red translucency}; var pointCollection = new BMap.PointCollection(points, options); // Initialize PointCollection map.addoverlay (PointCollection); } else {alert(' Check out this example in Chrome, Safari, IE8+ or above '); }Copy the code

To combine the above code, can achieve the effect of the preset figure, but note that when an asynchronous request, not the rendering code is written in the success of the callback function, or you will have no effect, can be defined outside a function, then success will Point after the instance has been created to set the list passed to the function for drawing operation.

Afterword.

The New Year is coming soon, I wish you a happy New Year in advance!