当前位置：首页 > news >正文

Webgis学习总结

news 2026/3/31 7:30:15

前言：

作者跟随视频学习了webgis内容进行如下学习复习总结

参考：新中地学习笔记

WebGIS第一课：测试高德API并通过：

注册申请高德API成为开发者，创建自己的项目和key进行项目初始化，可以使用JS API官方文档提供的模板。

<!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, initialscale=
1.0">
<title>我的测试高度API</title>
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode:'您申请的安全密钥',
}
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?
v=2.0&key=您申请的key值"></script>
</head>
<body>
<script>
console.log(AMap)
</script>
</body>
</html>

WebGIS第二课：测试高德API地图容器和显示：

三步走：

1.引入资源

2.创建容器

<style>
#container {
height: 300px;
width: 500px;
}
</style>

3.加载地图

<script>
var map = new AMap.Map('container')
</script>

WebGIS第三课：测试高德API地图参数：

可调节：

1.中心点经纬度

2.缩放比例

3.显示模式

4.4 俯视角度

WebGIS第四课：地图的组成和操作：

图层的添加：地图是一层一层的，叠合在一起，组成完成的地图。

以交通图为例

var traffic = new AMap.TileLayer.Traffic({
autoRefresh:true,
interval:180,
})
map.add(traffic)

WebGIS第五课：地图控件的添加：

利用AMap.plugin添加高德提供的控件

// 使用plugin
AMap.plugin(['AMap.ToolBar'],function(){
//引入
map.addControl(new AMap.ToolBar())
})
AMap.plugin(['AMap.ToolBar','AMap.Scale'],function(){
//引入
map.addControl(new AMap.ToolBar())
map.addControl(new AMap.Scale())
})

文档写的全面细致可多多参考！！

WebGIS第六课：地图点击事件的引入和点标记：

点击事件的引入：

// 监听地图点击事件
map.on('click',function(event){
console.log(event)
console.log(`经度：${event.lnglat.lng},纬度：
${event.lnglat.lat}`)
})

点标记：

// 添加点
// 创建marker对象
var marker = new AMap.Marker({
position: new AMap.LngLat(114.255025,30.62157)
})
// 添加到地图
map.add(marker)

点击一次，添加一个marker进来。可添加多个点标记。

WebGIS第七课：地图覆盖物-矢量图形：

有大量矢量图形如折线，多边形，圆形，矩形，椭圆形....多看文档

折线：

var path = [
new AMap.LngLat(116.368904,39.913423),
new AMap.LngLat(116.382122,39.901176),
new AMap.LngLat(116.387271,39.912501),
new AMap.LngLat(116.398258,39.904600)
];
// 创建折线实例
var polyline = new AMap.Polyline({
path: path,
borderWeight: 2, // 线条宽度，默认为 1
strokeColor: 'red', // 线条颜色
lineJoin: 'round' // 折线拐点连接处样式
});
// 将折线添加至地图实例
map.add(polyline);

多边形：

var path = [
new AMap.LngLat(116.368904,39.913423),
new AMap.LngLat(116.382122,39.901176),
new AMap.LngLat(116.387271,39.912501),
new AMap.LngLat(116.398258,39.904600)
];
var polygon = new AMap.Polygon({
path: path,
fillColor: '#fff', // 多边形填充颜色
borderWeight: 2, // 线条宽度，默认为 1
strokeColor: 'red', // 线条颜色
});
map.add(polygon);

圆形：

var circle = new AMap.Circle({
center: new AMap.LngLat(116.39,39.9), // 圆心位置
radius: 1000, // 圆半径
fillColor: 'red', // 圆形填充颜色
strokeColor: '#fff', // 描边颜色
strokeWeight: 2, // 描边宽度
});
map.add(circle);

矩形：

var southWest = new AMap.LngLat(116.356449, 39.859008)
var northEast = new AMap.LngLat(116.417901, 39.893797)
var bounds = new AMap.Bounds(southWest, northEast)
var rectangle = new AMap.Rectangle({
bounds: bounds,
strokeColor:'red',
strokeWeight: 6,
strokeOpacity:0.5,
strokeDasharray: [30,10],
// strokeStyle还支持 solid
strokeStyle: 'dashed',
fillColor:'blue',
fillOpacity:0.5,
cursor:'pointer',
zIndex:50,
})
map.add(rectangle)

折线编辑：

