使用openlayers加载离线地图什么是Openlayers?基础类简单了解示例代码

74 阅读 0 评论 49 点赞

我是靠谱客的博主勤劳月饼，这篇文章主要介绍使用openlayers加载离线地图什么是Openlayers?基础类简单了解示例代码，现在分享给大家，希望可以做个参考。

什么是Openlayers?

简单来说，Openlayers是一个基于Javacript开发，免费、开源的前端地图开发库，使用它，可以很容易的开发出WebGIS系统。目前Openlayers支持地图瓦片、矢量数据等众多地图数据格式，支持比较完整的地图交互操作。目前OpenLayers已经成为一个拥有众多开发者和帮助社区的成熟、流行的框架，在国内外的GIS相关行业中得到了广泛的应用。

基础类简单了解

Map

Map这个类代表一个地图容器，它拥有一个target属性，target属性设置的是地图要挂接到哪个dom节点上进行渲染。

Layer

Layer类，其实就是图层，图层就是空间数据可视化的一种表现

View

地图有放大、缩小、设置中心点的功能，Openlayers把这些关于视图变化的功能封装到了一个叫做View的类里面

示例代码

引入ol文件，路径改成自己本地或网络的：

复制代码

1
2
3
<link rel="stylesheet" href="../openlayerJs/ol.css" type="text/css">
<script src="../openlayerJs/ol.js"></script>

css:

复制代码

1
2
3
4
5
6
7
 * {margin:0; padding:0;}
    html,body{height:100%;}
      .map {
        height:100%;
        width: 100%;
      }

js:

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
	let mapUrl ='http://218.200.69.7:12000/CHN/googlemaps/satellite/{z}/{x}/{y}.jpg';	//离线地图地址
	let mapCenter=[112.286051,30.365276];
	let terrain = new ol.layer.Tile({
	  source: new ol.source.XYZ({
		  projection: "EPSG:3857",
		  url: mapUrl
	  })
	});
	var views = new ol.View({
	  projection: ol.proj.get('EPSG:3857'),
	  center: ol.proj.transform(mapCenter, 'EPSG:4326', 'EPSG:3857'),//无偏移时 ol.proj.fromLonLat([112.286051,30.365276]),
	  zoom: 15,
	  minZoom: 3,
	  maxZoom: 21
	});	
	var map = new ol.Map({
		target:'map',
		logo: 'false',
		// controls: ol.control.defaults({ attribution: false, zoom: false, rotate: false }).extend([
		// 	//添加比例尺控件
		// 	new ol.control.ScaleLine({
		// 		units: 'metric',
		// 		target: 'scalebar',
		// 		className: 'ol-scale-line'
		// 	})
		// ]),
		layers: [terrain],
		view:views
	});  
  }