阿里巴巴集团旗下
为什么选择高德
成功案例
产品优势
数据优势
服务优势
精选权益
产品介绍
基础产品
地图
定位
导航
搜索
特色产品
GeoHUB定制地图
企业智图
猎鹰轨迹服务
地址服务
LOCA 数据可视化
高德智慧景区
高德企业用车
解决方案
解决方案
智能派单
上门服务调度
零售铺货
智慧物流
智慧交通
出行
O2O
电商
社交
运动
智能硬件
开发支持
Web端
地图 JS API
LOCA数据可视化 API
地图组件
URI API
室内地图 JS API
地铁图 JS API
Android平台
Android 地图SDK
Android 轻量版地图SDK
Android 定位SDK
Android 导航SDK
Android 猎鹰SDK
iOS平台
iOS 地图SDK
iOS 轻量版地图SDK
iOS 定位SDK
iOS 导航SDK
iOS 猎鹰SDK
Web服务
Web服务 API
猎鹰服务 API
其他
GeoHUB使用指南
微信小程序插件
高德地图手机版
地图Flutter插件
HarmonyOS 地图SDK
帮助与支持
常见问题
开发者论坛
服务健康状态
加入我们
地图工具
GeoHUB
坐标拾取器
地图名片
地图快速生成器
自定义地图
三维模型转换
服务升级
配额提升
自定义地图
GeoHUB数据中心
商用服务
云图市场
控制台
登录
注册
退出
我的消息
云图市场
应用管理
GeoHUB
数据可视化平台
Loca API 示例
基本功能
AMapLoader 加载 Loca
可视化图层创建
点动态样式
加载 CSV 数据
鼠标事件选中样式
柱体光照和鼠标事件
棱台
点云 PointCloudLayer
武汉市车辆密度
世界矿物质分布图
美国某城市水域密度
散点 ScatterPointLayer
分类散点
单色散点
圆点 RoundPointLayer
大小圆点动态样式 - Function
图标点 IconLayer
天气预报
银行网点
线 LineLayer
单色路径
分类路径
连接线 LinkLayer
弧度连接线
世界航空线
直线连接线
多边形 PolygonLayer
小区及楼块图
北京行政区面
热力 HeatmapLayer
2D 热力图
3D 热力-路口拥堵指数
网格 GridLayer
网格热力 - 文字标注
网格热力 - 颜色
网格热力 - 带有图例
蜂窝 HexagonLayer
蜂窝热力图(按米分箱)
某公园周边人流分布
蜂窝热力图
行政区图 DistrictLayer
行政区热力
行政区下钻上浮
行政区热力 - 鼠标事件
等值图 CountourLayer
等值线
等值面
文字 LabelsLayer
各省年收入
各地区交通事故增长率
‹
›
单色路径
北京公交路网,线(line)型数据,形成路径和轨迹的视觉效果。
源代码编辑器
复制
运行
还原
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>北京公交路网</title> <style> html, body, #container { margin: 0; padding: 0; width: 100%; height: 100%; } </style> </head> <body> <div id="container" class="container"></div> <script src="//webapi.amap.com/maps?v=1.4.15&key=您申请的key值&"></script> <script src="//webapi.amap.com/loca?v=1.3.2&key=您申请的key值"></script> <script src="//a.amap.com/Loca/static/dist/jquery.min.js"></script> <script> var map = new AMap.Map('container', { mapStyle: 'amap://styles/db9efe6a1745ac24b7269b862f359536', features: ['bg','road'], center: [116.397732, 39.912152], zoom: 11.2, pitch: 46, viewMode: '3D' }); var layer = new Loca.LineLayer({ map: map, }); $.get('//a.amap.com/Loca/static/mock/buslines_bj_zip.txt', function (data) { var start = []; var lines = data.split('&').map(function (item) { return { linePath: item.split(';').map(function (lnglat, index) { var ll = lnglat.split(','); ll = [+ll[0], +ll[1]]; if (index == 0) { start = ll; } else { ll = [ll[0] / 1000 + start[0], ll[1] / 1000 + start[1]] } return ll; }) }; }); layer.setData(lines, { lnglat: 'linePath' }); layer.setOptions({ style: { // 3D Line 不支持设置线宽,线宽为 1px // borderWidth: 1, opacity: 0.4, color: '#07E8E4', } }); layer.render(); }) </script> </body> </html>
控制台
清空
示例
中心
常见
问题
智能
客服