数据可视化大屏高德地图javascript webAPI开发的智慧治安物联网管理系统实战解析(web GIS、3D视图、个性化地图、标注、涟漪动画、自定义弹窗、3D控件)

简介: 数据可视化大屏高德地图javascript webAPI开发的智慧治安物联网管理系统实战解析(web GIS、3D视图、个性化地图、标注、涟漪动画、自定义弹窗、3D控件)

高德地图开发系列文章目录

地图开发实战案例:高德地图弧线连接线标注

高德地图开发智慧社区网格化数据格式产生的无法单击事件的解决方案

高德地图进阶开发实战案例(4):计算骑行的距离和时间

高德地图进阶开发实战案例(9):涟漪动画标注的实现方案

高德地图进阶开发实战案例(2):电子围栏(多边形的绘制)的展示

高德地图进阶开发实战案例(5):矩形可视范围的东北西南角经纬度的获取

高德地图进阶开发实战案例(6):添加自定义图片覆盖物图层获取可视范围经纬度的解决方案

高德地图进阶开发实战案例(10):地图选取起终点OD位置经纬度的驾车规划路线

高德地图web服务API接口开发:获取IP定位显示当前位置的天气预报解决方案

高德地图进阶开发实战案例(7):点是否在多边形内和内外部的数量统计的解决方案

高德地图进阶开发实战案例(12):热力图模拟传播范围以及小区兴趣点POI经纬度的获取方法



b78f6f8c741b4e72bedf276f8dfed3e7.gif


文章目录

高德地图开发系列文章目录

前言

一、项目说明

二、核心代码开发

1.引入库

2.构建DOM容器

3.高德地图开发

(1)初始化地图

(2)个性化地图皮肤

(3)3D控件

(4)信息弹窗

(5)涟漪动画

总结


前言

在数据可视化大屏的开发中,牵涉到地图类开发(即WEB GIS)的,主要使用百度地图、高德地图和腾讯地图。对于国内地图类开发平台而言,百度和高德是做WEB GIS的不二选择,腾讯地图基本使用于小程序类的开发。


一、项目说明

本系统是基于物联网端的智慧治安管理系统,主要是针对执勤人员的分布位置感知状态、执勤设备告警的数据展示分析:


设备自带网络传输功能,可实时将当前位置的经纬度传送是数据库;但采集的经纬度信息为wgs84标准,在大屏读取时,需要转换为高德的火星系坐标;

标注需要分类:告警状态和正常执行状态,采用涟漪动画效果实现;

单击标注需要实现自定义富文本弹窗;

大屏界面UI设计图如下:


f00389e3fa46406f818a27718f9a4e98.jpg


二、核心代码开发

1.引入库

代码如下(示例):

  <!--高德地图核心JS库-->
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=eff803c70ebbfb***"></script>

高德地图地图开发引入时需要注意:

  • 不同版本的v=1.4.15的差异,尤其是在复制官方案例的时候,一定要注意版本的切换,不然就会遇见同样代码无法运行的情况;
  • 除了引入webapi库外,需要根据不同的需求,引入高德的css层叠样式表;

2.构建DOM容器

代码如下(示例):

   <div id="map"></div>

地图采用自适应浏览器的模式,具体见层叠样式表:

/*地图定位*/
.alert {
    width: 288px;
    height: 190px;
    padding-top: 30px;
    background: url("../images/alert.png") no-repeat top center;
}
#map {
    width: 98.5%;
    height: 100%;
    text-align: center;
}
.mapBg {
    background: url(../images/map_border.png) no-repeat left center;
    background-size: contain;
}

3.高德地图开发

(1)初始化地图

    var map = new AMap.Map('map', {
        resizeEnable: true,
        zoom: 16,
        center: [116.397428, 39.90923],
        viewMode: '3D',//3D视野
        pinch: 45,
        showLabel: true,
        //features: ['bg', 'road', 'building'],
        showIndoorMap: true, //关闭室内地图
    });

(2)个性化地图皮肤

根据自己的web key,自定义好地图皮肤,将对应的styles引入即可。

/*个性化地图皮肤*/
    map.setMapStyle('amap://styles/0dec7c328b627a31575c8ec13119ea72');

(3)3D控件

  /*3D控件*/
    AMap.plugin(['AMap.ControlBar',], function () {
        map.addControl(new AMap.ControlBar());
    });

(4)信息弹窗

 var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
    for (var i = 0; i < lnglats.length; i++) {
        var pos = lnglats[i].point;
        var id = lnglats[i].id;
        var vvvccc = pos[0] + ',' + pos[1];
        var vvv = vvvccc.split(",");
        var vcvcx0 = parseFloat(vvv[0]);
        var vcvcx1 = parseFloat(vvv[1]);
        vvv[0] = parseFloat(vcvcx0);
        vvv[1] = parseFloat(vcvcx1);
        var marker = new AMap.Marker({
            position: vvv,
            map: map
        });
        marker.content = "<p class='cardsBg'></p>";
        marker.on('click', markerClick);
        //marker.emit('click', {target: marker});
        var text = new AMap.Text({
            text: ' ',
            textAlign: 'center',
            verticalAlign: 'middle', //middle 、bottom
            draggable: true,
            cursor: 'pointer',
            angle: 10,
            style: {
                'width': '15px',
                'height': '15px',
                'border-radius': '50%',
                'border-width': 0,
                'text-align': 'center',
                'font-size': '24px',
                'color': 'blue',
                'background-color': lnglats[i].color,
                'animation': lnglats[i].animations + ' 1s infinite',
            },
            position: vvv,//lnglats[i].point,
        })
        text.setMap(this.map);
    }
    //弹出窗口;
    function markerClick(e) {
        infoWindow.setContent(e.target.content);
        infoWindow.open(map, e.target.getPosition());
    }
    map.setFitView();

