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

在这里插入图片描述


总结

@漏刻有时

相关内容

热门资讯

追梦初一作文(优选3篇) 追梦初一作文 篇一初中生活对于我们来说是一个全新的开始,是我们追逐梦想的起点。作为初一的学生,我们充...
这也是一种荣誉作文600字【... 篇一:这也是一种荣誉每个人都希望自己能够成为一个有荣誉感的人,因为荣誉代表着尊重和认可。然而,荣誉并...
初中清明节作文600字【经典... 初中清明节作文600字 篇一清明节是中国的传统节日,也是一个扫墓祭祖的日子。在这一天,人们会带上鲜花...
我的视野初中作文【优秀5篇】 我的视野初中作文 篇一开拓视野,拥抱多元文化初中生活对我来说是一个全新的阶段,不仅学习内容更加深入,...
可悲乎,可喜乎?【优质5篇】 可悲乎,可喜乎? 篇一近年来,社会上普遍存在着一种现象:人们对于生活中的不公平感到愤怒和失望,但又常...
争做当代活雷锋初中作文(推荐... 篇一:争做当代活雷锋雷锋是中国近代历史上一位备受敬仰的人物,他无私奉献、乐于助人的精神感动了无数人。...
初一学生作文【优选6篇】 初一学生作文 篇一:我的暑假生活暑假终于来了,我迫不及待地计划着如何度过这个美好的假期。在这个特殊的...
我最喜欢的动物初一英语作文【... 我最喜欢的动物初一英语作文 篇一My Favorite Animal - CatsCats have...
事实的力量初中抒情作文【通用... 事实的力量初中抒情作文 篇一事实的力量每个人都有属于自己的故事,故事中蕴含着真实的事实。这些事实或让...
最新辞旧迎新作文【精选6篇】 最新辞旧迎新作文 篇一辞旧迎新,迎接新的一年,是一个让人充满期待和激动的时刻。回首过去的一年,我们或...
绿水青山就是金山银山作文60... 绿水青山就是金山银山作文600字 篇一绿水青山就是金山银山绿水青山就是金山银山,这句话深深地激励着我...
开一朵花作文700字_初一作... 开一朵花作文700字_初一作文 篇一开一朵花春天是一个美丽的季节,大地上的一切都在复苏,花朵开始盛开...
初中入团申请书(精彩6篇) 初中入团申请书 篇一尊敬的团组织:您好!我是一名热爱学习、积极向上的初中生,我怀着激动的心情向您递交...
初一·新学期作文【实用6篇】 初一·新学期作文 篇一新学期,新气象新学期又开始了,我怀着激动的心情迎接着这个全新的挑战。这个学期,...
初一的开学第一天作文400字... 初一的开学第一天作文400字 篇一初一的开学第一天,我迫不及待地来到了学校。整个校园洋溢着喜庆的气氛...
一件小事500作文初一共41... 一件小事500作文初一 第一篇中国的文字博大精深,一不小心就会闹出”说别人就是说自己“的笑话。我就曾...
写给初一的自己作文500字【... 写给初一的自己作文500字 篇一亲爱的初一的我:你好!你现在已经进入初中生活,迈入了一个新的阶段。回...
我的爸爸作文(精选6篇) 我的爸爸作文 篇一爸爸,你是我心中最伟大的人我的爸爸是一个平凡而又伟大的人。他有着坚韧的意志和无私的...
背影初中作文(优选6篇) 背影初中作文 篇一背影初中作文在生活中,我们都会遇到许多人,其中有些人会给我们留下深刻的印象。而在我...
墙的故事中考作文【经典3篇】 墙的故事中考作文 篇一墙的故事中考作文墙,是我们生活中常见的存在,无论是家庭住宅的分隔墙,还是城市的...