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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/783791.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

汇编语言第四版-王爽第1章 基础知识

汇编语言第四版-王爽第1章 基础知识

前言 基础知识 &#xff08;1&#xff09;换成bit&#xff0c;1KB1024B&#xff0c;1Byte8bit&#xff1b;1KB1024*8bit&#xff0c;即2的13次方&#xff0c;宽度为13. &#xff08;2&#xff09;1个存储单元只能放1个字节&#xff0c;1KB1024B&#xff1b;编号从0到1023. &a…
阅读更多...
蓝桥杯刷题第六天（去年蓝桥杯买二赠一全网都错了？）

蓝桥杯刷题第六天（去年蓝桥杯买二赠一全网都错了？）

今天主要刷了两道很有意思的题目&#xff0c;使我完全想放弃蓝桥杯了&#xff0c;其中一道全网答案都是错的 这道题感觉用贪心做不了吧 很多特例比如&#xff1a; 6 12 23 25 25 50 50 全网模板算得都是160&#xff0c;我试了很多种办法好像似乎也就暴力遍历可以解决。 学…
阅读更多...
Kubernetes(K8S)学习（二）：K8S常用组件

Kubernetes(K8S)学习（二）：K8S常用组件

K8S常用组件 一、 Controllers1、ReplicationController(RC)2、ReplicaSet(RS)3、Deployment 二、Labels and Selectors三、Namespace&#xff08;命名空间&#xff09;1、简介2、测试2.1、创建namespace2.2、创建pod 四、Network1、集群内&#xff1a;同一个Pod中的容器通信2、…
阅读更多...
Docker 轻量级可视化工具 Portainer

Docker 轻量级可视化工具 Portainer

1. 是什么 它是一款轻量级的应用&#xff0c;它提供了图形化界面&#xff0c;用于方便管理Docker环境&#xff0c;也包括单机环境和集群环境。 2. 安装 官网&#xff1a;Kubernetes and Docker Container Management Software 安装路径&#xff1a;Install the Compose plug…
阅读更多...
基于YOLOV5+Pyqt5农作物叶片病害检测系统

基于YOLOV5+Pyqt5农作物叶片病害检测系统

1、引言 农作物病害的精准检测与识别是推动农业生产智能化与现代化发展的重要举措。随着计算机视觉技术的发展&#xff0c;深度学习方法已得到快速应用&#xff0c;利用卷积神经网络进行农作物病害检测与识别成为近年来研究的热点。基于传统农作物病害识别方法&#xff0c;分析…
阅读更多...
vue3封装Element表格

vue3封装Element表格

配置表头配置多选配置序号自定义操作列按钮 封装表格 Table.vue <template><el-table:data"tableData"width"100%":maxHeight"maxHeight"v-bind"$attrs"selection-change"handleSelectChange"row-click"hand…
阅读更多...
Docker搭建LNMP环境实战（10）：大结局！脚本化一次性安装测试、生产环境

Docker搭建LNMP环境实战（10）：大结局！脚本化一次性安装测试、生产环境

实现使用 Docker 在一台服务器上搭建支持 80、443 端口访问的测试、生产双站点系统。 1、生产环境&测试环境的规划和部署 1.1、说明 图1 系统部署示意图 1&#xff09;项目 此处以一个演示项目的形式来进行环境的规划和部署。此项目名称默认定义为&#xff1a;“demo”&a…
阅读更多...
考研数学｜零基础张宇全年复习规划+资料分享

考研数学｜零基础张宇全年复习规划+资料分享

可以全程张宇老师的高等数学&#xff0c;张宇老师的拿手绝活是 但是其他科目&#xff0c;还有更好的选择&#xff0c;比如线性代数&#xff0c;汤家凤老师还有李永乐老师讲的都不错&#xff0c;概率论&#xff0c;余丙森老师还有方浩老师讲的很好。下面我就讲清楚&#xff0c;…
阅读更多...
uniapp开发小程序生成和扫描二维码

uniapp开发小程序生成和扫描二维码

uniapp中生成二维码和扫码二维码 1.首先建立一个可运行的小程序 2. 安装uqrcodejs 安装了cnpm后，使用cnpm命令也行 npm install uqrcodejs 3. 安装成功后，在这里就能看到了 4. 代码 <template><button @click="ShowTwoCodeClick">生成二维码</…
阅读更多...
240330-大模型资源-使用教程-部署方式-部分笔记

240330-大模型资源-使用教程-部署方式-部分笔记

A. 大模型资源 Models - Hugging FaceHF-Mirror - Huggingface 镜像站模型库首页 魔搭社区 B. 使用教程 HuggingFace HuggingFace 10分钟快速入门&#xff08;一&#xff09;&#xff0c;利用Transformers&#xff0c;Pipeline探索AI。_哔哩哔哩_bilibiliHuggingFace快速入…
阅读更多...
【计算机视觉】四篇基于Gaussian Splatting的SLAM论文对比

【计算机视觉】四篇基于Gaussian Splatting的SLAM论文对比