(5)涟漪动画

在高德地图中,将标注选用new AMap.Text格式,采用赋值样式,加载animation动画实现。

  style: {
                'width': '15px',
                'height': '15px',
                'border-radius': '50%',
                'border-width': 0,
                'text-align': 'center',
                'font-size': '24px',
                'color': 'blue',
                'background-color': lnglats[i].color,
                'animation': lnglats[i].animations + ' 1s infinite',
            }


总结



最终呈现动图。

在开发过程中,涟漪动画的实现,自定义富文本弹窗,是重点和难点,除了对高德地图样例的理解和调试外,更需要结合实际的UI界面进行实现。@漏刻有时

相关实践学习
钉钉群中如何接收IoT温控器数据告警通知
本实验主要介绍如何将温控器设备以MQTT协议接入IoT物联网平台,通过云产品流转到函数计算FC,调用钉钉群机器人API,实时推送温湿度消息到钉钉群。
阿里云AIoT物联网开发实战
本课程将由物联网专家带你熟悉阿里云AIoT物联网领域全套云产品,7天轻松搭建基于Arduino的端到端物联网场景应用。 开始学习前,请先开通下方两个云产品,让学习更流畅: IoT物联网平台:https://iot.console.aliyun.com/ LinkWAN物联网络管理平台:https://linkwan.console.aliyun.com/service-open
相关文章
|
6天前
|
监控 数据挖掘 BI
探索项目管理系统:解析五大功能,洞悉项目成功的关键
项目新手常忽视管理系统的价值,而高手已借助系统实现规划清晰。优秀的项目管理系统必备五大功能:项目WBS分解、图表报表、工时管理、团队协作和任务自动化。WBS能将复杂项目拆分成可管理任务,明确责任,评估时间和资源需求,便于跟踪进度。Zoho Projects作为示例,支持创建任务层级,利用甘特图和资源利用图监控进度和资源分配,工时管理则帮助控制项目时间和成本。同时,系统促进团队协作,如通过即时通讯和知识库增强团队凝聚力,而任务自动化则减少错误,提升效率。
23 1
|
6天前
|
XML 分布式计算 监控
Oozie工作流管理系统设计与实践:面试经验与必备知识点解析
【4月更文挑战第9天】本文详述了Oozie工作流管理系统的核心概念,包括安装配置、Workflow XML、Action、Coordinator和Bundle XML定义。此外,讨论了工作流设计实践,如监控调试、自动化运维,并对比了Oozie与其他工作流工具的差异。文中还分享了面试经验及解决实际项目挑战的方法,同时展望了Oozie的未来发展趋势。通过学习,读者能提升Oozie技术能力,为面试做好充分准备。
33 0
|
6天前
|
XML Java Android开发
Android实现自定义进度条(源码+解析)
Android实现自定义进度条(源码+解析)
59 1
|
6天前
|
监控 网络协议 安全
阿里云DNS常见问题之阿里云DNS的自定义线路用途不知道如何解决
阿里云DNS(Domain Name System)服务是一个高可用和可扩展的云端DNS服务,用于将域名转换为IP地址,从而让用户能够通过域名访问云端资源。以下是一些关于阿里云DNS服务的常见问题合集:
|
6天前
|
域名解析 网络协议 Serverless
阿里云DNS常见问题之阿里云DNS不再支持自定义NS名称功能如何解决
阿里云DNS(Domain Name System)服务是一个高可用和可扩展的云端DNS服务,用于将域名转换为IP地址,从而让用户能够通过域名访问云端资源。以下是一些关于阿里云DNS服务的常见问题合集:
|
6天前
|
SQL Java 数据库连接
|
5天前
|
JSON 前端开发 JavaScript
前端使用lottie-web,使用AE导出的JSON动画贴心教程
前端使用lottie-web,使用AE导出的JSON动画贴心教程
|
4天前
|
前端开发 算法
【css炫酷动画】让面试官眼前一亮的故障风格文字动画,3年Web前端开发工程师面试经验分享
【css炫酷动画】让面试官眼前一亮的故障风格文字动画,3年Web前端开发工程师面试经验分享
|
6天前
|
XML JavaScript 前端开发
【JavaScript】实战训练小项目-WebAPI
【JavaScript】实战训练小项目-WebAPI
11 1
|
6天前
|
Web App开发 关系型数据库 MySQL
基于web的羽毛球馆管理系统的设计与实现
基于web的羽毛球馆管理系统的设计与实现
15 2

推荐镜像

更多