tmap-jsapi-gl

TMap JSAPI GL Skill

Help users use the Tencent Maps JavaScript API GL for map feature development, including basic map features and data visualization features.

Directory Structure

API Documentation

JS API Reference Documentation: references/jsapigl/docs/ (21 md files)
- Overview.md - API overview and index
- Map.md - Map core classes and configuration
- Marker.md - Marker-related APIs
- Vector Graphics.md - Vector graphics such as polylines, polygons, circles, rectangles, ellipses, etc.
- Text Marker.md - Text labeling API
- DOM Overlay.md - Custom DOM overlays
- Info Window.md - Info window API
- Marker Cluster.md - Marker clustering feature
- Controls.md - Map controls
- Custom Layer.md - Custom raster/vector layers
- Events.md - Map event system
- Base Classes.md - Base classes such as LatLng and Point
- Indoor Map.md - Indoor map feature
- Additional Libraries: Map Tools.md - Geometry editor, measurement tools
- Additional Libraries: Geometry Calculation Library.md - Distance and area calculation
- Additional Libraries: Service Libraries.md - Place search, route planning, etc.
- Additional Libraries: Map Perspective Additional Library.md - Observer perspective
- Additional Libraries: Model Library.md - GLTF/3DTiles models
- Additional Libraries: Weather Layer.md - Weather layer
- Additional Libraries: Vector Data Layer.md - GeoJSON/MVT layers
- Environment Detection.md - Browser environment detection
Visualization Reference Documentation: references/visualization/docs/ (15 md files)
- Reference Manual.md - Visualization API overview
- Arc Diagram.md - 3D arcs/flow diagrams
- Scatter Plot.md - 3D scatter plots
- Heatmap.md - Classic heatmap
- Hexagon Heatmap.md - Hexagonal aggregation heatmap
- Grid Heatmap.md - Grid aggregation heatmap
- Trajectory Map.md - Trajectory display
- Region Map.md - Region outline map
- Pipeline Map.md - 3D pipeline map
- Radiation Circle.md - Radiation circle effect
- Wall Mask.md - Wall mask effect
- Crystal.md - 3D crystal effect
- Administrative Divisions.md - Administrative division display
- Events.md - Visualization event system
- Base Classes.md - Visualization base classes

Example Code

JS API Demos: references/jsapigl/demos/ (129 html files)
- Categorized by function: map operations, markers, text markers, marker clustering, polylines, polygons, controls, info windows, service classes, personalized maps, geometric calculations, model library, application tools, custom overlays, city roaming, etc.
Visualization Demos: references/visualization/demos/ (44 html files)
- Classified by layer type: arc layer, scatter layer, heatmap layer, path layer, honeycomb layer, area layer, crystal layer, etc.

Workflow

1. Understand user requirements

When users ask questions related to the Tencent Maps API:

Clarify the type of functionality the user needs (basic map/visualization)
Determine the specific class or feature to use

2. Query the API documentation

In references/jsapigl/docs/ or references/visualization/docs/ , find the relevant API documentation:

Search for keywords (such as "marker", "heatmap")
Read the description, configuration parameters, and methods of the corresponding class

3. Find sample code

Find examples in the corresponding demos directory:

JS API examples:references/jsapigl/demos/
Visualization examples:references/visualization/demos/
Example naming format:功能分类_具体示例.html

4. Provide a solution

Based on the documentation and examples, provide the user with:

API interface description
Code examples
Notes and best practices

Usage example

User question: "How do I add a marker to the map?"

Execution process:

Read references/jsapigl/docs/点标记.md to learn about the MultiMarker API
Check references/jsapigl/demos/ for marker-related examples
Provide a complete code example and explanation

User question: "How do I draw a heatmap?"

Execution process:

Read references/visualization/docs/热力图.md to learn about the Heat API
Check references/visualization/demos/ for heatmap examples
Explain the data format and configuration options

Quick start template

Basic map initialization:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>腾讯地图示例</title>
    <script src="https://map.qq.com/api/gljs?v=3&key=[YOUR_KEY]"></script>
    <!-- 如需可视化功能，添加: &libraries=visualization -->
</head>
<body>
    <div id="map" style="width:100%;height:500px;"></div>
    <script>
        var map = new TMap.Map("map", {
            zoom: 12,
            center: new TMap.LatLng(39.984104, 116.307503)
        });
    </script>
</body>
</html>

Visualization layer example (heatmap):

// 加载可视化库
// <script src="https://map.qq.com/api/gljs?v=1.beta&libraries=visualization&key=[YOUR_KEY]"></script>

var heat = new TMap.visualization.Heat({
    radius: 50,
    height: 100,
    gradientColor: {
        0: '#13B06A',
        0.4: '#13B06A', 
        0.8: '#E9AB1D',
        0.9: '#E9AB1D',
        1: '#E05649'
    }
}).addTo(map);

heat.setData([
    { lat: 39.984104, lng: 116.307503, count: 100 },
    { lat: 39.984504, lng: 116.307803, count: 80 }
]);

Notes

JS API GL

API Key: Using the Tencent Maps API requires applying for a Key
Version: Currently the GL version, supporting 3D maps and WebGL rendering
Browser compatibility: Modern browsers, IE11+ (polyfill required)
Coordinate system: Uses the gcj02 coordinate system
Map creation (important): The container for map creation must have a fixed width and height, especially under flex layout
API usage (important): All API calls for all features must use the interfaces, properties, and events that appear in the documentation, and must not be made up;
API parameters (important): All API input parameters must strictly follow the format described in the API documentation. If you are unsure, check the corresponding demo, including the data format in the demo;
Use of additional libraries: To use additional libraries, you need to add libraries parameter to the API loading URL

Additional library	libraries value	Namespace	Description
Map tools	`tools`	`TMap.tools`	Geometry editor, measurement tools
Geometry computation library	`geometry`	`TMap.geometry`	Distance/area calculation, geometric relationship determination
Service library	`service`	`TMap.service`	Place search, route planning, administrative divisions, etc.
Map perspective additional library	`view`	`TMap` (extension method)	Operate the map from an observer perspective
Model library	`model`	`TMap.model`	GLTF/3DTiles/3DMarker models
Weather layers	`weather`	`TMap.weather`	Meteorological layers such as cloud maps and temperature maps
Vector data layers	`vector`	`TMap.vector`	GeoJSON/MVT vector data layers
Visualization library	`visualization`	`TMap.visualization`	Capabilities of the visualization API

Usage examples：

<!-- 加载多个附加库 -->
<script src="https://map.qq.com/api/gljs?v=1&libraries=tools,geometry,service,model&key=[YOUR_KEY]"></script>

Visualization API

Data format: Visualization layers require data input in a specific format
Performance: Pay attention to performance optimization when dealing with large data volumes
Hierarchy: Visualization layers can have their display hierarchy set
Events: Supports interactive events such as click and hover
API usage (important): API calls for all features must use the interfaces, properties, and events that appear in the documentation; do not make them up yourself
API parameters (important): All API input parameters must strictly follow the format described in the API documentation. If you are unsure, go look at the corresponding demo, including the data format in the demo;

Best practices

Modular loading: Use a modular approach to load the API on demand
Error handling: Add handling logic for map loading failures
Memory management: Destroy unnecessary layers and overlays in a timely manner
Performance optimization: Use aggregation or thinning for large datasets