控制台
登录
注册
退出
我的消息
云图市场
应用管理
GeoHUB
产品介绍
产品介绍
高德开放平台产品介绍
查看全部文档
搜索定位
鸿蒙星河版定位SDK
HOT
鸿蒙星河版定位SDK
搜索
HOT
位置、周边、行政区、ID等查询接口
API
JS
Android
iOS
定位
HOT
基于LBS的定位服务
API
Android
iOS
地理/逆地理编码
位置名称与经纬度之间转换服务
API
JS
Android
iOS
地理围栏
虚拟空间围栏服务
API
Android
iOS
天气查询
查询目标区域当前/未来天气
智能硬件定位
通过基站、Wifi获取位置信息
路线导航
鸿蒙星河版导航SDK
NEW
鸿蒙星河版导航SDK
导航
HOT
轻松地在APP中加入导航能力
Android
iOS
路线规划
HOT
提供步行、驾车等规划能力
API
JS
Android
iOS
猎鹰服务
提供专业轨迹管理服务
API
Android
iOS
货车路径规划
专业的货车路径规划服务
API
Android
iOS
智能调度引擎
智能外勤调度,提升效益
物流服务
提供智慧物流API服务接口
公交信息查询
查询公交信息
交通路况查询
查询交通态势情况
高级路径规划
高级路径规划等能力
地图产品
鸿蒙星河版地图SDK
HOT
鸿蒙星河版-轻量地图SDK
动态地图
HOT
动态地图展示、配置
API
JS
Android
iOS
HarmonyOS
3D地图
HOT
3D动态地图展示、配置
地铁图
简单易用的移动端地铁线路图开发接口
JS
Android
iOS
静态地图
灵活地将高德地图迁入应用网页
3D地形图
卫星地形图还原真实地形地貌
高级地图工具
世界地图
NEW
自定义地图
地图数据可视化 (LOCA)
地图数据中心 (GeoHUB)
坐标拾取器
高德地图URI Web
高德地图URI APP
三维模型转换
微信小程序插件
地图Flutter插件
地图名片
高德地图小程序
地图小程序
客户管理
员工管理
送货提效
地图小程序API
解决方案
解决方案
提供各行业LBS解决方案
世界地图
NEW
面向开发者提供全球范围内LBS服务
智能两轮车
NEW
合规精确的两轮车场景导航
手机银行
NEW
提供手机银行APP地图应用
智能派单
一站式精准智能派单解决方案
上门服务调度
提供上门业务调度解决方案
网格化营销
NEW
提供银行网格化营销场景应用
智慧交通
优化交通资源配置,赋能智慧交通系统
出行
提供网约车等出行场景解决方案
O2O
到店、到家等多种O2O业务解决方案
零售铺货
零售快消行业,渠道铺货解决方案
三农场景可视化
NEW
提供乡村振兴三农场景应用
社交
社交应用位置服务解决方案
运动
运动类应用解决方案
智能硬件
智能硬件LBS解决方案
智慧物流
针对物流行业提供解决方案
电商
电商物流行业解决方案
地址服务
综合地址服务,满足客户全景化需求
企业智图
一张图轻松管理企业数据
文档与支持
文档与支持
高德开放平台开发文档与服务支持
查看全部文档
API
Web基础服务API
Web高级服务API
物流服务API
猎鹰服务 API
JS API
JS API
数据可视化JS API
地图组件
URI 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
鸿蒙星河版平台
鸿蒙星河版地图SDK
HOT
鸿蒙星河版定位SDK
HOT
鸿蒙星河版导航SDK
NEW
服务与支持
常见问题
创建工单
示例中心
合规中心
定价
定价
开放平台产品定价
产品定价
产品定价
产品定价
商用服务
GeoHUB自定义地图
GeoHUB数据中心
产品升级
高级能力
企业智图SaaS
云图市场
为什么选择高德
历史记录
热门推荐
Android定位
Android定位问题相关
浏览器定位
JS API提供Geolocation定位插件
逆地理编码
经纬度转换为详细结构化的地址
自定义地图
7大类44种地图元素可定制
认证开发商
商业授权相关问题
JS API UI 组件示例
加载
使用 AMapLoader 加载 AMapUI
简单标注
自定义图标
自定义文字
内置样式
定位点
纯色背景
更新图标和文字
图标主题
字体图标标注
字体样式
图标样式
设置awesomeIcon
自定义FontAwesome资源
矢量标注
各类形状
自定义路径
自定义形状
使用Iconfont
水滴
调节Shape属性
简单信息窗体
覆盖默认的dom结构
监听事件
简单信息窗体
使用模板
标注列表
完整示例
事件监听
选中样式的控制
Marker带Circle
自定义选中后的行为
搜索+分页
selectedClassNames
简单数据渲染
SimpleMarker&SimpleWindow
使用SvgMarker
基础控件
自定义主题
基础控件
图层切换控件
实时交通控件
缩放控件
海量点展示
调整绘制样式
调整TopN选取
动态改样式
自定义绘制内容
自定义绘制引擎
样式分组引擎
图片内容
海量点展示
图标分组
点选取漏斗
闪烁效果
轨迹展示
简单路径
调整巡航器样式
调整线、点样式
省域边界
动态修改巡航器
动态延展路径
轨迹展示&巡航
轨迹巡航控制
仅展示驶过线
简单数据附加
行政区划浏览
事件处理
行政区分组
行政区浏览
区域定位
多区域加载
反向镂空区域
单区域加载
行政区划聚合
区划聚合
点击后显示聚合标注
定制聚合信息标注
自定义绘制引擎
事件支持
排除部分区划
区划面样式
各地美食
点击后展示海量点
区划聚合+海量点展示
设置顶级区划
拖拽选址
拖拽选址
自定义图标
POI选点
输入框选择POI点
POI搜索
游客仅显示地点经纬度小数点后两位。
>>前往登录
示例代码报错,请检查
message:
stack:
‹
›
调整TopN选取
使用PointSimplifier配置renderOptions.getNumForTopSelect,显示不同topN配置下的海量点效果。
源代码编辑器
<!-- 重点参数:renderOptions --> <!doctype html> <html lang="zh-CN"> <head> <!-- 原始地址://webapi.amap.com/ui/1.1/ui/misc/PointSimplifier/examples/adjust-topselect.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>调整TopN选取</title> <style> html, body { width: 100%; height: 100%; margin: 0px; } #outer-box { height: 100%; padding-right: 280px; } #container { height: 100%; width: 100%; } #panel { position: absolute; top: 0; right: 0; width: 280px; z-index: 999; height: calc(100% - 5px); overflow: hidden; overflow-y: auto; } #my-gui-container { height: 1200px; } #my-gui-container h3 { margin: 10px 0 3px 0; } #my-gui-container .close-button { display: none; } #my-gui-container .dg { float: none; margin: 0 0 5px 5px; } #loadingTip { position: absolute; z-index: 9999; top: 0; left: 0; padding: 3px 10px; background: red; color: #fff; font-size: 13px; } .hide { display: none; } </style> </head> <body> <div id="outer-box"> <div id="container"> </div> <div id="panel"> <div id="my-gui-container"></div> </div> </div> <script type="text/javascript" src='//webapi.amap.com/maps?v=2.0&key=您申请的key值'></script> <script src="../../../../plug/ext/dat.gui.min.js?v=1.1.1"></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/$', 'lib/utils'], function(PointSimplifier, $, utils) { 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) { return aIndex > bIndex ? 1 : -1; }, getHoverTitle: function(dataItem, idx) { return '序号: ' + idx; }, autoSetFitView: false, renderOptions: { getAreaSizeForTopSelect: function(zoom, pointSize) { return Math.min(100, pointSize.width * pointSize.height * 1.5); }, //topN选取的数量 getNumForTopSelect: function(zoom, bounds, descendantsNum, pointSize) { var idealNum = (bounds.width * bounds.height) / (pointSize.width * pointSize.height); return Math.max(3, Math.ceil(idealNum * 1.5)); } } }); window.pointSimplifierIns = pointSimplifierIns; $('<div id="loadingTip">加载数据,请稍候...</div>').appendTo(document.body); $.get('https://a.amap.com/amap-ui/static/data/10w.txt', function(csv) { var data = csv.split('\n'); pointSimplifierIns.setData(data); $('#loadingTip').remove(); }); var customContainer = document.getElementById('my-gui-container'); function createRenderEngGui() { function RenderEngOptions() { this.drawQuadTree = true; this.drawShadowPoint = true; } var renderEngParams = new RenderEngOptions(); var renderEngGui = new dat.GUI({ width: 260, autoPlace: false, }); renderEngGui.add(renderEngParams, 'drawQuadTree').onChange(render); renderEngGui.add(renderEngParams, 'drawShadowPoint').onChange(render); addGuiPanel('', '', renderEngGui); return renderEngParams; } function createTopSelectGui() { function TopSelectOptions() { this.topNAreaRadius = 80; this.topSelectNum = 1; } var topSelectParams = new TopSelectOptions(); var topSelectGui = new dat.GUI({ width: 260, autoPlace: false, }); topSelectGui.add(topSelectParams, 'topNAreaRadius', 2, 100).step(2).onChange(render); topSelectGui.add(topSelectParams, 'topSelectNum', 0, 100).step(1).onChange(render); addGuiPanel('', '', topSelectGui); return topSelectParams; } function addGuiPanel(id, title, gui) { var container = document.createElement('div'); container.id = id; if (title) { var tEle = document.createElement('h3'); tEle.innerHTML = title; container.appendChild(tEle); } container.appendChild(gui.domElement); customContainer.appendChild(container); } var renderEngParams = createRenderEngGui(), topSelectParams = createTopSelectGui(); function render() { pointSimplifierIns.renderEngine.setOptions(renderEngParams); pointSimplifierIns.renderEngine.setOptions({ getAreaSizeForTopSelect: function(zoom, pointSize) { return topSelectParams.topNAreaRadius * topSelectParams.topNAreaRadius; }, //topN选取的数量 getNumForTopSelect: function(zoom, bounds, descendantsNum, pointSize) { return topSelectParams.topSelectNum; } }); pointSimplifierIns.renderLater(); } render(); }); </script> </body> </html>
控制台
清空
返回顶部
示例中心
常见问题
智能客服
公众号
二维码