高德地图开发实战案例:使用Loca数据源展示海量点标注(海量点、自定义分类图标、聚合、信息提示、3D控件)
创始人
2024-05-23 18:19:20
0

系列文章目录

  1. 高德地图开发实战案例:弧线连接线标注
  2. 高德地图开发智慧社区网格化数据格式产生的无法单击事件的解决方案
  3. 高德地图进阶开发实战案例(1):webAPI坐标转换和jsAPI批量转换
  4. 高德地图进阶开发实战案例(2):电子围栏(多边形的绘制)的展示
  5. 高德地图进阶开发实战案例(4):计算骑行的距离和时间
  6. 高德地图进阶开发实战案例(5):矩形可视范围的东北西南角经纬度的获取
  7. 高德地图进阶开发实战案例(6):添加自定义图片覆盖物图层获取可视范围经纬度的解决方案
  8. 高德地图进阶开发实战案例(7):点是否在多边形内和内外部的数量统计的解决方案
  9. 高德地图进阶开发实战案例(8):加载多个多边形的覆盖物且实现鼠标高亮和单击事件解决方案
  10. 高德地图进阶开发实战案例(9):涟漪动画标注的实现方案
  11. 高德地图进阶开发实战案例(10):地图选取起终点OD位置经纬度的驾车规划路线
  12. 高德地图进阶开发实战案例(12):热力图模拟传播范围以及小区兴趣点POI经纬度的获取方法
  13. 数据可视化大屏高德地图javascript webAPI开发的智慧治安物联网管理系统实战解析(web GIS、3D视图、个性化地图、标注、涟漪动画、自定义弹窗、3D控件)

文章目录

  • 系列文章目录
  • 前言
  • 一、引入外部JS包
  • 二、核心代码
    • 1.地图实例
    • 2.3D控制罗盘
    • 3.创建Loca 实例
    • 4.AMap.LabelMarker的配置项
      • 4.1自定义分类图标
    • 5.labelsLayer监听事件
      • 5.1信息提示
    • 6.geojson数据格式
  • 总结


前言

loca 数据可视化 API 2.0是一个基于高德地图JS API 2.0的高性能地图数据可视化库,采用了和1.3版本中不同的架构模式和渲染管线,极大的提升了性能和渲染效果。数据源进行了标准化,仅支持标准的GeoJSON格式数据。


在这里插入图片描述

一、引入外部JS包

  • 同时引入maps和loca两个js文件,同时注意官网版本;不同版本的引入,会导致高德地图无法渲染,甚至不显示的情况。
  • Loca 数据可视化 API 2.0 依赖 JSAPI 2.0,因此需要先引入 JSAPI v2.0。


注意:新版Loca API 2.0和Loca 1.3.x版本不兼容,它们是针对不同的JS API版本进行的封装。 因此如果您需要使用JS API 1.4.x,那么只能使用Loca API 1.3.x;如果您需要使用JS API 2.0,那么只能使用Loca API 2.0。

二、核心代码

