零底子上手WebGIS+智慧校园实例（1）【html by js】
请点个赞+收藏+关注支持一下博主喵！！！等下再更新一下1. WebGIS矢量图形的绘制（超级详细！！），2. WebGIS计算距离， 以及智慧校园实例 with 3个例子！！！！，恣意期待！！！
之后代码+资料全部发到github里，盼望大家能关注一下咱的Github
举行WebGIS开发时，引入API是一个关键步骤，它允许开发者将舆图服务和功能集成到本身的Web应用中。
一、API简单界说
API（Application Programming Interface，应用步伐编程接口） 是一组界说、步伐及协议的集合，通过这组集合，软件应用步伐能够访问另一个软件应用步伐或硬件服务的能力。简单来说，API 就像是软件之间的桥梁，允许不同的软件体系举行交互和数据传输。
#1. API 的重要作用
数据共享：API 允许不同的体系或应用之间共享数据，比如天气预告API可以被多个应用用来获取实时天气信息。
功能扩展：开发者可以通过调用其他软件提供的API来扩展本身软件的功能，而无需重新开始编写全部代码。
服务集成：企业可以使用API将内部体系与外部服务（如付出服务、舆图服务等）集成在一起，以提高效率和用户体验。
促进开发：通过提供API，软件或服务的提供者可以鼓励和支持第三方开发者基于其服务构建新的应用或功能，从而形成一个生态体系。
#2. API 的类型
RESTful API：一种基于HTTP协媾和无状态束缚的Web服务接口，通过GET、POST、PUT、DELETE等HTTP哀求方法来操纵资源。RESTful API是现在最流行的API设计方式之一。
SOAP API：SOAP（Simple Object Access Protocol）是一种基于XML的协议，用于在网络上交换结构化的信息。SOAP API通常比RESTful API更复杂，但提供了更丰富的功能和更好的错误处理能力。
GraphQL API：GraphQL是一种用于API的查询语言，它允许客户端准确指定它需要什么数据，而不是像REST那样一次获取整个资源或资源的某个特定表现。
Webhooks：固然Webhooks不是传统意义上的API，但它们提供了一种让应用间通信的方式。当某个变乱发生时，Webhooks允许一个应用向另一个应用发送HTTP哀求，以便后者可以相应这个变乱。
#3. 使用API的留意事项
API权限：在使用第三方API之前，需要相识并遵守API提供者的权限和限制要求。
数据安全性：通过API传输的数据需要得到妥善掩护，避免数据泄漏或被非法访问。
API稳定性：选择稳定可靠的API，避免因API的频繁变更而影相应用的稳定性和用户体验。
API文档：仔细阅读API文档，相识API的使用方法和规范，确保正确、有效地使用API。
错误处理：在调用API时，需要做好错误处理工作，确保在API出现故障或返回错误时，应用能够妥善处理并给出适当的提示信息。
二、引入专门开发gis的api
#1. 选择合适的API
首先，你需要根据项目的需求和目标选择合适的WebGIS API。现在市场上主流的WebGIS API包括高德舆图API、百度舆图API、ArcGIS API、SuperMap API、OpenLayers、Leaflet等。这些API各有特色，实用于不同的场景和需求。例如：
高德舆图API：适合需要轻量级、易设置且功能丰富的舆图服务的开发者。它提供了丰富的舆图图层、矢量图形、点标记和控件等功能，并支持三维舆图展示。
百度舆图API：同样功能强大，但可能更侧重于城市数据的展示和商业市场的应用。
ArcGIS API：适合大型项目，功能最为全面，支持复杂的数据分析和空间操纵，但成本可能较高。
SuperMap API：国内领先的GIS软件供应商提供的API，功能丰富，适合大中型项目的开发。
OpenLayers 和 Leaflet：这两个API都是开源的，适合预算有限或盼望自界说程度较高的项目。
#2. 注册并获取API密钥
大多数WebGIS API都需要开发者注册并获取一个API密钥（Key）或访问令牌（Token），以便在哀求舆图服务时举行身份验证和计费。你可以访问相应API提供商的官方网站，按照注册流程填写相关信息并获取密钥。
#3. 在项目中引入API
获取API密钥后，你需要在你的Web项目中引入该API。这通常涉及以下几个步骤：
在HTML中引入API的JavaScript文件：大多数WebGIS API都提供了可以直接在HTML文件中通过<script>标签引入的JavaScript库文件。你需要在HTML文件的<head>或<body>标签内添加相应的<script>标签，并指定API文件的URL（通常包罗你的API密钥作为查询参数）。
初始化舆图容器：在HTML中界说一个<div>元素作为舆图的容器，并为其指定一个唯一的ID。然后，在JavaScript中使用API提供的函数和方法来初始化舆图，并将其渲染到该<div>元素中。
设置舆图选项：根据需要设置舆图的各种选项，如中心点、缩放级别、舆图类型等。
添加舆图控件和图层：根据需要添加舆图控件（如缩放控件、比例尺控件等）和图层（如底图图层、自界说图层等）。
#4. 实现舆图交互功能
末了，你可以使用API提供的各种接口和变瞎搅实现舆图的交互功能，如点击舆图获取位置信息、拖拽舆图改变视图、搜索地点并定位等。
留意事项
在使用API时，请务必遵守API提供商的使用条款和隐私政策。
留意API的调用频率和限制，避免超出限制导致服务被停息或收费。
思量到兼容性和稳定性，建议在使用进步行充分的测试。
代码应用如下：
这里我们以高德舆图的api举行设计，可以注册高德开放平台：
留意：下面的代码的的api密钥都是博主的，请不要使用喵，求求了喵，你们换成本身的api
https://i-blog.csdnimg.cn/direct/80d8506f188e498eb409fb3974d87154.png
11. WebGIS开发准备
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入高德API -->
<script
type="text/javascript">
window._AMapSecurityconfig = {
securityJsCode:'f00a9ad0aa34cb73b582ee0639112578',
}
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=af0e06deee299b6b0930c68a4b98be0b"></script>
</head>
<body>
<script>
console.log(AMap)
</script>
</body>
</html> 12. WebGIS舆图表现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>地图显示</title>
<!-- 一，引入资源 -->
<script
type="text/javascript">
window._AMapSecurityconfig = {
securityJsCode:'f00a9ad0aa34cb73b582ee0639112578',
}
</script>
<script
type="text/javascript"
src="https://webapi.amap.com/maps?v=2.0&key=af0e06deee299b6b0930c68a4b98be0b"
></script>
<!-- 三，设置地图的样式 -->
<style>
#container {
<!-- 地图图幅大小（像素） -->
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<!-- 二，创建地图容器 -->
<!-- emmet: div#container -->
<div id="container"></div>
<!-- 四，加载地图 -->
<script>
//用标签script定义一个变量，保存一个对象(将创建的地图于容器container关联起来)
var map = new AMap.Map('container')
</script>
</body>
</html> https://i-blog.csdnimg.cn/direct/4ccae88dd3074c2dab09694143a2be32.png
13. WebGIS舆图参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>地图参数</title>
<!-- 一，引入资源 -->
<script
type="text/javascript">
window._AMapSecurityconfig = {
securityJsCode:'f00a9ad0aa34cb73b582ee0639112578',
}
</script>
<script
type="text/javascript"
src="https://webapi.amap.com/maps?v=2.0&key=af0e06deee299b6b0930c68a4b98be0b"
></script>
<!-- 三，创建地图样式 -->
<style>
html,
body,
#container {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!-- 二，创建地图容器 -->
<div id="container"></div>
<!-- 四，加载地图 -->
<script>
// 声明一个变量
var map = new AMap.Map('container', {
center: ,// 1.设置地图中心的经纬度
zoom: 12, // 2.地图的缩放比例(3~20)
viewMode: '3D', // 3.地图的2D或3D查看，若想知道参数配置例如下行的观看角度设置，可以在高德的参考手册的参数配置查看
pitch: 45, // 4.3D的观看角度
})
</script>
</body>
</html> 舆图参数可以在如下页面详细阅览各种不同参数的怎样应用：
https://i-blog.csdnimg.cn/direct/b39a9f29ae8246de9cab996a6142ef15.png
14. WebGIS实时路况
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>地图参数</title>
<!-- 一，引入资源 -->
<script
type="text/javascript">
window._AMapSecurityconfig = {
securityJsCode:'f00a9ad0aa34cb73b582ee0639112578',
}
</script>
<script
type="text/javascript"
src="https://webapi.amap.com/maps?v=2.0&key=af0e06deee299b6b0930c68a4b98be0b"
></script>
<!-- 三，创建地图样式 -->
<style>
html,
body,
#container {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!-- 函数一定要家加括号才能表示调用函数 -->
<button onclick="add()">显示实时路况</button>
<button onclick="remove()">隐藏实时路况</button>
<!-- 二，创建地图容器 -->
<div id="container"></div>
<!-- 四，加载地图 -->
<script>
// 声明一个变量'map'
var map = new AMap.Map('container', {
center: ,// 1.设置地图中心的经纬度
zoom: 12, // 2.地图的缩放比例(3~20)
viewMode: '3D', // 3.地图的2D或3D查看，若想知道参数配置例如下行的观看角度设置，可以在高德的参考手册的参数配置查看
pitch: 45, // 4.3D的观看角度
})
// 声明一个图层变量'traffic'
var traffic = new AMap.TileLayer.Traffic({
autoRefresh: true, //是否自动刷新，默认为false
interval: 180, //刷新间隔，默认180s
})
//map.add(traffic) //通过add方法添加图层
function add() {
console.log('add') //随便输出一句话，用于在控制台检查函数是否使用； 结果发现，函数未使用，则推测为button出错，
map.add(traffic)
}
function remove() {
map.remove(traffic)
}
</script>
</body>
</html> 15. WebGIS舆图控件
<!-- js api2.0 进阶教程-地图控件 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>地图参数</title>
<!-- 一，引入资源 -->
<script
type="text/javascript">
window._AMapSecurityconfig = {
securityJsCode:'f00a9ad0aa34cb73b582ee0639112578',
}
</script>
<script
type="text/javascript"
src="https://webapi.amap.com/maps?v=2.0&key=af0e06deee299b6b0930c68a4b98be0b"
></script>
<!-- 三，创建地图样式 -->
<style>
html,
body,
#container {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!-- 二，创建地图容器 -->
<div id="container"></div>
<!-- 四，加载地图 -->
<script>
// 声明一个变量
var map = new AMap.Map('container', {
center: ,// 1.设置地图中心的经纬度
zoom: 12, // 2.地图的缩放比例(3~20)
viewMode: '3D', // 3.地图的2D或3D查看，若想知道参数配置例如下行的观看角度设置，可以在高德的参考手册的参数配置查看
pitch: 45, // 4.3D的观看角度
})
// 五，加载控件
// 5.1 安装plugin（插件）
AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye', 'AMap.MapType', 'AMap.ControlBar'], function() {
//5.2 添加控件至地图: addControl调用api
// ToolBar(工具条): 集成了缩放，平移，定位
map.addControl(new AMap.ToolBar())
// Scale(比例尺)：展示地图在当前层级和经纬度下的比例
map.addControl(new AMap.Scale())
// HawkEye(鹰眼): 右下角地图的缩略图
map.addControl(new AMap.HawkEye())
//切换图层：eg：“标准图层，卫星图，路网，路况”， 图层和图层可以叠加
map.addControl(new AMap.MapType())
//工具条方向盘
map.addControl(new AMap.ControlBar())
})
</script>
</body>
</html> 16. WebGIS舆图变乱-获取点击的经纬度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>地图参数</title>
<!-- 一，引入资源 -->
<script
type="text/javascript">
window._AMapSecurityconfig = {
securityJsCode:'f00a9ad0aa34cb73b582ee0639112578',
}
</script>
<script
type="text/javascript"
src="https://webapi.amap.com/maps?v=2.0&key=af0e06deee299b6b0930c68a4b98be0b"
></script>
<!-- 三，创建地图样式 -->
<style>
html,
body,
#container {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!-- 二，创建地图容器 -->
<div id="container"></div>
<!-- 四，加载地图 -->
<script>
// 声明一个变量
var map = new AMap.Map('container', {
center: ,// 1.设置地图中心的经纬度
zoom: 18, // 2.地图的缩放比例(3~20)
viewMode: '3D', // 3.地图的2D或3D查看，若想知道参数配置例如下行的观看角度设置，可以在高德的参考手册的参数配置查看
pitch: 45, // 4.3D的观看角度
})
//监听地图的点击事件
map.on('click', function (event) {
//(打印event)在控制台可以展开看到event所含的东西：console.log(event)
console.log(`经度: ${event.lnglat.lng}, 纬度: ${event.lnglat.lat}`)
// 注意这里是 模板字符串``,而不是''
})
</script>
</body>
</html> 17. WebGIS基于经纬度绘制点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>地图参数</title>
<!-- 一，引入资源 -->
<script
type="text/javascript">
window._AMapSecurityconfig = {
securityJsCode:'f00a9ad0aa34cb73b582ee0639112578',
}
</script>
<script
type="text/javascript"
src="https://webapi.amap.com/maps?v=2.0&key=af0e06deee299b6b0930c68a4b98be0b"
></script>
<!-- 三，创建地图样式 -->
<style>
html,
body,
#container {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!-- 二，创建地图容器 -->
<div id="container"></div>
<!-- 四，加载地图 -->
<script>
// 声明一个变量
var map = new AMap.Map('container', {
center: ,// 1.设置地图中心的经纬度
zoom: 12, // 2.地图的缩放比例(3~20)
})
//测试代码 (获取某一位置的具体坐标--在lnglat路径下)
// map.on('click', function (e) {
// console.log(e)
// })
// 添加点
// 1. 创建一个点对象Marker
var marker = new AMap.Marker({
position: new AMap.LngLat(114.255025, 30.62157)
})
// 2. 添加到地图
map.add(marker)
</script>
</body>
</html> 18. WebGIS交互式绘制点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>地图参数</title>
<!-- 一，引入资源 -->
<script
type="text/javascript">
window._AMapSecurityconfig = {
securityJsCode:'f00a9ad0aa34cb73b582ee0639112578',
}
</script>
<script
type="text/javascript"
src="https://webapi.amap.com/maps?v=2.0&key=af0e06deee299b6b0930c68a4b98be0b"
></script>
<!-- 三，创建地图样式 -->
<style>
html,
body,
#container {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!-- 二，创建地图容器 -->
<div id="container"></div>
<!-- 四，加载地图 -->
<script>
// 声明一个变量
var map = new AMap.Map('container', {
center: ,// 1.设置地图中心的经纬度
zoom: 12, // 2.地图的缩放比例(3~20)
})
map.on('click', function (e) {
console.log(e)
// 添加点
// 1. 创建一个点对象Marker
var marker = new AMap.Marker({
// 直接以e事件对象的lnglat（经纬度对象）作为一个点,而不用详细的坐标
position: e.lnglat,
})
// 2. 把点添加到地图上
map.add(marker)
})
</script>
</body>
</html> 19. 灵活的点标记源代码参考
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>天坛</title>
<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
<script src="https://cache.amap.com/lbs/static/es5.min.js"></script>
<style type="text/css">
.amap-marker-label{
width: 60px;
font-size: 16px;
line-height: 18px;
text-align: center;
height: 18px;
font-family: STLiti;
color: green;
border-radius: 15px;
background-color: rgba(255,255,255,0.4);
border: solid 2px rgba(100,255,200,0.8);
}
</style>
<script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/resource/js/tiantan_v2.js"></script>
<script src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值&plugin=AMap.ElasticMarker"></script>
</head>
<body>
<div id="container" ></div>
<script>
//缩放地图看看！！！
var map = new AMap.Map('container', {
viewMode: '3D',
turboMode: false,
showIndoorMap: false,
defaultCursor: 'pointer',
showBuildingBlock: false,
zooms: ,
showLabel: false,
zoom: 16,
pitch: 55,
rotation: -45,
center: ,
forceVector: true,
});
var facilities = [];
var zoomStyleMapping1 = {
14: 0,
15: 0,
16: 0,
17: 0,
18: 0,
19: 0,
20: 0
};
for (var i = 0; i < sheshi.length; i += 1) {
var marker = new AMap.ElasticMarker({
position: sheshi.position,
zooms: ,
styles: [{
icon: {
img: sheshi.icon,
size: ,//可见区域的大小
anchor: 'bottom-center',//锚点
fitZoom: 14,//最合适的级别
scaleFactor: 2,//地图放大一级的缩放比例系数
maxScale: 1.4,//最大放大比例
minScale: 0.8//最小放大比例
}
}],
zoomStyleMapping: zoomStyleMapping1
})
facilities.push(marker);
}
map.add(facilities);
var spots = [];
var zoomStyleMapping2 = {
14: 0,
15: 0,
16: 1,
17: 1,
18: 1,
19: 1,
20: 1
}
for (var i = 0; i < touristSpots.length; i += 1) {
var marker = new AMap.ElasticMarker({
position: touristSpots.position,
zooms: ,
styles: [{
icon: {
img: touristSpots.smallIcon,
size: ,//可见区域的大小
anchor: 'bottom-center',//锚点
fitZoom: 14,//最合适的级别
scaleFactor: 2,//地图放大一级的缩放比例系数
maxScale: 2,//最大放大比例
minScale: 1//最小放大比例
},
label: {
content: touristSpots.name,
position: 'BM',
minZoom: 15
}
}, {
icon: {
img: touristSpots.bigIcon,
size: touristSpots.size,
anchor: touristSpots.anchor,
fitZoom: 17.5,
scaleFactor: 2,
maxScale: 2,
minScale: 0.125
},
label: {
content: touristSpots.name,
position: 'BM'
}
}],
zoomStyleMapping: zoomStyleMapping2
})
spots.push(marker);
}
map.add(spots);
var trees = new AMap.ElasticMarker({
position: ,
zooms: ,
styles: [{
icon: {
img: 'https://a.amap.com/jsapi_demos/static/resource/img/trees.png',
size: ,
anchor: 'center',
imageSize: ,
imageOffset: [-44, -480],
fitZoom: 17.5,
scaleFactor: 2,
maxScale: 2,
minScale: 0.125
}
}],
zoomStyleMapping: zoomStyleMapping1
});
map.add(trees);
new AMap.Polygon({
cursor: 'pointer',
bubble: true,
path: [, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ],
map: map,
fillOpacity: 0.3,
strokeWeight: 1,
fillColor: 'green'
});
</script>
</body>
</html> 之后代码+资料全部发到github里，盼望大家能关注一下咱的Github
请点个赞+收藏+关注支持一下博主喵！！！
本文转载于博主Koishi_TvT，大家也可以多关注他
原文链接：https://blog.csdn.net/Asuna666w/article/details/142001678
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]