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

Trajectory diagram implementation

You can refer to the manual to understand the parameters first, the following is the code example.

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Initial-scale =1.0"> <meta http-equiv=" x-UA-compatible "content=" IE =edge"> <title 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/trail.js"></script> <script> function initMap() { var Center = new map.latLNG (39.984104, 116.307503); Var map = new map. map ("container", {zoom:12,// Set the map zoom level center: center,// set the map center coordinate: "Style1" // Personalized style}); New map.visualization.Trail({pickStyle:function(item){return {width: 2}}, startTime: 0,// startTime of the animation cycle PlayRate :30 // Animation playback times}).addto (map).setData(trailData); } </script> </body> </ HTML >Copy the code

rendering

Online sample

Author: Tencent Location Service

Link: blog.csdn.net/weixin_4562…

Source: CSDN

Copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please indicate the source.