数据可视化大屏高德地图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
目录
打赏
0
0
0
0
184
分享
相关文章
安全监控系统:技术架构与应用解析
该系统采用模块化设计,集成了行为识别、视频监控、人脸识别、危险区域检测、异常事件检测、日志追溯及消息推送等功能,并可选配OCR识别模块。基于深度学习与开源技术栈(如TensorFlow、OpenCV),系统具备高精度、低延迟特点,支持实时分析儿童行为、监测危险区域、识别异常事件,并将结果推送给教师或家长。同时兼容主流硬件,支持本地化推理与分布式处理,确保可靠性与扩展性,为幼儿园安全管理提供全面解决方案。
152 3
DNS+:互联网的下一个十年,为什么域名系统正在重新定义数字生态? ——解读《“DNS+”发展白皮书(2023)》
DNS+标志着域名系统从基础寻址工具向融合技术、业态与治理的数字生态中枢转变。通过与IPv6、AI和区块链结合,DNS实现了智能调度、加密传输等新功能,支持工业互联网、Web3及万物互联场景。当前,中国IPv6用户达7.6亿,全球DNSSEC支持率三年增长80%,展现了其快速发展态势。然而,DNS+仍面临安全威胁、技术普惠瓶颈及生态协同挑战。未来,需推动零信任DNS模型、加强威胁情报共享,并加速标准制定,以筑牢数字时代网络根基,实现更安全、高效的数字生态建设。
69 2
反向寻车系统怎么做?基本原理与系统组成解析
本文通过反向寻车系统的核心组成部分与技术分析,阐述反向寻车系统的工作原理,适用于适用于商场停车场、医院停车场及火车站停车场等。如需获取智慧停车场反向寻车技术方案前往文章最下方获取,如有项目合作及技术交流欢迎私信作者。
261 2
AI技术如何重塑客服系统?解析合力亿捷AI智能客服系统实践案例
本文探讨了人工智能技术在客服系统中的应用,涵盖技术架构、关键技术和优化策略。通过感知层、认知层、决策层和执行层的协同工作,结合自然语言处理、知识库构建和多模态交互技术,合力亿捷客服系统实现了智能化服务。文章还提出了用户体验优化、服务质量提升和系统性能改进的方法,并展望了未来发展方向,强调其在客户服务领域的核心价值与潜力。
224 6
React音频播放器样式自定义全解析:从入门到避坑指南
在React中使用HTML5原生&lt;audio&gt;标签时,开发者常面临视觉一致性缺失、样式定制局限和交互体验割裂等问题。通过隐藏原生控件并构建自定义UI层,可以实现完全可控的播放器视觉风格,避免状态不同步等典型问题。结合事件监听、进度条拖拽、浏览器兼容性处理及性能优化技巧,可构建高性能、可维护的音频组件,满足跨平台需求。建议优先使用成熟音频库(如react-player),仅在深度定制需求时采用原生方案。
142 12
DeepSeek大模型在客服系统中的应用场景解析
在数字化浪潮下,客户服务领域正经历深刻变革,AI技术成为提升服务效能与体验的关键。DeepSeek大模型凭借自然语言处理、语音交互及多模态技术,显著优化客服流程,提升用户满意度。它通过智能问答、多轮对话引导、多模态语音客服和情绪监测等功能,革新服务模式,实现高效应答与精准分析,推动人机协作,为企业和客户创造更大价值。
419 5
DeepSeek 大模型在合力亿捷工单系统中的5大应用场景解析
工单系统是企业客户服务与内部运营的核心工具,传统系统在分类、派发和处理效率方面面临挑战。DeepSeek大模型通过自然语言处理和智能化算法,实现精准分类、智能分配、自动填充、优先级排序及流程优化,大幅提升工单处理效率和质量,降低运营成本,改善客户体验。
212 2
在线教育网课系统源码开发指南:功能设计与技术实现深度解析
在线教育网课系统是近年来发展迅猛的教育形式的核心载体,具备用户管理、课程管理、教学互动、学习评估等功能。本文从功能和技术两方面解析其源码开发,涵盖前端(HTML5、CSS3、JavaScript等)、后端(Java、Python等)、流媒体及云计算技术,并强调安全性、稳定性和用户体验的重要性。
【23种设计模式·全精解析 | 自定义Spring框架篇】Spring核心源码分析+自定义Spring的IOC功能,依赖注入功能
本文详细介绍了Spring框架的核心功能,并通过手写自定义Spring框架的方式,深入理解了Spring的IOC(控制反转)和DI(依赖注入)功能,并且学会实际运用设计模式到真实开发中。
【23种设计模式·全精解析 | 自定义Spring框架篇】Spring核心源码分析+自定义Spring的IOC功能,依赖注入功能

热门文章

最新文章

推荐镜像

更多
  • DNS
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等

    登录插画

    登录以查看您的控制台资源

    管理云资源
    状态一览
    快捷访问