高德3D地图

JS API 3D 地图是基于矢量地图数据提供的新的地图视图效果，相比 2D 地图增加了对旋转、视角倾斜等地图功能的支持。3D 地图基于 WEBGL 开发，在保证流畅度的同时，增加了对无级别缩放等功能的支持。本章将向您介绍：

开启 3D 地图
3D 地图兼容性说明

开启 3D 地图视图效果，需要引用JSAPI `v1.4.0`以上版本的JSAPI，同时在 Map 初始化的时候给地图添加`viewMode:3D`属性。

JavaScript
var map = new AMap.Map('container', {
    pitch:75, // 地图俯仰角度，有效范围 0 度- 83 度
    viewMode:'3D' // 地图模式
});

3D 地图兼容性说明

3D地图效果下，如果使用自定义栅格图，需要保证栅格图片服务返回的图片资源是带有 Access-Control-Allow-Origin:* 响应Header的，否则将无法加载自定义栅格图。
3D地图目前兼容windows、Mac、iOS、Android等多平台下的众多浏览器，但是由于地图绘制依赖WebGL等前端环境，如果终端环境无法满足3D绘制的要求，我们将仍然使用原有2D视图进行绘制。
JSAPI V1.4.0之后的版本开始支持3D地图，3D视图不支持的 API 接口如下：

名称	说明
AMap.Polygon	带洞多边形的绘制，`v1.4.14`版本开始支持
AMap.CloudLayer	云图图层
PointSimplifier	海量点展示组件
PathSimplifier	轨迹展示组件
DistrictExplorer	行政区划浏览，`v1.4.14`版本开始支持
DistrictCluster	行政区聚合

查看高德3D立体图形的使用教程

腾讯地图 JavaScript API GL

概述

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

同步推出基于Javascript API GL的位置数据可视化API库，欢迎体验。

腾讯Unity地图SDK介绍

Unity地图及定位SDK是腾讯位置服务专门为游戏开发者打造的国内首套纯Unity矢量渲染引擎。它是基于真实地图数据建立的统一应用程序的工具集合，帮助游戏开发人员在游戏中轻松添加需要LBS能力支持的游戏场景。如街区排行，实景展示，陌生人社交，附近好友等。同时因为它是基于Unity开发的，所以极大降低了游戏开发者的接入成本，可以通过C#脚本和图形化界面轻松创建游戏对象。

其中Unity地图SDK致力于帮助开发者打造炫酷的地图场景，主要功能包括地图显示、地图交互、地图绘制、个性化底图配置、3D建筑物纹理贴图等。

百度3D地图

JavaScript API GL产品简介百度地图JavaScript API GL v1.0是一套由JavaScript语言编写的应用程序接口，可帮助您在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。

百度地图JavaScript API支持HTTP和HTTPS，免费对外开放，可直接使用。接口使用无次数限制。在使用前，您需先申请密钥（ak）才可使用。在您使用百度地图JavaScript API之前，请先阅读百度地图API使用条款。任何非营利性应用请直接使用，商业应用请参考使用须知。

JavaScript API GL使用了WebGL对地图、覆盖物等进行渲染，支持3D视角展示地图。 GL版本接口基本向下兼容，迁移成本低。目前v1.0版本支持了基本的3D地图展示、基本地图控件和覆盖物。

百度 MapVGL

MapVGL，是一款基于WebGL的地理信息可视化库，可以用来展示大量基于3D的地理信息点线面数据。设计初衷主要是为了解决大数据量的三维地理数据展示问题及一些炫酷的三维效果。

支持地图

推荐使用百度地图JavaScript APi和GL版本，也支持空白地图，可在示例demo中查看具体用法。

这里我们以百度地图GL版本为例，我们需要先引入地图的jsapi，然后就可以按照下面的使用方法介绍的，来做一个demo效果了。

<script src="//api.map.baidu.com/api?v=1.0&type=webgl&ak=你的密钥"></script>

使用方法

NPM: $ npm i mapvgl

CDN

npm的cdn地址

<script src="https://unpkg.com/mapvgl/dist/mapvgl.min.js"></script>

<!-- 如果使用到Three.js相关的图层需要引用 -->
<script src="https://unpkg.com/mapvgl/dist/mapvgl.threelayers.min.js"></script>

下面是备用百度cdn地址
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.41/dist/mapvgl.min.js"></script>

<!-- 如果使用到Three.js相关的图层需要引用 -->
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.41/dist/mapvgl.threelayers.min.js"></script>

Hello World

// 1. 创建地图实例
var bmapgl = new BMapGL.Map('map_container');
var point = new BMapGL.Point(116.403748, 39.915055);
bmapgl.centerAndZoom(point, 17);

// 2. 创建MapVGL图层管理器
var view = new mapvgl.View({
    map: bmapgl
});

// 3. 创建可视化图层，并添加到图层管理器中
var layer = new mapvgl.PointLayer(
    color: 'rgba(50, 50, 200, 1)',
    blend: 'lighter',
    size: 2,
    data: data
);
view.addLayer(layer);

// 4. 准备好规范化坐标数据
var data = [{
    geometry: {
        type: 'POINT',
        coordinates: [116.403748, 39.915055]
    }
}];

// 5. 关联图层与数据，享受震撼的可视化效果
layer.setData(data);

示例

更多炫酷的示例请访问示例demo

0 0 投票数

文章评分