1.地图实例

  • 加载个性化地图皮肤
  • 加载3D地图模式viewMode
    var map = new AMap.Map('map', {zoom: 15.8,//center: [123.0155, 41.11805],center: [116.33081, 39.995731],showIndoorMap: false,pitch: 45, // 地图俯仰角度,有效范围 0 度- 83 度viewMode: '3D', // 地图模式mapStyle: 'amap://styles/a88f4b4a2db1276936aefa8d21ee95a1'});

由于是海量点的引入,不建议在实际生产环境使用3D视图,容易卡顿,或造成浏览器的崩溃。

2.3D控制罗盘

添加 3D 罗盘控制,显示倾斜和旋转按钮。

    //3D控制罗盘AMap.plugin(['AMap.ControlBar',], function () {// 添加 3D 罗盘控制map.addControl(new AMap.ControlBar({position: {right: '20px',top: '20px'},showControlButton: true,  // 是否显示倾斜、旋转按钮。默认为 true}));});

3.创建Loca 实例

    var loca = new Loca.Container({map,});var labelsLayer = (window.labelsLayer = new Loca.LabelsLayer({zooms: [10, 20],}));var geo = new Loca.GeoJSONSource({url: 'data2.json',});labelsLayer.setSource(geo);

4.AMap.LabelMarker的配置项

labelsLayer.setStyle({icon: {type: 'image',image: (index, feat) => {//console.log(feat.properties.level)return './images/icon' + feat.properties.types + '.png'},size: [48, 75],anchor: 'center',},text: {// 每项配置都可使用回调函数来动态配置content: (index, feat) => {return feat.properties.name;},style: {fontSize: 12,fontWeight: 'normal',fillColor: '#5CDE8E',strokeColor: '#000',strokeWidth: 2,},direction: 'bottom',},extData: (index, feat) => {return feat.properties;},});loca.add(labelsLayer);

4.1自定义分类图标

在labelsLayer的icon配置项中,对image新增回调函数,读取geojson中对应的项目类型,进行自动加载图标。

 image: (index, feat) => {//console.log(feat.properties.level)return './images/icon' + feat.properties.types + '.png'},

5.labelsLayer监听事件

 labelsLayer.on('complete', () => {var normalMarker = new AMap.Marker({offset: [70, -15],});var labelMarkers = labelsLayer.getLabelsLayer().getAllOverlays();for (let marker of labelMarkers) {marker.on('mouseover', (e) => {var position = e.data.data && e.data.data.position;if (position) {normalMarker.setContent('
地址:' + marker.getExtData().name + '
',);normalMarker.setPosition(position);map.add(normalMarker);}});marker.on('mouseout', () => {map.remove(normalMarker);});}});

5.1信息提示

在鼠标移动到对应的数据层时,会出现信息提示。

    normalMarker.setContent('
地址:' + marker.getExtData().name + '
', );

6.geojson数据格式

在这里插入图片描述


总结

@漏刻有时

相关内容

热门资讯

小学五年级作文博物馆21篇(... 小学五年级作文博物馆21篇 篇一:我的首次博物馆之旅今天,我们班级去了博物馆参观,这是我第一次去博物...
狼与狗的作文五年级【优秀6篇... 狼与狗的作文五年级篇一狼与狗是两种相似又不同的动物。狼是一种野生动物,而狗是人类驯化的宠物。它们在外...
孔雀五年级作文【精选6篇】 孔雀五年级作文 篇一我的宠物孔雀我有一只非常特别的宠物——孔雀。它拥有绚丽多彩的羽毛和优雅的姿态,每...
小学五年级母爱的作文400字... 小学五年级母爱的作文400字 篇一母爱的伟大在我们的成长过程中,母爱是我们最亲近的陪伴者。她们默默地...
小学五年级作文我多么快乐记叙... 小学五年级作文我多么快乐记叙文 篇一快乐的周末游玩周末终于来临了,我迫不及待地和爸爸妈妈一起计划着如...
午夜饭作文五年级13篇【精选... 午夜饭作文五年级13篇 篇一:午夜饭的美味与温暖午夜饭,是我小时候最喜欢的一餐。每当夜幕降临,家里的...
20年后的家乡五年级作文【精... 20年后的家乡五年级作文 篇一我热爱我的家乡,它是一个美丽的地方,有着清新的空气和绿色的大自然。在2...
牛奶五年级作文(精简6篇) 牛奶五年级作文 篇一牛奶是我们生活中常见的饮品,也是我们身体健康的重要来源之一。牛奶富含丰富的营养物...
小鸟的故事五年级作文(精选3... 小鸟的故事五年级作文 篇一小鸟的故事从古至今,小鸟一直是人们喜爱的动物之一。它们的形象可爱,羽毛绚丽...
20年后的家乡五年级作文50... 20年后的家乡五年级作文500字 篇一20年后的家乡五年级作文我来自一个美丽的小城市,这个城市有着悠...
小学五年级母爱的作文600字... 小学五年级母爱的作文600字 篇一母爱是世界上最伟大的力量,它无私无尽,给予我们无尽的温暖和关怀。在...
读书伴我成长五年级作文【通用... 读书伴我成长五年级作文 篇一随着时间的流逝,我已经是一个五年级的学生了。回想起这五年来,我发现读书对...
不给糖就捣蛋五年级作文(精简... 不给糖就捣蛋五年级作文 篇一今年的万圣节,我和几个好朋友一起决定去“不给糖就捣蛋”!我们精心准备了各...
五年级作文我喜欢的食物【通用... 五年级作文我喜欢的食物 篇一我喜欢的食物食物是人类生活中不可或缺的一部分,每个人都有自己喜欢的食物。...
小学五年级母爱的作文400字... 小学五年级母爱的作文400字 篇一母爱的伟大母爱是世界上最伟大的力量,她是无私的、无条件的。无论我们...
五年级优秀作文(优秀6篇) 五年级优秀作文 篇一我的暑假生活暑假来临了,我迫不及待地开始计划我的暑假生活。首先,我要利用这段时间...
快开学了的五年级作文(优秀5... 快开学了的五年级作文 篇一:新学期的期待新学期即将开始,我迫不及待地期待着迎接新的挑战和机会。虽然暑...
二十年后的家乡五年级作文(最... 二十年后的家乡五年级作文 篇一二十年后的家乡我想象着二十年后的家乡,一切都变得熟悉又陌生。家乡的面貌...
小学五年级母爱的作文600字... 小学五年级母爱的作文600字 篇一母爱是世界上最伟大的力量。她是一种无私奉献的爱,给了我生命,给了我...
我的一本书小学五年级作文(精... 我的一本书小学五年级作文 篇一我的一本书小学五年级作文我最喜欢的一本书是《小王子》。这本书是法国作家...