preface

To tell you the truth, it is very difficult to do a project, especially a person to do a project, when there is a problem, you can only search online, find information and so on. The point is that sometimes when things are out of the window (especially visualizations), there is very little useful material available online. When I first encountered the need to render thousands of markers and text markers at once, I had no idea what the problem would be and just wanted to render it. I thought the map would take care of itself, but I found myself overthinking it.

Caton cause analysis

At first, I thought it was caused by multiple calls to render function, because I was performing re-rendering operation in zoomed map. After several debugging, I found that this was not the main reason, especially when I was rendering poyline in large numbers. I only used the method for initialization once, but it was still very slow. Later, I realized that the main reason is that there are too many DOM elements on the page. Each node is composed of a DIV element. You can open the console and take a look.

The solution to the problem

Since the DOM is loaded too much at one time, the so-called map rendering and we usually render a long list, let dom only in the visual area for loading, not clear the visual area, so processing, on the line to improve the performance of a lot. How to determine whether the current latitude and longitude is in the visible area? The autonavi API encapsulates a method that takes the latitude and longitude of this point

IsInview (lonLat) {const bounds = this.map.getbounds (); const NorthEast = bounds.getNorthEast(); const SouthWest = bounds.getSouthWest(); const SouthEast = [NorthEast.lng, SouthWest.lat]; const NorthWest = [SouthWest.lng, NorthEast.lat]; const path = [ [NorthEast.lng, NorthEast.lat], SouthEast, [SouthWest.lng, SouthWest.lat], NorthWest, ]; / / the map viewing area four angular position according to the order in the path, is used to determine whether point in the viewing area const isInView = this. ResMap. GeometryUtil. IsPointInRing (lonLat, path); return isInView },Copy the code

For example, I want to render a lot of points here, pointData source data, define an array to store the currently rendered points parkMarks = []

RenderPoint () {if (this.parkmarks.length > 0) {this.map.remove(this.parkmarks)} for (let I = 0; i < this.pointData.length; I ++) {const isInview = this.isinView (json.parse (this.pointData[I].lonlat)[0]) if (isInview) {// Draw let circleMarker = new this.resMap.CircleMarker({ center: JSON.parse(this.pointData[i].lonLat)[0], radius: StrokeColor: "rgba(0,0,255,1)", strokeWeight: 2, strokeOpacity: 0.5, fillColor: "Red ", fillOpacity: 0.5, zIndex: 10, bubble: true, clickable: true,}); this.parkMarks.push(circleMarker); circleMarker.setMap(this.map); }}},Copy the code

Local map move ends when zoomend

this.map.on("moveend", () => { var zoom = this.map.getZoom(); if (zoom > 15) { this.renderPoint(); }});Copy the code

If there are other tags, you can do the same. Ok through measurement, perfect solution to the problem of stuck, welcome to comment