本博客合集是我的openlayers學(xué)習(xí)筆記，希望能幫助到剛開始接觸openlayers的同學(xué)
@commnet 所用openlayers版本：v5.3.0
@commnet 閱讀本文前需要對(duì)前端知識(shí)有一定的了解
@comment 本文內(nèi)容只提供參考，建議結(jié)合openlayers官網(wǎng)的API和examples來學(xué)習(xí)

本文使用ol.Graticule對(duì)象在地圖上渲染一個(gè)坐標(biāo)網(wǎng)。

下面的例子給出了一個(gè)簡(jiǎn)單的、默認(rèn)樣式的地圖坐標(biāo)網(wǎng)。

• 創(chuàng)建地圖容器

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

• 創(chuàng)建一個(gè)地圖對(duì)象

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
    })
});

• 創(chuàng)建一個(gè)ol.Graticule對(duì)象

var graticule = new ol.Graticule({
    //map參數(shù)指向了需要渲染坐標(biāo)網(wǎng)的地圖對(duì)象
    map: map
});

效果如下

其他參數(shù)

showLabels參數(shù)可控制坐標(biāo)網(wǎng)的每條經(jīng)緯度是否顯示標(biāo)簽，默認(rèn)為false。

lonLabelStyle和latLabelStyle參數(shù)可控制坐標(biāo)網(wǎng)標(biāo)簽的樣式，須傳入ol.style.Text對(duì)象，如不指定，將采用默認(rèn)值。

下面的例子給出了顯示經(jīng)緯度的標(biāo)簽，并指定樣式

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參數(shù)可控制坐標(biāo)網(wǎng)的線型，須傳入ol.style.Stroke對(duì)象，如不指定，將采用默認(rèn)值。

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

targetSize參數(shù)可控制坐標(biāo)網(wǎng)的單元格大小，單位是px，默認(rèn)為100。

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

其他參數(shù)請(qǐng)參閱官方API。