腾讯地图Javascript API GL

简介: 腾讯地图Javascript API GL

1. 介绍


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


Javascript API GL是基于WebGL技术打造的3D版地图API,3D化的视野更为自由,交互更加流畅。

提供丰富的功能接口,包括点、线、面绘制,自定义图层、个性化样式及绘图、测距工具等,使开发者更加容易的实现产品构思。

充分发挥GPU的并行计算能力,同时结合WebWorker多线程技术,大幅度提升了大数据量的渲染性能。最高支持百万级点、线、面绘制,同时可以保持高帧率运行。


2. 从Hello World开始


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

1673453023229.jpg

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

1673453033115.jpg

进入JavaScript API,查看开发指南

1673453042707.jpg

选择基础入门

1673453051247.jpg

将官方提供的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>
    <!--引入Javascript API GL,参数说明参见下文-->
    <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>
<!-- 页面载入后,调用init函数 -->
<body onload="initMap()">
    <!-- 定义地图显示容器 -->
    <div id="container"></div>
</body>
</html>


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

1673453070547.jpg


3. 个性化地图


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


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

1673453086389.jpg

1673453096549.jpg

在代码中设置使用样式

//定义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...
            });


官方提供的样式(其中一个)运行结果如下:

1673453110338.jpg


4. 自定义样式


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

1673453123761.jpg

1673453132199.jpg

1673453139328.jpg

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

1673453148366.jpg

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


运行结果:

1673453155523.jpg

相关文章
|
2月前
|
JavaScript 前端开发 API
常用JavaScript 数组 API大全
常用JavaScript 数组 API大全
35 0
|
2月前
|
API
egg.js 24.2写第一个api接口
egg.js 24.2写第一个api接口
71 0
|
4月前
|
分布式计算 JavaScript 前端开发
JS中数组22种常用API总结,slice、splice、map、reduce、shift、filter、indexOf......
JS中数组22种常用API总结,slice、splice、map、reduce、shift、filter、indexOf......
|
3月前
|
Web App开发 JavaScript NoSQL
深入浅出:构建基于Node.js的RESTful API
在当今快速发展的互联网时代,RESTful API已成为前后端分离架构中不可或缺的一部分。本文旨在为初学者和中级开发人员提供一个清晰、简洁的指南,详细介绍如何使用Node.js构建一个高效、可维护的RESTful API。通过结合实际案例,本文将从API设计理念出发,深入讲解如何利用Express框架及MongoDB数据库实现API的增删改查功能,同时探讨如何通过JWT进行安全认证,确保数据传输的安全性。此外,文章还将简要介绍如何使用Swagger生成API文档,使得API的测试和维护更加便捷。无论你是希望提升现有项目的API设计,还是想从零开始构建一个新项目,本文都将为你提供一条清晰的道路
|
4天前
|
缓存 监控 JavaScript
Node.js中构建RESTful API的最佳实践
【4月更文挑战第30天】本文介绍了在Node.js中构建RESTful API的最佳实践:选择合适的框架(如Express、Koa)、设计清晰的API接口(遵循HTTP动词和资源路径)、实现认证授权(JWT、OAuth 2.0)、错误处理、限流缓存、编写文档和测试,以及监控性能优化。这些实践有助于创建健壮、可维护和易用的API。
|
4天前
|
JavaScript API 开发者
深入了解Node.js的文件系统:Node.js文件系统API的使用与探索
【4月更文挑战第30天】本文深入探讨了Node.js的文件系统API,介绍了如何引入`fs`模块进行文件操作。内容包括异步读取和写入文件、删除文件、创建目录以及使用文件流进行高效操作。此外,还提到了文件系统的监视功能,帮助开发者全面掌握在Node.js中处理文件和目录的方法。
|
18天前
|
JavaScript API
Node.js API实例讲解——FS 文件夹操作
Node.js API实例讲解——FS 文件夹操作
23 0
|
24天前
|
JavaScript 前端开发 API
如何利用Python的Flask框架与Vue.js创建RESTful API服务
【4月更文挑战第10天】本文介绍了如何使用Flask和Vue.js创建一个前后端分离的RESTful API服务。Flask作为后端框架,负责提供CRUD操作,与SQLite数据库交互;Vue.js作为前端框架,构建用户界面并利用axios库与后端API通信。通过示例代码,展示了Flask设置路由处理用户数据以及Vue组件如何调用API获取和操作数据。此基础结构为构建更复杂的Web应用提供了起点。
|
28天前
|
存储 SQL JavaScript
js常见的存储API以及应用场景?使用方式,各个优缺点?
【4月更文挑战第4天】JavaScript存储API包括`localStorage`、`sessionStorage`、`cookies`、`IndexedDB`和弃用的`Web SQL`。`localStorage`和`sessionStorage`用于页面数据存储,前者持久化,后者限当前会话。`cookies`适用于会话管理,但存储空间有限。`IndexedDB`适合大量结构化数据存储和查询。废弃的`Web SQL`曾提供关系型数据库功能。选择时需考虑数据性质、存储需求、安全性和兼容性。
21 2
|
2月前
|
JavaScript 前端开发 API
JavaScript循环遍历常用的7种方法以及常用的数组 API
JavaScript循环遍历常用的7种方法以及常用的数组 API
37 0