When doing business, a heat map needs to be completed after investigation. Because I really don’t want to write JSON data, here is an example from the official websiteLbs.amap.com/api/javascr… The specific thermal map looks like the figure below:

Step 1: You need a high key valueThe required key can be found in my application after registering amap developer (an application needs to be created).Put the key here, and the import will be placed in index.html, the outermost part of the project

Step 2: Need to fill in the data format here is:

Var heatmapData = [{" LNG ":" 116.311322 ", "lat" : "39.957033", "count" : 1}, {" LNG ":" 116.16741 ", "lat" : "39.89261", "count" : 2}].Copy the code

The third step: specific needs specific customization

1. The configuration API:

Presents the framework

declare var AMap: any; // declare AMap or an error will be reported inThis file declares,

Vue framework: blog.csdn.net/XU441520/ar…

This article describes it in great detail

2. Model generation

// The hotMap here is the ID of your HTML page div

Let map = new amap. map ("hotMap", {resizeEnable: true, // Whether to monitor map container size changes, default is false center: [116.418261, 39.921984], // Map center coordinate value zoom: 9.5, // zoom indicates the default zoom level when the map is opened. When the value increases, the map is enlarged, and the actual area seen decreases. Detailed mapStyle content change: 'amap: / / styles / 596486 b8b145fxxxxxxxx display / / / / set the map website here support two kinds of style, a custom, a default, the back will be described separately}); let heatmap; Function () {// Initialize Heatmap.Heatmap(map, {radius: 25, // Given radius: [0, 0.8], the gradient: {0.5 0.3: 'blue', 'green', 0.7 'yellow', 0.9: 'red'}}); // Set the dataset heatmap.setDataSet({data: heatmapData, // Put your data here Max: 100}); });Copy the code

Parameter description:

Max: represents the limit of heat differentiation in the hotspot map. If the point value in a certain area exceeds a certain proportion of Max, the color corresponding to the gradient configuration will be displayed.

Gradient:

Usage: Set (number of points within a point range (count in the data)/Max) as x, for example: x=100/100=1 (here 1 is used as gradient parameter),x > 0.9, then the color displayed in the target area will be redRadius: Controls the enveloping radius of a single point. All points within the radius count as the number of this point and increase the value of x in a disguised way. Set the appropriate radius to determine the radius of each point, in px.

The basic demand heat map is almost complete

1. Specific style customization:

The normal map color is white, but maybe this doesn’t suit your needs,Lbs.amap.com/dev/mapstyl…MapStyle :’amap://styles/ your ID ‘

2. Take Guangdong Province as an example for drawing regional boundaries:When the boundaries are drawn on the map, there are clear distinctions.

Steps:

Get the boundary points of the target region (with the AMap.DistrictSearch plugin)

const opts = { subdistrict: 0, extensions: 'all', level: 'district' }; DistrictSearch const district = new amap.districtSearch (opts); district.setLevel('district');Copy the code

Parameter description:2. Draw boundaries

Draw polygons on the map using the amap. Polygon object.

HandlePolygon (result) {// district. Search (' guangdong ', (status, result) => {const polygons = []; const bounds = result.districtList[0].boundaries; if (bounds) { for (let i = 0, l = bounds.length; i < l; {// Each area may be divided into several small areas. For example, jinshan District has a land circle, Const polygon = new amap. polygon ({map:map, // specify the map object () strokeWeight: 3, // outline width path: bounds[I], // outline node coordinates array fillColor: '#7EE8F2', // polygon fillColor fillOpacity: 0.01, // transparency borderWeight: StrokeColor: '# 00FFFF ', // line color}); polygons.push(polygon); } } map.setFitView(polygons); // viewport adaptive});Copy the code

3. Custom boundaries (draw 3d feel, highlight selected areas, use Autonavi to draw polygon areas)

Start by adding attributes to the map

Var map = new map. map ('hotmap',{viewMode:'3D' // open 3D view})Copy the code
  1. const object3Dlayer = new AMap.Object3DLayer();

// Layer class for adding all Object3D types

Const arr = '121.86412811, 31.1146794, 121.88112258, 31.130991200,Copy the code

// You define the coordinates of the boundary

for (let i = 0; i < arr.length; i++) { path.push(new AMap.LngLat(parseFloat(arr[0]), parseFloat(arr[1]))); } const polygon = new amap.object3d.prism ({path: path, height: 5000, color: 'rgba(9,35,74, 0.2)'}); polygon.transparent = true; Object3dlayer. add(polygon); Const outer = [new amap.lnglat (-360, 90, true), new amap.lnglat (-360, -90,), const outer = [new amap.lnglat (-360, -90,), new amap.lnglat (-360, -90,) true), new AMap.LngLat(360, -90, true), new AMap.LngLat(360, 90, true), ]; const pathArray = [outer]; Apply (pathArray, [path]) // amap. Polygon > Polygon const polygon2 = new amap. Polygon({map:map, StrokeWeight: 3, pathL: pathArray, fillColor: '#7EE8F2', // polygon fillColor fillOpacity: 0.01, borderWeight: StrokeColor: '# 00FFFF ', // line color}); polygon2.setPath(pathArray); map.add(polygon2)Copy the code