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

Webgis学习总结

news 2026/2/10 14:24:42

前言：

作者跟随视频学习了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

人工智能 - 人脸识别：发展历史、技术全解与实战

目录一、人脸识别技术的发展历程早期探索：20世纪60至80年代技术价值点： 自动化与算法化：20世纪90年代技术价值点： 深度学习的革命：21世纪初至今技术价值点： 二、几何特征方法详解与实战几何特征方法的原理…...

编程日记 2023/12/4 0:11:27

（十）学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端，同时完善学生端的构建。本次工作主要包括： 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑一、学生端在主界面可以选择自己的用户角色选择学生则进入学生登录界面…...

编程新知 2026/2/5 4:23:32

云启出海，智联未来｜阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风，以**「云启出海，智联未来｜打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办，现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

编程新知 2026/1/30 0:00:28

遍历 Map 类型集合的方法汇总

1 方法一先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

编程新知 2026/1/24 15:08:45

centos 7 部署awstats 网站访问检测

一、基础环境准备（两种安装方式都要做） bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

编程新知 2026/1/23 8:33:56

【JVM】- 内存结构

引言 JVM：Java Virtual Machine 定义：Java虚拟机，Java二进制字节码的运行环境好处： 一次编写，到处运行自动内存管理，垃圾回收的功能数组下标越界检查（会抛异常，不会覆盖到其他代码…...

编程新知 2026/1/30 13:40:43

Opencv中的addweighted函数

一.addweighted函数作用 addweighted（）是OpenCV库中用于图像处理的函数，主要功能是将两个输入图像（尺寸和类型相同）按照指定的权重进行加权叠加（图像融合），并添加一个标量值&#x…...

编程新知 2026/2/1 1:50:03

对WWDC 2025 Keynote 内容的预测

借助我们以往对苹果公司发展路径的深入研究经验，以及大语言模型的分析能力，我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际，我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测，聊作存档。等到明…...

编程新知 2026/2/6 23:56:39

【Zephyr 系列 10】实战项目：打造一个蓝牙传感器终端 + 网关系统（完整架构与全栈实现）

🧠关键词：Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者：希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数：约 5200 字 ✨ 项目总览在物联网实际项目中，**“终端 + 网关”**是…...

编程新知 2026/1/31 6:12:22

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接：3403. 从盒子中找出字典序最大的字符串 I 代码如下： class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

编程新知 2025/10/31 5:18:02

2023赣州旅游投资集团

单选题 1.“不登高山，不知天之高也；不临深溪，不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的参考答案: C 本题解…...

编程新知 2025/11/8 16:42:13

前言：