webGIS 之 智慧校园案例
1.引入资源创建地图
//index.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>智慧校园</title><!-- 引⼊资源 --><!-- css样式 --><link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" /><link rel="stylesheet" href="./css/index.css"><!-- 引⼊js资源 --><script type="text/javascript">window._AMapSecurityConfig = {securityJsCode: 'code',}</script><script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=key"></script>
</head>
<body><!-- 创建地图容器 --><div id="container"></div><script>//创建地图对象var map = new AMap.Map('container', {center: [114.402672, 30.518987],zoom: 16,viewMode: '3D',pitch: 45,})</script>
</body>
</html>
//css/index.css
html,
body,
#container {width: 100%;height: 100%;
}
2.使用控件
// 使⽤控件AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.ControlBar'], function () {map.addControl(new AMap.ToolBar())map.addControl(new AMap.Scale())map.addControl(new AMap.ControlBar())})
3.标记功能
右上⻆就有了交互控件，且可以⽤⿏标左键单击添加标记。
//使⽤⾼德的css样式来创建⼀个div控件<div class="info">点击地图标注热⻔地点</div>
// 添加监听地图点击事件map.on('click',function(e){// 创建标记var marker = new AMap.Marker({position:e.lnglat,})// 添加标记图层map.add(marker)})
4.使⽤GeoJSON数据持久化
使⽤GeoJSON在本地存储中记录数据
首页我们需要创建一个store.js文件用来写读取和存入的函数
// 从local storage中读取数据
function getData() {//判断本地local storage中不存在数据if (!localStorage.getItem('geojson')) {localStorage.setItem('geojson', '[]')}return JSON.parse(localStorage.getItem('geojson'))
}
// 从local storage中写数据
function saveData(data) {localStorage.setItem('geojson', JSON.stringify(data))
}
在index .html引入
<script src="./js/store.js"></script>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>智慧校园</title><!-- 引⼊资源 --><!-- css样式 --><link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" /><link rel="stylesheet" href="./css/index.css"><!-- 引⼊js资源 --><script type="text/javascript">window._AMapSecurityConfig = {securityJsCode: 'code',}</script><script src="./js/store.js"></script><script type="text/javascript"src="https://webapi.amap.com/maps?v=2.0&key=key"></script>
</head><body><!-- 创建地图容器 --><div id="container"></div><div class="info">点击地图标注热⻔地点</div><script>//创建地图对象var map = new AMap.Map('container', {center: [114.402672, 30.518987],zoom: 16,viewMode: '3D',pitch: 45,})// 使⽤控件AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.ControlBar','AMap.GeoJSON'], function () {map.addControl(new AMap.ToolBar())map.addControl(new AMap.Scale())map.addControl(new AMap.ControlBar())})//定义全局变量var geojson = new AMap.GeoJSON({geoJSON: null,})// 导⼊数据if (JSON.stringify(getData()) != '[]') {//有数据的时候才导⼊geojson.importData(getData())}map.add(geojson)// 监听地图点击事件map.on('click', function (e) {// 创建标记var marker = new AMap.Marker({position: e.lnglat,})// 通过geojson对象管理覆盖物geojson.addOverlay(marker)//console.log(geojson)saveData(geojson.toGeoJSON())})</script>
</body>
</html>
5.实现打卡
实现思路：使用marker覆盖物的点击事件，导入数据的地方恢复旧数据的点击事件
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>智慧校园</title><!-- 引⼊资源 --><!-- css样式 --><link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" /><link rel="stylesheet" href="./css/index.css"><!-- 引⼊js资源 --><script type="text/javascript">window._AMapSecurityConfig = {securityJsCode: 'code',}</script><script src="./js/store.js"></script><script type="text/javascript"src="https://webapi.amap.com/maps?v=2.0&key=key"></script>
</head><body><!-- 创建地图容器 --><div id="container"></div><div class="info">点击地图标注热⻔地点,点击地点可以打卡</div><script>//创建地图对象var map = new AMap.Map('container', {center: [114.402672, 30.518987],zoom: 16,viewMode: '3D',pitch: 45,})// 使⽤控件AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.ControlBar', 'AMap.GeoJSON'], function () {map.addControl(new AMap.ToolBar())map.addControl(new AMap.Scale())map.addControl(new AMap.ControlBar())})// 创建一个 Iconvar startIcon = new AMap.Icon({// 图标的取图地址image: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',});//定义全局变量var geojson = new AMap.GeoJSON({geoJSON: null,})// 导⼊数据if (JSON.stringify(getData()) != '[]') {//有数据的时候才导⼊geojson.importData(getData())geojson.eachOverlay(function (item) {item.on('click', function (e) {var ext = item.getExtData()var click = ++ext._geoJsonProperties.click})})saveData(geojson.toGeoJSON())}map.add(geojson)// 监听地图点击事件map.on('click', function (e) {// 创建标记var marker = new AMap.Marker({position: e.lnglat,icon: startIcon,//固定写法extData: {_geoJsonProperties: {gid: geojson.getOverlays().length + 1,click: 0,},}})marker.on('click', function (e) {//固定写法var ext = marker.getExtData()var click = ++ext._geoJsonProperties.clicksaveData(geojson.toGeoJSON())// 使⽤消息提示框var infowindow = new AMap.InfoWindow({anchor: 'top-center',//模板字符串content: `<div>打卡了${click}次</div>`,})//打开信息框在标记的位置infowindow.open(map, marker.getPosition())})// 通过geojson对象管理覆盖物geojson.addOverlay(marker)//console.log(geojson)saveData(geojson.toGeoJSON())// 添加标记图层// map.add(marker)})</script>
</body></html>
6.推荐浏览路线
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>智慧校园</title><!-- 引⼊资源 --><!-- css样式 --><link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" /><link rel="stylesheet" href="./css/index.css"><!-- 引⼊js资源 --><script type="text/javascript">window._AMapSecurityConfig = {securityJsCode: 'code',}</script><script src="./js/store.js"></script><script type="text/javascript"src="https://webapi.amap.com/maps?v=2.0&key=key"></script>
</head><body><!-- 创建地图容器 --><div id="container"></div><div class="info">点击地图标注热⻔地点,点击地点可以打卡</div><div class="input-card" style="width:10rem;"><h4>推荐游览路线</h4><div class="input-item"><button class="btn" onclick="startAnimation()">开始动画</button></div></div><script>//创建地图对象var map = new AMap.Map('container', {center: [114.402672, 30.518987],zoom: 16,viewMode: '3D',pitch: 45,})// 使⽤控件AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.ControlBar', 'AMap.GeoJSON','AMap.MoveAnimation'], function () {map.addControl(new AMap.ToolBar())map.addControl(new AMap.Scale())map.addControl(new AMap.ControlBar())// map.addControl(new AMap.MoveAnimation())})//定义全局变量var geojson = new AMap.GeoJSON({geoJSON: null,})// 导⼊数据if (JSON.stringify(getData()) != '[]') {//有数据的时候才导⼊geojson.importData(getData())geojson.eachOverlay(function (item) {item.on('click', function (e) {var ext = item.getExtData()var click = ++ext._geoJsonProperties.click})})saveData(geojson.toGeoJSON())}map.add(geojson)// 监听地图点击事件map.on('click', function (e) {// 创建标记var marker = new AMap.Marker({position: e.lnglat,extData: {_geoJsonProperties: {gid: geojson.getOverlays().length + 1,click: 0,},}})marker.on('click', function (e) {var ext = marker.getExtData()var click = ++ext._geoJsonProperties.clicksaveData(geojson.toGeoJSON())// 使⽤消息提示框var infowindow = new AMap.InfoWindow({anchor: 'top-center',//模板字符串content: `<div>打卡了${click}次</div>`,})//打开信息框在标记的位置infowindow.open(map, marker.getPosition())})// 通过geojson对象管理覆盖物geojson.addOverlay(marker)//console.log(geojson)saveData(geojson.toGeoJSON())// 添加标记图层// map.add(marker)})function startAnimation() {AMap.plugin('AMap.Driving', function () {var driving = new AMap.Driving({map: map,policy: AMap.DrivingPolicy.LEAST_TIME,//驾⻋策略})//设置起点和终点var start = new AMap.LngLat(114.400984, 30.518653)var end = new AMap.LngLat(114.404755, 30.523851)// 创建途经点var opts = {waypoints: [],}geojson.eachOverlay(function (item) {//拿到每⼀个点opts.waypoints.push(item.getPosition())})driving.search(start, end, opts, function (status, result) {//result结果就会返回当前轨迹对象，其中包含了导航信息var lineArr = []result.routes[0].steps.forEach(function (item) {lineArr.push(...item.path)});if (status == 'complete') {var marker = new AMap.Marker({map: map,position: start,icon: 'https://webapi.amap.com/images/car.png',offset: new AMap.Pixel(-26 ,- 13),autoRotation: true,angle: -180,})var passedPolyline = new AMap.Polyline({map: map,strokeColor: '#AF5',//描边的绿⾊strokeWeight: 6,//线宽})marker.on('moving', function (e) {passedPolyline.setPath(e.passedPath)})map.setFitView()marker.moveAlong(lineArr, {duration: 500,autoRotation: true,})} else {}})})}</script>
</body>
</html>
相关文章：
webGIS 之 智慧校园案例
1.引入资源创建地图 //index.html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content&qu…...
CVAE——生成0-9数字图像（Pytorch+mnist）
1、简介 CVAE（Conditional Variational Autoencoder，条件变分自编码器）是一种变分自编码器（VAE）的变体，用于生成有条件的数据。在传统的变分自编码器中，生成的数据是完全由潜在变量决定的&…...
【Linux】TCP网络套接字编程+守护进程
文章目录 日志类（完成TCP/UDP套接字常见连接过程中的日志打印）单进程版本的服务器客户端通信多进程版本和多线程版本守护进程化的多线程服务器 日志类（完成TCP/UDP套接字常见连接过程中的日志打印） 为了让我们的代码更规范化&…...
【Qt 学习笔记】Day2 | 认识QtSDK中的重要工具
博客主页：Duck Bro 博客主页系列专栏：Qt 专栏关注博主，后期持续更新系列文章如果有错误感谢请大家批评指出，及时修改感谢大家点赞👍收藏⭐评论✍ Day2 | 认识QtSDK中的重要工具 文章编号：Qt 学习笔记 / 03…...
adc123456
DMA主要用于协助CPU完成数据转运的工作 DMA，英文全称Direct Memory Access，DMA这个外设是可以直接访问STM32内部存储器的，包括运行内存SRAM，程序存储器flash和寄存器等等，DMA都有权限访问，所以DMA能完成数据…...
YOLOV5训练自己的数据集教程（万字整理，实现0-1）
文章目录 一、YOLOV5下载地址 二、版本及配置说明 三、初步测试 四、制作自己的数据集及转txt格式 1、数据集要求 2、下载labelme 3、安装依赖库 4、labelme操作 五、.json转txt、.xml转txt 六、修改配置文件 1、coco128.yaml->ddjc_parameter.yaml 2、yolov5x.…...
精通Go语言文件上传：深入探讨r.FormFile函数的应用与优化
1. 介绍 1.1 概述 在 Web 开发中，文件上传是一项常见的功能需求，用于允许用户向服务器提交文件，如图像、文档、视频等。Go 语言作为一门强大的服务器端编程语言，提供了方便且高效的方式来处理文件上传操作。其中，r.F…...
【C语言】字符串
C语言用字符数组存放字符串，字符数组中的各元素依次存放字符串的各字符 一维字符数组：存放一个字符串（每个数组元素存放一个字符）二维字符数组：存放多个一维数组（字符串）；二维数组的…...
云计算探索-DAS、NAS与SAN存储技术演进及其应用比较
1，介绍 随着信息技术的飞速发展，数据存储的需求日益增长，各种存储技术也应运而生。在众多的存储解决方案中，直接附加存储（Direct Attached Storage，简称DAS）、网络附加存储（Network …...
手机有线投屏到直播姬pc端教程
1 打开哔哩哔哩直播姬客户端并登录(按下图进行操作) 2 手机用usb数据线连接电脑(若跳出安装驱动的弹窗点击确定或允许),usb的连接方式为仅充电(手机差异要求为仅充电),不同品牌手机要求可能不一样,根据实际的来 3 在投屏过程中不要更改usb的连接方式(不然电脑会死机需要重启) …...
SOA、分布式、微服务之间的关系？
分布式它本身就是一种系统部署的架构理念，意思就是将一个系统拆分为各个部分，然后分别部署到不同的机器上去，SOA和微服务项目的部署方式都可以是分布式架构。 而SOA和微服务它们都是面向服务的架构，但是微服务相比于SOA在服务粒度…...
Java多线程学习（概念笔记）
面试题：并行和并发有什么区别？ 现在都是多核CPU，在多核CPU下 并发是同一时间应对多件事情的能力，多个线程轮流使用一个或多个CPU 并行是同一时间动手做多件事情的能力，4核CPU同时执行4个线程 面试题：创建线…...
【C++】set和map
set和map就是我们上篇博客说的key模型和keyvalue模型。它们属于是关联式容器，我们之前说过普通容器和容器适配器，这里的关联式容器就是元素之间是有关联的，通过上篇博客的讲解我们也对它们直接的关系有了一定的了解，那么下面我们先…...
yolov5 v7.0打包exe文件，使用C++调用
cd到yolo5文件夹下 pyinstaller -p 当前路径 -i logo图标 detect.py问题汇总 运行detect.exe找不到default.yaml 这个是yolov8里的文件 1 复制权重文件到exe所在目录。 2 根据报错提示的配置文件路径，把default.yaml复制放到相应的路径下。（缺少相应…...
保研线性代数机器学习基础复习2
1.什么是群（Group）？ 对于一个集合 G 以及集合上的操作 ，如果G G-> G，那么称（G，）为一个群，并且满足如下性质： 封闭性：结合性：中性…...
vultr ubuntu 服务器远程桌面安装及连接
一. 概述 vultr 上开启一个linux服务器，都是以终端形式给出的，默认不带 ui 桌面的，那其实对于想使用服务器上浏览器时的情形不是很好。那有没有方法在远程服务器安装桌面，然后原程使用呢？至少ubuntu的服务器是有的&am…...
前端学习＜二＞CSS基础——12-CSS3属性详解：动画详解
前言 本文主要内容： 过渡：transition 2D 转换 transform 3D 转换 transform 动画：animation 过渡：transition transition的中文含义是过渡。过渡是CSS3中具有颠覆性的一个特征，可以实现元素不同状态间的平滑过渡…...
Sqoop 的安装与配置
目录 1 下载并解压2 修改配置文件3 添加环境变量4 拷贝 JDBC 驱动5 测试Sqoop是否能够成功连接数据库 下载地址 1 下载并解压 （1）上传安装包 sqoop-1.4.6.bin__hadoop-2.0.4-alpha.tar.gz 到 hadoop101 的 /opt/software 路径中 （2…...
Mysql设置访问权限（docker配置）
1.运行命令：docker exec -it 数据库名 bash，我这里是bot_test, docker exec -it bot_test bash 2.运行命令mysql -uroot -p --default-character-setutf8，输入密码连接数据库 3.运行命令show databases，查看当前的表 4.进入my…...
【Linux】详解软硬链接
一、软硬链接的建立方法 1.1软链接的建立 假设在当前目录下有一个test.txt文件，要对其建立软链接，做法如下： ln就是link的意思，-s表示软链接，test.txt要建立软链接的文件名，后面跟上要建立的软链接文件名…...
维修贝加莱4PP420.1043-B5触摸屏Power Panel 400工业电脑液晶
深圳捷达工控维修为贝加莱、HMI 显示电源面板 400 4PP420.1043-B5 提供专业电子维修。在 深圳捷达工控维修，我们拥有及时且经济高效地维修 B&R 、HMI Display Power Panel 400 4PP420.1043-B5 的经验。我们为发送给我们工厂维修的贝加莱 HMI 显示面板 400 4PP42…...
Java_21 完成一半题目
完成一半题目 有 N 位扣友参加了微软与力扣举办了「以扣会友」线下活动。主办方提供了 2*N 道题目，整型数组 questions 中每个数字对应了每道题目所涉及的知识点类型。 若每位扣友选择不同的一题，请返回被选的 N 道题目至少包含多少种知识点类型。 示例…...
【WPF应用21】WPF 中的 TextBox 控件详解与示例
在 Windows Presentation Foundation (WPF) 中，TextBox 控件是一个强大的输入控件，允许用户输入、编辑和选择文本。TextBox 控件在各种应用程序中都非常常见，例如表单、对话框和编辑器。本文将详细介绍 TextBox 控件的功能、使用方法、属性、…...
小程序页面传参？
小程序页面之间传递参数通常可以通过以下几种方式实现： 通过 URL 参数传递：可以在跳转目标页面时，在 URL 中添加参数，目标页面可以通过 options 参数获取传递过来的数据。 // 页面 A wx.navigateTo({url: targetPage?param1value…...
C++list的模拟实现
为了实现list，我们需要实现三个类 一、List的节点类 template<class T> struct ListNode {ListNode(const T& val T()):_pPre(nullptr),_pNext(nullptr),_val(val){}ListNode<T>* _pPre;ListNode<T>* _pNext;T _val; }; 二、List的迭代器…...
Leetcode 187. 重复的DNA序列
DNA序列 由一系列核苷酸组成，缩写为 ‘A’, ‘C’, ‘G’ 和 ‘T’.。 例如，“ACGAATTCCG” 是一个 DNA序列 。 在研究 DNA 时，识别 DNA 中的重复序列非常有用。 给定一个表示 DNA序列 的字符串 s ，返回所有在 DNA 分子中出现不…...
都江堰泛计算操作系统（多机）应用方向
1、异构多核芯片 DJYOS是全球唯一支持异构多核的操作系统。当前的系统级芯片，为了适应多样化的用户需求，基本上都采用了异构多核架构。传统操作系统就需要在一个芯片内，运行多种操作系统，开发工作更加复杂，运行协同性低…...
【第十二届“泰迪杯”数据挖掘挑战赛】【2024泰迪杯】B题基于多模态特征融合的图像文本检索—解题全流程（论文更新）
【第十二届“泰迪杯”数据挖掘挑战赛】【2024泰迪杯】B题基于多模态特征融合的图像文本检索更新（论文更新） 本节主要更新了论文、训练日志的log数据提取（Loss、ACC、RK）等数据可视化作图的代码 B题交流QQ群： 4583…...
蓝桥杯22年第十三届省赛-统计子矩阵|一维前缀和加双指针
题目链接： 1.统计子矩阵 - 蓝桥云课 (lanqiao.cn) 蓝桥杯2022年第十三届省赛真题-统计子矩阵 - C语言网 (dotcpp.com) 说明： 涉及到子矩阵的时候，一般就跟前缀和相关，可以降维。 先回顾一下最大子矩阵，回忆一下一…...
SaaS 电商设计 (十) 记一次 5000kw 商品数据ES迁移 (详细的集群搭建以及线上灰度过程设计)
目录 一.背景二.技术目标三.技术方案3.1 整体流程3.2 ES 切换前:完成整体新集群的搭建.i:拓扑结构设计ii: 如何选择整体的 **ES** 集群配置. 3.3 **ES** 版本切换中3.3.1 多client版本兼容3.3.2 Router的设计 3.4 ES 切换后3.5 开箱即用 四.总结 专栏系列 -SaaS 电商设计 (一) …...
惠州营销网站建设/小程序开发公司排行榜
当今的互联网，用户为王。传统的用户单方面接收信息（Web 1.0）、用户创造信息（Web 2.0）的爆炸时代已经趋缓，互联网逐步向用户之间交流信息、分享信息的平台发展。如何打造一个优秀的社区，累积有价…...
做政府网站哪家公司好/seo优化网站的注意事项
Redis SET 命令手册1. 可选项2. 返回值3. 历史变化4. 案例5. 模式从Redis 1.0.0 起可用 时间复杂度：O(1) 设置 key 以保存字符串 value。如果 key 已经保存了一个 value，则无论其类型如何，都会覆盖该值。成功的 SET 操作将丢弃与该键任何以前…...
http网站跳转怎么做/专业网络推广公司
PDC(专业开发人员会议)一直是由微软的高级开发者和架构师作为参与者，以便了解未来的微软平台和技术，PDC 2010，您将可以获得关于微软下一代云服务、Windows Phone 7、工具和技术、Internet Explorer 9 和游戏平台的第一手内容，PDC …...
订餐网站怎么做/百度视频免费高清影视
通过Kubeadm只需几条命令即起一个单机版kubernetes集群系统，而后快速上手k8s。在kubeadm中，需手动安装Docker和kubeket服务，Docker运行容器引擎，kubelet是启动Pod的核心组件，每一个节点都安装好kubelet和Docker&#x…...
北京做网站建设的公司/旺道网站排名优化
get命令 一、语法 get [-E] [-a] [-c] [-O base] rfile [-o lfile] 选项 说明 -o 指定输出文件的名字，不指定则使用原来的名字 -c 如果失败，持续获取 -E 获取之后，删除源文件 -a 使用ascii模式 -O 指定输出文件存放的目录 二…...
做标识的网站 知乎/seo检测
对 Linux 新手非常有用的 20 个命令 http://www.oschina.net/translate/useful-linux-commands-for-newbies 对 Linux 中级用户非常有用的 20 个命令 http://www.oschina.net/translate/20-advanced-commands-for-linux-experts 对 Linux 专家非常有用的 20 个命令 http://www.…...