preface

Data Visualization API (Web) is a professional geospatial data visualization rendering engine based on Tencent location service JavaScript API GL. Through this API, the visualization of trajectory data, coordinate point data, thermal, migration, route and other spatial data can be realized.

Using the step

1. Register as a Tencent location service developer, and enter the console -> Key management interface to create a key;

2. Data Visualization API (hereinafter referred to as visualization API), which provides visualization effects in the form of layers on top of JavaScript API GL, and the data displayed in layers is centrally managed by instantiated objects.

Load the visual API

The visualization API is loaded as an add-on to Javascript API GL, make sure: import &libraries= Visualization parameter (see: Javascript API GL loading parameter description)

<script src="https://map.qq.com/api/gljs?v=1.exp&key=YOUR_KEY&libraries=visualization"></script>
Copy the code

Application scenarios

Thermal map shows data strength and distribution trend by color, which can be used in travel, tourism, police security, urban planning and research.

code

You can refer to the manual for details of parameters.

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, <meta http-equiv=" x-UA-compatible "content=" IE =edge"> <title>3D classic </title> </head> <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&libraries=visualization"></script> <style type="text/css"> html, body { height: 100%; margin: 0px; padding: 0px; } #container { width: 100%; height: 100%; } </style> <body onload="initMap()"> <div id="container"></div> <script src="https://mapapi.qq.com/web/lbs/visualizationApi/demo/data/heat.js"></script> <script> function initMap() { var Center = new MAP.latLNG (39.909897147274364, 116.39756310116866); Var map = new map. map ("container", {zoom: 12,// Set the map zoom level pitch: 45, // Set the map pitch Angle: center: MapStyleId: "style1" // Personalization}); Visualization.Heat({Max: 180, // maximum min: 0, // minimum height: 40, // maximum height: 40, // radius: }).addto (map).setData(heatData); } </script> </body> </ HTML >Copy the code

rendering

Online sample

The above content is just a simple implementation, more specific code examples and principle explanation, please refer to the article:

Hard core dry goods come! Goose plant front engineer hand in hand to teach you to achieve heat diagram!