我们用到的天地图是栅格瓦片地图
瓦片地图(瓦片地图金字塔模型):从地图图片(第0层)的左上角开始,从左至右、从上到下进行切割,分割到第N-1层,构成整个瓦片金字塔。(N代表的是缩放级别)
第0层(底层):缩放级别最高(放得最大)、比例尺最大(显示的范围小、内容详细、精度高)、分辨率最高(最清晰),第N-1层反之。
STEP1:准备加载资源(天地图、openlayers)
天地图资源获取
进入地图API界面,先申请一下Key。
申请完毕后回到地图API界面,往下滑到最后,找到“地图瓦片获取”复制链接。
关于这个链接的使用:
1、等号后要替换你自己账号申请的专属Key
2、如果你要改变加载的东西,只需要将下图红框里的内容(例如vec_c)替换到上面链接中(img_w)处即可。
OpenLayers资源获取
方法一:直接复制官网所提供的链接
进入OpenLayers官网—进入最新版界面(例如我进的是v7.1.0)
进入以后直接复制相关链接即可
方法二:下载相关版本安装包
一般会提供给你两个包,只需下载包括例子和文件那个即可(红色框中)
其他版本下载:首页滑到底——点入想下载的版本(以6.15.1示例)——再滑到底找到红框中安装包下载即可
STEP2:在Visual Studio新建空白网页
打开Visual Studio点击“创建新项目”
筛选选择“ASP.NET Web应用程序(.NET Framework)”,这里以C#语言示例
修改好你的项目名和保存地址后,点击创建
然后选择“空”,双击创建
然后找到“项目”菜单栏,选择“添加新项”
选择“web”菜单下的“HTML页”,取好名字后,点击添加即可
STEP3:正式开始写啦
我们先来写“<head></head>”这部分内容
这部分我们要写三块内容(标题title、资源链接script、样式style)
1、标题部分(<title></title>),只需在中间写上你想取的标题名即可
2、链接部分<script></script>,(有两种方法,还记得我们在第一步准备资源的时候说的嘛,我们可以直接复制官网链接,也可以下载安装包)
(1)直接复制链接最方便,把官网上那个直接复制到链接部分即可
<script src="https://cdn.jsdelivr.net/npm/ol@v7.1.0/dist/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.1.0/ol.css">
(2)如果你下载了安装包,需要两步
首先你需要解压完你的安装包后找到以下文件:
ol.css、ol.css.map、ol.js、ol.js.map(这里以v5.3.0版本为例,提供文件所在目录)
然后在Visual Studio中新建一个文件夹,这四个文件复制进去
然后按照以下代码,把你的文件位置放进去
<script src="你建的文件夹名/ol.js" type="text/javascript"></script>
<link href="你建的文件夹名/ol.css" rel="stylesheet" type="text/css">
3、样式部分<style></style>
<style type="text/css">
.map {
width: 100%;
height: 100%;
position: absolute;
}
</style>
以上<head>部分就全部完成了,附上完整代码
<head>
<meta charset="utf-8" />
<title>天地图加载</title>
<script src="https://cdn.jsdelivr.net/npm/ol@v7.1.0/dist/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.1.0/ol.css">
<style type="text/css">
.map {
width: 100%;
height: 100%;
position: absolute;
}
</style>
</head>
接下来我们来写<body></body>部分
这部分包括:建一个地图容器(ol.map)、实例化一个对象用来调用加载图层方法(map)、实例化两个瓦片图层一个用来放底图另一个用来放注记(layer1、layer2)、调用加载方法把两个图层加载到容器里(map.addLayer())。
1、建一个地图容器
<div id="map"></div>
<script type="text/javascript">
2、实例化一个对象
var map = new ol.Map({
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
3、实例化两个瓦片图层
var layer1 = new ol.layer.Tile({
title: "底图图层",
source: new ol.source.XYZ({
url: "步骤一中你所准备的链接",
wrapX: false
}),
});
var layer2 = new ol.layer.Tile({
title: "注记图层",
source: new ol.source.XYZ({
url: "步骤一中你所准备的链接",
wrapX: false
}),
});
4、用对象调用加载方法(最后三个结束标签不要忘记)
map.addLayer(layer1);
map.addLayer(layer2);
</script>
</body >
</html >
这样就完成了整个加载天地图的过程,最后附上调试结果图以及完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>给你的网页取个名字</title>
<script src="https://cdn.jsdelivr.net/npm/ol@v7.1.0/dist/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.1.0/ol.css">
<style type="text/css">
.map {
width: 100%;
height: 100%;
position: absolute;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
var layer1 = new ol.layer.Tile({
title: "底图图层",
source: new ol.source.XYZ({
url: "第一步你所准备的瓦片地图链接",
wrapX: false
}),
});
var layer2 = new ol.layer.Tile({
title: "注记图层",
source: new ol.source.XYZ({
url: "第一步你所准备的瓦片地图链接",
wrapX: false
}),
});
map.addLayer(layer1);
map.addLayer(layer2);
</script>
</body >
</html >