为什么选择高德
成功案例
产品优势
数据优势
服务优势
精选权益
产品介绍
基础产品
地图
定位
导航
搜索
特色产品
外勤调度引擎
地图小程序
3D地形图
排线调度服务
GeoHUB定制地图
GIS企业智图
猎鹰轨迹服务
地址服务
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
物流服务 API
其他
GeoHUB使用指南
微信小程序插件
高德地图手机版
地图Flutter插件
HarmonyOS 地图SDK
帮助与支持
常见问题
合规中心
开发者论坛
加入我们
地图工具
GeoHUB
坐标拾取器
地图名片
地图快速生成器
GeoHUB自定义地图
三维模型转换
服务升级
配额提升
GeoHUB自定义地图
GeoHUB数据中心
商用服务
高级能力
企业智图SaaS
云图市场
控制台
登录
注册
退出
我的消息
云图市场
应用管理
GeoHUB
JS API UI 组件示例
加载
使用 AMapLoader 加载 AMapUI
简单标注
自定义图标
自定义文字
内置样式
定位点
纯色背景
更新图标和文字
图标主题
字体图标标注
字体样式
图标样式
设置awesomeIcon
自定义FontAwesome资源
矢量标注
各类形状
自定义路径
自定义形状
使用Iconfont
水滴
调节Shape属性
简单信息窗体
覆盖默认的dom结构
监听事件
简单信息窗体
使用模板
标注列表
完整示例
事件监听
选中样式的控制
Marker带Circle
自定义选中后的行为
搜索+分页
selectedClassNames
简单数据渲染
SimpleMarker&SimpleWindow
使用SvgMarker
基础控件
自定义主题
基础控件
图层切换控件
实时交通控件
缩放控件
海量点展示
调整绘制样式
调整TopN选取
动态改样式
自定义绘制内容
自定义绘制引擎
样式分组引擎
图片内容
海量点展示
图标分组
点选取漏斗
闪烁效果
轨迹展示
简单路径
调整巡航器样式
调整线、点样式
省域边界
动态修改巡航器
动态延展路径
轨迹展示&巡航
轨迹巡航控制
仅展示驶过线
简单数据附加
行政区划浏览
事件处理
行政区分组
行政区浏览
区域定位
多区域加载
反向镂空区域
单区域加载
行政区划聚合
区划聚合
点击后显示聚合标注
定制聚合信息标注
自定义绘制引擎
事件支持
排除部分区划
区划面样式
各地美食
点击后展示海量点
区划聚合+海量点展示
设置顶级区划
拖拽选址
拖拽选址
自定义图标
POI选点
输入框选择POI点
POI搜索
‹
›
自定义绘制内容
使用PointSimplifier.renderOptions自定义海量点的不同元素样式
源代码编辑器
复制
运行
还原
<!-- 重点参数:renderOptions.pointStyle.content --> <!doctype html> <html lang="zh-CN"> <head> <!-- 原始地址://webapi.amap.com/ui/1.1/ui/misc/PointSimplifier/examples/custom-point-content.html --> <base href="//webapi.amap.com/ui/1.1/ui/misc/PointSimplifier/examples/" /> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <title>自定义绘制内容</title> <style> html, body, #container { width: 100%; height: 100%; margin: 0px; } #loadingTip { position: absolute; z-index: 9999; top: 0; right: 0; padding: 3px 10px; background: red; color: #fff; font-size: 13px; } /** * 定义my-hover-title */ .amap-ui-pointsimplifier-container .overlay-title.my-hover-title { font-size: 14px; line-height: 200%; font-style: italic; padding: 0 10px; } </style> </head> <body> <div id="container"></div> <script type="text/javascript" src='//webapi.amap.com/maps?v=2.0&key=您申请的key值'></script> <!-- UI组件库 1.0 --> <script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script> <script type="text/javascript"> //创建地图 var map = new AMap.Map('container', { zoom: 4 }); AMapUI.load(['ui/misc/PointSimplifier', 'lib/$'], function(PointSimplifier, $) { if (!PointSimplifier.supportCanvas) { alert('当前环境不支持 Canvas!'); return; } var pointSimplifierIns = new PointSimplifier({ zIndex: 300, map: map, //maxChildrenOfQuadNode:3, getPosition: function(item) { if (!item) { return null; } var parts = item.split(','); return [parseFloat(parts[0]), parseFloat(parts[1])]; }, compareDataItem: function(a, b, aIndex, bIndex) { if (aIndex === bIndex) { return 0; } return aIndex > bIndex ? -1 : 1; }, getHoverTitle: function(dataItem, idx) { return '序号: ' + idx; }, renderOptions: { //点的样式 pointStyle: { //绘制点占据的矩形区域 content: function(ctx, x, y, width, height) { //注意,这里的width和height可能不同于pointStyle里面的width/height, 高清屏幕下会存在比例缩放 //这里绘制一个圆顶锥形 var yPos = 1 / 3; var top = [x + width / 2, y], right = [x + width, y + height * yPos], bottom = [x + width / 2, y + height], left = [x, y + height * yPos]; ctx.moveTo(left[0], left[1]); ctx.arcTo(top[0], top[1], right[0], right[1], width / 3); ctx.lineTo(right[0], right[1]); ctx.lineTo(bottom[0], bottom[1]); ctx.lineTo(left[0], left[1]); }, //宽度 width: 15, //高度 height: 24, offset: ['-50%', '-100%'], fillStyle: '#316395', lineWidth: 1, strokeStyle: 'gray' }, topNAreaStyle: { content: function(ctx, x, y, width, height) { //绘制一个连接矩形四边中点的菱形 var top = [x + width / 2, y], right = [x + width, y + height * 1 / 2], bottom = [x + width / 2, y + height], left = [x, y + height * 1 / 2]; ctx.moveTo(top[0], top[1]); ctx.lineTo(right[0], right[1]); ctx.lineTo(bottom[0], bottom[1]); ctx.lineTo(left[0], left[1]); ctx.lineTo(top[0], top[1]); }, }, //鼠标hover时,绘制的叠加点的样式 pointHoverStyle: { width: 10, height: 10, content: 'circle' }, //鼠标hover时显示的title样式 hoverTitleStyle: { classNames: 'my-hover-title', offset: [0, -15], position: 'top' } } }); window.pointSimplifierIns = pointSimplifierIns; $('<div id="loadingTip">加载数据,请稍候...</div>').appendTo(document.body); $.get('http://a.amap.com/amap-ui/static/data/10w.txt', function(csv) { var data = csv.split('\n'); pointSimplifierIns.setData(data); $('#loadingTip').remove(); }); }); </script> </body> </html>
控制台
清空
示例
中心
常见
问题
智能
客服