本文对比四篇论文&#xff1a; [1] Gaussian Splatting SLAM [2] SplaTAM: Splat, Track & Map 3D Gaussians for Dense RGB-D SLAM [3] Gaussian-SLAM: Photo-realistic Dense SLAM with Gaussian Splatting [4] GS-SLAM: Dense Visual SLAM with 3D Gaussian Splatting …
阅读更多...
汇编语言——用INT 21H 的A号功能，输入一个字符串存放在内存，倒序输出

汇编语言——用INT 21H 的A号功能，输入一个字符串存放在内存，倒序输出

用INT 21H 的A号功能&#xff0c;输入一个字符串“Hello, world!”&#xff0c;存放在内存&#xff0c;然 后倒序输出。 在DOS中断中&#xff0c;INT 21H是一个常用的系统功能调用中断&#xff0c;它提供了多种功能&#xff0c;其中A号功能用于字符串的输入。 在使用这个功能时…
阅读更多...
【PSINS工具箱】基于工具箱，自己设计的轨迹，并生成IMU数据和三维视图（完整代码）

【PSINS工具箱】基于工具箱，自己设计的轨迹，并生成IMU数据和三维视图（完整代码）

完整代码 在有工具箱的情况下&#xff0c;直接运行代码&#xff0c;即可 % 基于PSINS工具箱的三维轨迹生成、三维图像绘制与IMU数据生成 % date:2024-2-13 % Evand&#xff08;evandworldqq.com&#xff09; % Ver1 clear;clc;close all; glvs ts 0.1; % sampling int…
阅读更多...
linux自定义命令

linux自定义命令

文章目录 1、自定义命令介绍2、自定义命令步骤 (centos7)2.1 新建隐藏目录存放自定义命令脚本文件2.2 将新建的目录配置环境变量2.3 取别名的方式简化已有命令2.4 编写自定义命令脚本 1、自定义命令介绍 不管是linux系统还是windows系统都支持自定义命令&#xff0c;windows端…
阅读更多...
学习 C++ 一定要搭配 Linux 吗？

学习 C++ 一定要搭配 Linux 吗？

学习C并不一定非要搭配Linux&#xff0c;但使用Linux环境进行学习和开发确实有其独特的优势&#xff0c;尤其对于深入理解和实践某些高级主题及特定领域的开发工作。以下是关于是否需要搭配Linux学习C的详细分析&#xff1a; 为了帮助您更好地入门并深入掌握C&#xff0c;我们精…
阅读更多...
PLC的大脑和心脏——CPU及西门子S7-1200CPU分类、CPU型号及端子接线图示例

PLC的大脑和心脏——CPU及西门子S7-1200CPU分类、CPU型号及端子接线图示例

CPU不断地采集输入信号&#xff0c;执行用户程序&#xff0c;刷新系统的输出。 根据供电方式和输入/输出方式的不同&#xff0c;西门子S7-1200 CPU分为3类&#xff0c;如下图1。 图1 CPU的分类 第1对字母&#xff0c;表示CPU的供电方式&#xff0c;AC&#xff08;Alternating…
阅读更多...
代码随想录第25天|216.组合总和III 17.电话号码的字母组合

代码随想录第25天|216.组合总和III 17.电话号码的字母组合

216.组合总和III 216. 组合总和 III - 力扣&#xff08;LeetCode&#xff09; 代码随想录 (programmercarl.com) 和组合问题有啥区别&#xff1f;回溯算法如何剪枝&#xff1f;| LeetCode&#xff1a;216.组合总和III_哔哩哔哩_bilibili 找出所有相加之和为 n 的 k 个数的组…
阅读更多...
【KingSCADA】播放语音

【KingSCADA】播放语音

1.函数介绍 PlaySound(string strWaveFileName, int nMode);下面是官方帮助文档中的解释&#xff1a; 2.生成语音文件 3.使用脚本播放音频文件 将音频文件存放在工程目录下面&#xff0c;我存放在了…\Resources\文件夹下&#xff1a; 我简单的写了一个定时1分钟播放一次语…
阅读更多...
Fluent循环流动案例（模拟循环泵，含换热、散热、VOF、UDF）

Fluent循环流动案例（模拟循环泵，含换热、散热、VOF、UDF）

在此特意记录下循环通道的fluent思路和参数设置 该案例中&#xff0c;主要关注的是催化剂域的温度变化情况&#xff0c;因此需要监控的是温度的变化曲线&#xff0c;关于泵如何进行模拟&#xff0c;这里有两种思路&#xff0c;一种是用风扇代替泵&#xff0c;优点是整个流体域基…
阅读更多...
HarmonyOS ArkTS 骨架屏加载显示（二十五）

HarmonyOS ArkTS 骨架屏加载显示（二十五）

目录 前言1、骨架屏代码显示2、代码中引用3、效果图展示 前言 所谓骨架屏&#xff0c;就是在页面进行耗时加载时&#xff0c;先展示的等待 UI, 以告知用户程序目前正在运行&#xff0c;稍等即可。 等待的UI大部分是 loading 转圈的弹窗&#xff0c;有的是自己风格的小动画。其实…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023