// 引入多边形编辑器插件
map.plugin(["AMap.PolylineEditor"],function(){
// 实例化多边形编辑器，传入地图实例和要进行编辑的多边形实例
polylineEditor = new AMap.PolylineEditor(map, polyline);
// 开启编辑模式
polylineEditor.

WebGIS第八课：地图覆盖物-两点拖拽测距：

步骤：

1 创建两个点

采用赋值的方法直接创建
之后可以调试一下，看是否正常显示

2 创建一条线

采用赋值来创建线，由于后续要根据点的位置动态调整线，先不给定具体坐标，只是对样式进行规定。

3 创建文本

用来显示距离。这里也和线一样，需要动态调整，显示在两点中间位置。

4 计算距离

根据两个点的经纬度来直接调用函数计算可写为函数。
写为函数的好处是，不仅封装了计算过程，还可以结合前面线和文本来具体制定他们的位置。

<script>
// 创建地图对象
var map = new AMap.Map('container',{
center:[116.39,39.9],
zoom:15,
viewMode:'2D',
})
// 创建两个点
var m1 = new AMap.Marker({
map:map,
draggable:true,
position:new AMap.LngLat(116.39,39.9),
})
var m2 = new AMap.Marker({
map:map,
draggable:true,
position:new AMap.LngLat(116.394,39.9),
})
// 根据覆盖物调整地图显示范围
map.setFitView()
// 准备一条线
var line = new AMap.Polyline({
strokeColor:'#80d8ff',
isOutline:true,
outerlineColor:'white',
})
line.setMap(map)
// 准备一个文本
var text = new AMap.Text({
text:'',
style:{
'background-color':'#29b6f6',
'border-color':'#e1f5fe',
'font-size':'16px',
},
})
text.setMap(map)
// 计算
function compute(){// 得到m1 和 m2 的经纬度

总结：多看文档！！减少单词拼写，单词大小写错误带来的影响！！！

Webgis学习总结

前言： 作者跟随视频学习了webgis内容进行如下学习复习总结参考：新中地学习笔记 WebGIS第一课：测试高德API并通过： 注册申请高德API成为开发者，创建自己的项目和key进行项目初始化，可以使用JS API官方文…...

编程日记 2023/12/4 0:48:02

【开源】基于Vue+SpringBoot的音乐平台

项目编号： S 055 ，文末获取源码。 \color{red}{项目编号：S055，文末获取源码。} 项目编号：S055，文末获取源码。目录一、摘要1.1 项目介绍1.2 项目录屏二、功能模块三、系统展示四、核心代码4.1 查询单首…...

编程日记 2023/12/4 0:46:00

20、Resnet 为什么这么重要

（本文已加入“计算机视觉入门与调优”专栏，点击专栏查看更多文章信息）r esnet 这一网络的重要性，上一节大概介绍了一下，可以从以下两个方面来有所体现：第一是 resnet 广泛的作为其他神经网络的 back bone；第二是 resnet 是 AI 芯片厂家对标性能时，在视觉领域尤其是图像…...

编程日记 2023/12/4 0:43:58

Git Bash环境下用perl脚本获取uuid值

在Linux环境下，比如在ubuntu就直接有uuidgen命令直接获取uuid值。在Windows环境下常用的git bash中没有对应的命令，略有不便。这里用脚本写一个uuidgen，模拟Linux环境下的uuidgen命令。 #! /usr/bin/perl use v5.14; use Win32;sub uuidGen {…...

编程日记 2023/12/4 0:41:56

linux安装部署redis

1、下载redis包2、解压3、进入解压路径编译安装4、修改配置文件使redis后台运行5、启动 1、下载redis包 https://redis.io/download/ 2、解压 tar -zxvf redis-7.2.3.tar.gz3、进入解压路径编译安装 cd redis-7.2.3 make && make install默认安装路径： …...

编程日记 2023/12/4 0:40:55

Redis 数据结构详解

分类编程技术 Redis 数据类型分为：字符串类型、散列类型、列表类型、集合类型、有序集合类型。 Redis 这么火，它运行有多块？一台普通的笔记本电脑，可以在1秒钟内完成十万次的读写操作。原子操作：最小的操作单位&a…...

编程日记 2023/12/4 0:39:54

03-IDEA集成Git,初始化本地库,添加远程仓库,提交,拉取,推送,分支的快捷操作

IDEA集成Git 创建Git忽略文件不同的IDE开发工具有不同的特点文件,这些文件与项目的实际功能无关且不参与服务器上的部署运行, 把它们忽略掉能够屏蔽之间的差异局部忽略配置文件: 在本地仓库的根目录即项目根目录下直接创建.gitignore文件, 以文件后缀或目录名的方式忽略指定…...

编程日记 2023/12/4 0:38:53

Python---格式化输出与%百分号----涉及转义符 \ 反斜杠的使用

相关链接Python--格式化输出中的转义符号----\t 制表符（空格的）和\n（换行的）_唯元素的博客-CSDN博客 Python---字符串（用单、双引号、三单/双引号定义。反斜杠 \ 转义，单在双内/双在单内 ）-CS…...

编程日记 2023/12/4 0:35:49

大华技术GIS开发工程师24届秋招三场面试Offer面经

本文介绍2024届秋招中，大华技术股份有限公司的GIS开发工程师岗位的3场面试基本情况、提问问题等。 10月投递了大华技术股份有限公司的GIS开发工程师岗位，所在部门为研发中心。目前完成了一面、二面与三面等全部流程，并有幸获得Offer&#xff…...

编程日记 2023/12/4 0:34:48

前端三大MV*模式：MVC、mvvm、mvp模式介绍

MVC（同步通信为主）：Model、View、Controller MVP(异步通信为主)：Model、View、Presenter MVVM(异步通信为主)：Model、View、ViewModel mvc模式介绍 MVC（Model–View–Controller）模式是软件…...

编程日记 2023/12/4 0:33:48

分享一些Git的常用命令

常用命令命令名称作git config —global user.name 用户名设置用户签名git config —global user.email 邮箱设置用户签名git init初始化本地库git status查看本地库状态git add 文件名添加到暂存区git commit -m “日志信息” 文件名提交到本地库git reflog查看历史记录git r…...

编程日记 2023/12/4 0:31:46

C语言第四十二弹---使用多种方法实现字符串左旋转

使用多种方法实现字符串左旋转一、左移法思路：每一次通过移动第一个字符，然后把后面的字符前移，然后再进行移动第一个字符再前移。故需要使用嵌套循环，外层循环控制移动第一个字符的次数，第二个循环进行字符前移 …...

编程日记 2023/12/4 0:30:45

REST-Assured--JAVA REST服务自动化测试的Swiss Army Knife

什么是REST-Assured REST Assured是一套基于 Java 语言实现的开源 REST API 测试框架 Testing and validation of REST services in Java is harder than in dynamic languages such as Ruby and Groovy. REST Assured brings the simplicity of using these languages into t…...

编程日记 2023/12/4 0:26:41

docker中的网络不通问题

前言有时候在使用docker时，会莫名其妙docker内部与外网网络不通 docker与防火墙 docker内部的网络与宿主机的防火墙有千丝万缕的联系，docker启动的那一刻如果防火墙是启动的，docker内部与外部就会走防火墙转发策略，这个时候&a…...

编程日记 2023/12/4 0:24:40

Android 12.0 修改Android系统的通知自动成组的数量

场景: Android 系统对显示在通知列表中的同一个应用的通知进行分组管理,即相同的packageName中,当通知数量达到系统默认指定的数量时,会自动成一组. Android 12.0 中系统默认的自动成组数如下所示: 核心路径 : frameworks/base/core/res/res/values/config.xml<!-- 来自同…...

编程日记 2023/12/4 0:23:38

Debian12配置ssh服务器

Debian12配置ssh服务器安装ssh-server sudo apt install openssh-server启动ssh sudo systemctl start ssh启用ssh sudo systemctl enable ssh查看ssh状态 sudo systemctl status ssh可以看到有enabled和running字样说明ssh启用成功连接到服务器 # username是你的用…...

编程日记 2023/12/4 0:22:37

飞天使-elk搭建补充

文章目录 es 集群创建密码kibana 配置文件以及和nginx配置pm2 安装定期清理索引以及告警logstash 配置filebeat 配置文件nginx 的日志索引 es 集群创建密码参考这篇博文进行设置：https://juejin.cn/post/7079955586330132487 最后的效果 #curl -XGET http://127.0…...

编程日记 2023/12/4 0:14:31

YOLOv7+姿态估计Pose+tensort部署加速

YOLOv7-Pose YOLOv7是一种高效的目标检测算法，用于实时物体检测。姿态估计Pose是一种用于识别和跟踪人体关键点的技术。TensorRT是一个针对深度学习推理任务进行加速的高性能推理引擎。将YOLOv7和姿态估计Pose与TensorRT结合可以实现快速而准确的目标检测和姿态估…...

编程日记 2023/12/4 0:13:30

Java数据结构之包装类简单认识泛类

生命不息，奋斗不止目录 1. 什么是包装类？ 1.1 装箱和拆箱 1.2 自动装箱和自动拆箱 2. 什么是泛型 3. 引出泛型 3.1 语法 4 泛型类的使用 4.1 语法 4.2 示例 4.3 类型推导(Type Inference) 5. 裸类型(Raw Type) （了解&#xff09…...

编程日记 2023/12/4 0:12:28