9-地图坐标网

本博客合集是我的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。