1.使用OpenLayers6(ol6)加载天地图和高德地图

(文末有代码下载地址)

最近开始学习OpenLayers的相关知识了,打算以后学一点就写一点博客,一来是给自己的笔记,二来是见证自己的成长,三来是希望倘若有大佬看到可以帮助批评指正~

最近也期末了,估计更新缓慢,但是会一直坚持学习的~

今天是使用OpenLayers6加载天地图和高德地图,主要就是创建一个ol.Map类的对象,再与显示区域的DOM的对象进行绑定就可以了,关于ol.layer.Tile的文档可见https://openlayers.org/en/latest/apidoc/module-ol_layer_Tile-TileLayer.html,关于ol.view的文档可见https://openlayers.org/en/latest/apidoc/module-ol_View-View.html,下图就本次需要用到的属性构建了一个简单的导图,显示天地图需要一个开发者key,但是高德居然不需要,表示很惊奇。

此处是图片

下面是使用OpenLayers6加载天地图的代码

<!DOCTYPE html>
<html lang="ch">
<head>
	<meta charset="UTF-8">
	<title>加载显示天地图</title>
	<link href="css/ol.css" rel="stylesheet" type="text/css">
	<script src="libs/ol6/ol.js" type="text/javascript"></script>
	<style type="text/css">
		#map{
			width: 100%;
			height: 100%;
			position: absolute;
		}
	</style>
</head>
<body>
	<div id="map"></div>
	<script type="text/javascript">
		/*"use strict";*/
		/*通常使用WGS84存储数据,使用伪墨卡托显示数据
		* EPSG:4326 (WGS84);EPSG:3857 (Pseudo-Mercator)*/
		var center = ol.proj.transform([114.50, 38.00], "EPSG:4326", "EPSG:3857");
		var map=new ol.Map({
			target:'map',
			/*loadTilesWhileInteracting:true,*/
			//layers是图层数组,一个数组元素就是一个图层,本例中有两个图层,分别是图网图层和文字标注图层
			layers: [
				new ol.layer.Tile({
					/*title:"天地图路网",
					crossOrigin:"anonymous",
					wrapX:false,*/
					source: new ol.source.XYZ({
						url: 'https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=在这里粘贴开发者密钥',
					}),
					/*isGroup: true,
					name: '天地图路网'*/
				}),

				new ol.layer.Tile({
					/*title: "天地图文字标注",
					attributions:"天地图的属性描述",
					wrapX: false,*/
					source: new ol.source.XYZ({
						url: 'https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=在这里粘贴开发者密钥'
					}),
					/*isGroup: true,
					name: '天地图文字标注'*/
				})
			],
			view: new ol.View({
				center:center,
				zoom:11,
			})
		});
	</script>
</body>
</html>

下面是使用OpenLayers6加载高德地图的代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>加载显示高德地图</title>
	<link href="css/ol.css" rel="stylesheet" type="text/css">
	<script src="libs/ol6/ol.js" type="text/javascript"></script>
	<style type="text/css">
		#map{
			width: 100%;
			height: 100%;
			position: absolute;
		}
	</style>
</head>
<body>
<div id="map"></div>
<script>
	//请求高德图层
	var AMapLayer = new ol.layer.Tile({
		source: new ol.source.XYZ({
			url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
		})
	});

	//将图层添加到map对象中
	var map = new ol.Map({
		layers:[AMapLayer],
		target: 'map',
		view: new ol.View({
			center: [114.5, 38],
			zoom: 10,
			minZoom:4,
			maxZoom:10,
			projection: 'EPSG:4326'
		})
	});
</script>
</body>
</html>

所有代码下载地址:

链接:https://pan.baidu.com/s/1pyDqACp-iMUFCe2FqDxhWw 
提取码:5p37 
复制这段内容后打开百度网盘手机App,操作更方便哦

相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页