地图坐标网#openlayers入门笔记#

本博客合集是我的openlayers学习笔记，希望能帮助到刚开始接触openlayers的同学

@commnet 所用openlayers版本：v5.3.0

@commnet 阅读本文前需要对前端知识有一定的了解

@comment 本文内容只提供参考，建议结合openlayers官网的API和examples来学习

本文使用ol.Graticule对象在地图上渲染一个坐标网。

下面的例子给出了一个简单的、默认样式的地图坐标网。

• 创建地图容器

<div id="map" class="map"></div>

• 创建一个地图对象

var map = new ol.Map({
	layers: [
		new ol.layer.Tile({
			source: new ol.source.OSM()
		})
	],
	target: 'map',
	view: new ol.View({
		center: ol.proj.fromLonLat([0,0]),
		zoom: 5
	})
});

• 创建一个ol.Graticule对象

var graticule = new ol.Graticule({
    //map参数指向了需要渲染坐标网的地图对象
	map: map
});

效果如下

其他参数

showLabels参数可控制坐标网的每条经纬度是否显示标签，默认为false。

lonLabelStyle和latLabelStyle参数可控制坐标网标签的样式，须传入ol.style.Text对象，如不指定，将采用默认值。

下面的例子给出了显示经纬度的标签，并指定样式

var graticule = new ol.Graticule({
	map: map,
	showLabels: true,
	lonLabelStyle: new ol.style.Text({
		font: '12px Calibri,sans-serif',
		textBaseline: 'bottom',
		stroke: new ol.style.Stroke({
			color: 'red',
			width: 1
		})
	}),
	latLabelStyle: new ol.style.Text({
		font: '12px Calibri,sans-serif',
		textBaseline: 'bottom',
		stroke: new ol.style.Stroke({
			color: 'blue',
			width: 1
		})
	})
});

strokeStyle参数可控制坐标网的线型，须传入ol.style.Stroke对象，如不指定，将采用默认值。

var graticule = new ol.Graticule({
	map: map,
	strokeStyle: new ol.style.Stroke({
		color: 'blue',
		width: 2,
		lineDash: [4]
	})
});

targetSize参数可控制坐标网的单元格大小，单位是px，默认为100。

var graticule = new ol.Graticule({
	map: map,
	targetSize: 20
});

其他参数请参阅官方API。