腾讯地图Javascript API GL

1. 介绍

腾讯位置服务在多平台为开发者提供了丰富的地图展现形式，帮助从属于不同领域的开发人员轻松完成构建地图并在其基础上打造专属内容的工作。同时配合海量数据、个性化定制、可视化等能力满足各个行业场景下对地图的需求。

Javascript API GL是基于WebGL技术打造的3D版地图API，3D化的视野更为自由，交互更加流畅。
提供丰富的功能接口，包括点、线、面绘制，自定义图层、个性化样式及绘图、测距工具等，使开发者更加容易的实现产品构思。
充分发挥GPU的并行计算能力，同时结合WebWorker多线程技术，大幅度提升了大数据量的渲染性能。最高支持百万级点、线、面绘制，同时可以保持高帧率运行。

2. 从Hello World开始

首先注册腾讯位置服务平台账号，完成个人认证后，新建应用申请应用Key，

在这里插入图片描述

里边默认启用产品足够我们使用了，如果需要额外的服务勾选即可

在这里插入图片描述

进入JavaScript API，查看开发指南

在这里插入图片描述

选择基础入门

在这里插入图片描述

将官方提供的Hello World示例复制到我们的代码中，注意将应用Key替换成自己申请的Key

DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Hello world!title>
    <style type="text/css">
    #container{
        /*地图(容器)显示大小*/
        width:1200px;
        height:400px;
    }
    style>
    
    <script src="https://map.qq.com/api/gljs?v=1.exp&key=******替换成你申请的Key******">script>
    <script>
        //地图初始化函数，本例取名为init，开发者可根据实际情况定义
        function initMap() {
            //定义地图中心点坐标
            var center = new TMap.LatLng(39.984120, 116.307484)
            //定义map变量，调用 TMap.Map() 构造函数创建地图
            var map = new TMap.Map(document.getElementById('container'), {
                center: center,//设置地图中心点坐标
                zoom: 17.2,   //设置地图缩放级别
                pitch: 43.5,  //设置俯仰角
                rotation: 45    //设置地图旋转角度
            });
        }
    script>
head>

<body onload="initMap()">
    
    <div id="container">div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

以本地服务的方式去启动，不要以磁盘路径去访问

在这里插入图片描述

3. 个性化地图

地图平台大多默认采用经典白色风格，有时我们需要地图样式和企业系统风格保持一致，或者做一些个性化的展示。在这方面腾讯地图为开发者提供了可扩展的地图风格，包括一些官方样式模板，如果不满足我们的需求，还可以进行自定义样式。

选择(❤ ω ❤)的样式，点击直接使用，将样式和使用的应用Key进行绑定

在这里插入图片描述

在代码中设置使用样式

 //定义map变量，调用 TMap.Map() 构造函数创建地图
            var map = new TMap.Map(document.getElementById('container'), {
                center: center,//设置地图中心点坐标
                zoom: 17.2,   //设置地图缩放级别
                pitch: 43.5,  //设置俯仰角
                rotation: 45,    //设置地图旋转角度
                mapStyleId: 'style1' //设置样式ID style1、style2...
            });
1
2
3
4
5
6
7
8

官方提供的样式（其中一个）运行结果如下：

在这里插入图片描述

4. 自定义样式

首先在开发者平台创建自己的自定义样式，将自定义样式和应用Key关联后使用自定义样式

在这里插入图片描述

在应用中绑定自己设置的自定义样式

在这里插入图片描述

在代码中更改mapStyleId为对于的自定义样式id

运行结果：

在这里插入图片描述

相关阅读:
探索AI实践最优解，AISummit全球人工智能技术大会完美落幕
QT中删除信号于槽的连接
Kotlin FileInputStream read File
星巴克推出Web3平台；天啦噜，AI绘画能007了；『决策算法』电子书；合成人脸数据集；面向数据的版本控制；前沿论文 | ShowMeAI资讯日报
UE5——C++编译MSB3073报错
ORA-01005 vs ORA-28040
C++ 资源大全：标准库、Web框架、人工智能等 | 最全整理
文件包含漏洞及漏洞复现
Tomcat 源码解析一EL表达式源码解析
电商API接口汇总，引领企业国际化

原文地址：https://blog.csdn.net/weixin_43847283/article/details/126079097