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

在这里插入图片描述


总结

@漏刻有时

相关内容

热门资讯

圣诞联欢会主持词 圣诞联欢会主持词  活动对象的不同,主持词的写作风格也会大不一样。时代不断在进步,主持成为很多活动不...
美好童年—庆“六一”大型活动... 美好童年—庆“六一”大型活动主持词  利用在中国拥有几千年文化的诗词能够有效提高主持词的感染力。随着...
毕业晚会主持词串词 毕业晚会主持词串词  毕业,是人生的一个转折点,愿你们能展开双翼,飞得更高、看得更远。下面是小编给大...
运动会致辞 运动会致辞(精选5篇)  无论在学习、工作或是生活中,大家或多或少都用到过致辞吧,致辞要求风格的雅、...
六一儿童节的主持稿 六一儿童节的主持稿(精选8篇)  随着社会一步步向前发展,我们都不可避免地要接触到主持稿,主持稿是主...
元旦文艺汇演主持稿 元旦文艺汇演主持稿范文(通用5篇)  在当下社会,很多情况下我们需要用到主持稿,主持稿起到承上启下的...
颁奖主持词 颁奖主持词三篇  主持人在一场活动中是十分重要的,一个好的主持人是一直带动着活动过程中的气氛,让大家...
婚宴答谢宴简短主持词 婚宴答谢宴简短主持词  主持词要根据活动对象的不同去设置不同的主持词。在人们积极参与各种活动的今天,...
汽车公司庆典主持词 汽车公司庆典主持词  利用在中国拥有几千年文化的诗词能够有效提高主持词的感染力。现今社会在不断向前发...
古筝音乐会主持词 古筝音乐会主持词6篇  主持词要把握好吸引观众、导入主题、创设情境等环节以吸引观众。在一步步向前发展...
小学元旦联欢会主持词开场白和... 小学元旦联欢会主持词开场白和结束词  根据活动对象的不同,需要设置不同的主持词。随着社会一步步向前发...
知识竞赛主持词 知识竞赛主持词(精选6篇)  主持词的写作需要将主题贯穿于所有节目之中。在人们越来越多的参与各种活动...
小学家长会学生欢迎词 小学家长会学生欢迎词小学家长会学生欢迎词文章标题:小学家长会学生欢迎词家长会欢迎辞亲爱的叔叔阿姨,爷...
消夏晚会主持词 2017消夏晚会主持词  漫漫暑假,天气越来越燥热,不妨在炎热的午后,参加一场纳凉晚会,欣赏社区带来...
周立波脱口秀台词 周立波脱口秀台词集锦四十岁之前喝酒是为了别人的一句~~厉害!醉了!!四十岁以后喝酒是为了自己的一句~...
圣诞节活动主持词节目串词 圣诞节活动主持词节目串词3篇  根据活动对象的不同,需要设置不同的主持词。在人们积极参与各种活动的今...
生日华诞主持词 生日华诞主持词范文各位领导,各位朋友,各位来宾,女士们,先生们:  中午好。  今天是个喜庆的日子,...
学术会议主持词 学术会议主持词  什么是主持词  由主持人于节目进行过程中串联节目的串联词。如今的各种演出活动和集会...
订婚仪式及主持词 订婚仪式及主持词范文(通用3篇)  活动对象的不同,主持词的写作风格也会大不一样。在现在的社会生活中...
古剑奇谭欧阳少恭经典台词参考 古剑奇谭欧阳少恭经典台词参考  大型古装玄幻剧《古剑奇谭》正在湖南卫视热播,剧中,乔振宇饰演温文尔雅...