为什么选择高德
成功案例
产品优势
数据优势
服务优势
精选权益
产品介绍
基础产品
地图
定位
导航
搜索
特色产品
地图小程序
3D地形图
排线调度服务
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
物流服务 API
其他
GeoHUB使用指南
微信小程序插件
高德地图手机版
地图Flutter插件
HarmonyOS 地图SDK
帮助与支持
常见问题
合规中心
开发者论坛
加入我们
地图工具
GeoHUB
坐标拾取器
地图名片
地图快速生成器
GeoHUB自定义地图
三维模型转换
服务升级
配额提升
GeoHUB自定义地图
GeoHUB数据中心
商用服务
高级能力
企业智图SaaS
云图市场
控制台
登录
注册
退出
我的消息
云图市场
应用管理
GeoHUB
Loca API 2.0
视角、样式和数据
镜头动画
镜头追踪
多光源
高效数据源
圆点图层
中国城市人口和GDP排行
世界地震分布
全球孔子学院位置可视化
全国粤菜分布情况
棱柱图层
中国某年 GDP 展示
贴地点
深圳高峰期路口
全国交通事件响应
图标图层
智慧交通道路事件情况
标牌点
某片区房价信息
线图层
北京公交线路
连接线图层
中国建交国家
弧度飞线图层
北京人口流出飞线
脉冲线图层
北京人口流入流出情况
北京公交线路
面图层
杭州功能区
北京凯德茂
北京首都机场
极光过渡效果
普通热力图
杭州房屋交易量
全国交通事故增长率
青岛差值热力
网格热力图
武汉车辆密度分布
蜂窝热力图
杭州高峰期路口延误
标注图层
北京充电桩分布
济南历下小区
激光图层
望京区域数据分布
‹
›
智慧交通道路事件情况
源代码编辑器
复制
运行
还原
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>智慧交通道路事件情况</title> <style> html, body, #map { width: 100%; height: 100%; margin: 0; padding: 0; } .demo-title { position: absolute; top: 25px; left: 25px; z-index: 1; } h1 { font-size: 18px; margin: 0; color: rgb(180, 180, 190); } h3 { font-size: 12px; font-weight: normal; margin-top: 5px; color: rgb(150,150,150); } </style> </head> <body> <div class="demo-title"> <h1>图标点-智慧交通道路事件情况</h1> <h3>某一时刻检测道路的交通事件情况,通过数据分布对实时交通进行治理和管控</h3> </div> <div id="map"></div> <script src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值&plugin=AMap.Scale,AMap.ToolBar"></script> <script src="https://webapi.amap.com/loca?v=2.0.0&key=您申请的key值"></script> <script src="https://a.amap.com/Loca/static/loca-v2/demos/mock_data/events.js"></script> <script> var map = new AMap.Map('map', { zoom: 13.54, viewMode: '3D', center: [116.398063, 39.988207], //北京 mapStyle: 'amap://styles/45311ae996a8bea0da10ad5151f72979', }); var loca = new Loca.Container({ map, }); function getTestData() { var list = []; for (let i = 0; i < 200; i++) { let fList = []; for (let j = 0; j < 200; j++) { fList.push([ Number((115.601 + i * 0.002).toFixed(5)), Number((40.32 + j * 0.002).toFixed(5)) ]); } list.push({ "type": "Feature", "properties": { "name": i, }, "geometry": { "type": "MultiPoint", "coordinates": fList } }); } list.push({ "type": "Feature", "properties": { "name": 'HIIII', }, "geometry": { "type": "Point", "coordinates": [115.201, 40.302] } }) var data = { "type": "FeatureCollection", "features": list, }; return data; } function getEventsCollection() { let _events = events[0].events; var list = _events.map(e => { let ll = e.lngLat.split(','); let arr = [parseFloat(ll[0]), parseFloat(ll[1])] return { "type": "Feature", "properties": { rawData: e }, "geometry": { "type": "Point", "coordinates": arr } } }) var data = { "type": "FeatureCollection", "features": list, }; return data; } var data = getEventsCollection(); var geo = new Loca.GeoJSONSource({ data: data, }); var layer = new Loca.IconLayer({ zIndex: 10, opacity: 1, visible: false, }); var trafficIcons = { 1: 'https://a.amap.com/Loca/static/loca-v2/demos/images/traffic-control.png', 2: 'https://a.amap.com/Loca/static/loca-v2/demos/images/jam.png', 3: 'https://a.amap.com/Loca/static/loca-v2/demos/images/construction.png', 4: 'https://a.amap.com/Loca/static/loca-v2/demos/images/close.png', 5: 'https://a.amap.com/Loca/static/loca-v2/demos/images/fog.png', 0: 'https://a.amap.com/Loca/static/loca-v2/demos/images/accident.png', }; layer.setSource(geo); layer.setStyle({ unit: 'px', icon: (index, feature) => { let data = feature.properties.rawData; let url = trafficIcons[data.type % Object.keys(trafficIcons).length]; return url; }, iconSize: [40,40], offset: [0, -40], rotation: 0, }) loca.add(layer); map.on('complete', function () { setTimeout(function () { layer.show(); layer.addAnimate({ key: 'offset', value: [0, 1], easing: 'Linear', transform: 500, random: true, delay: 9000, }); layer.addAnimate({ key: 'iconSize', value: [0, 1], easing: 'Linear', transform: 500, random: true, delay: 9000, }); }, 800); }); loca.animate.start(); // 拾取测试 map.on('click', (e) => { const feat = layer.queryFeature(e.pixel.toArray()); // console.log('feat', feat); if (feat) { layer.setStyle({ unit: 'px', icon: (index, feature) => { let data = feature.properties.rawData; let url = trafficIcons[data.type % Object.keys(trafficIcons).length]; return url; }, iconSize: (i, feature) => { if (feature === feat) { return [60, 60]; } return [40, 40]; }, }); } }); var dat = new Loca.Dat(); dat.addLayer(layer); </script> </body> </html>
控制台
清空
示例
中心
常见
问题
智能
客服