高德地图开发实战案例:使用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数据格式

在这里插入图片描述


总结

@漏刻有时

相关内容

热门资讯

结婚典礼新郎父亲致辞 结婚典礼新郎父亲致辞(精选13篇)  在平平淡淡的学习、工作、生活中,大家对致辞都不陌生吧,致辞具有...
美剧经典台词摘选 美剧经典台词摘选  Men are not prisoners of fate, but priso...
富有诗意的开学典礼的致辞 富有诗意的开学典礼的致辞范文(通用10篇)  在日常的学习、工作、生活中,大家都不可避免地要接触到致...
女方婚礼出阁宴主持词 女方婚礼出阁宴主持词范文(通用9篇)  主持词可以采用和历史文化有关的表述方法去写作以提升活动的文化...
公司春节团拜会主持词 公司春节团拜会主持词  主持词需要富有情感,充满热情,才能有效地吸引到观众。现今社会在不断向前发展,...
灾害急救知识及技能竞赛主持词 灾害急救知识及技能竞赛主持词  主持词要注意活动对象,针对活动对象写相应的主持词。在现在的社会生活中...
赌侠经典的台词 赌侠经典的台词  刘德华,周星驰试图将《赌神》和《赌圣》的名牌发扬光大的作品,这部《赌侠》也是他们早...
小学生开学典礼主持词 小学生开学典礼主持词  主持词需要富有情感,充满热情,才能有效地吸引到观众。在当下的社会中,主持人在...
酒鬼酒著名广告词 酒鬼酒著名广告词发布时间:2017-04-01  1.酒鬼背酒鬼,千斤不嫌赘;酒鬼喝酒鬼,千杯不会醉...
优秀班会主持词 2017年优秀班会主持词  班会是班主任做好班级管理工作的一条有效途径。主持词要怎么说呢?下面是小编...
婚宴主持人词 婚宴主持人词  婚宴开始  尊敬的各位来宾,尊敬的各位亲朋好友,大家晚上好!在这天地之合的喜庆之日,...
电影《爱情公寓》经典台词 电影《爱情公寓》经典台词  1、我们也许是别人故事里的配角,但至少有一个舞台,我们永远都会站在最中央...
摇滚藏獒经典台词 关于摇滚藏獒经典台词  藏獒波弟(Bodi)生长于喜马拉雅山深处一个与世隔绝的世外桃源,本该按家族传...
千与千寻里的经典台词 千与千寻里的经典台词  在日新月异的现代社会中,需要使用台词的情况越来越多,台词起着解释镜头内容和推...
在升学宴上的嘉宾代表致辞 在升学宴上的嘉宾代表致辞在升学宴上的嘉宾代表致辞  尊敬的各位嘉宾,女士们,先生们:    大家上午...
你的名字经典名台词 你的名字经典名台词  1、重要的人,不想忘记的人,绝不能忘记的人,是谁?  2、我们的相遇绝不是偶然...
公司开业庆典主持词 公司开业庆典主持词15篇  主持词可以采用和历史文化有关的表述方法去写作以提升活动的文化内涵。在当今...
说方言郭德纲相声台词 说方言郭德纲相声台词  各位有认识我,有不认识。我是相声界非著名相声演员郭德纲。和小编一起来看看下文...
幼儿园毕业典礼主持稿开场白   幼儿园大班孩子即将挥别母校,那么在毕业典礼上应该如何说好主持词呢,以下是CN人才小编搜集并整理的...
小班元旦主持词 导语:幼儿园举办元旦晚会主持词怎么说?以下是小编整理的小班元旦主持词,欢迎阅读参考。小班元旦主持词a...