2

I am making a map of Krasnoyarskiy krai subject of Russia. I have defined a custom projection that should be used for this area using proj4 string. I need to show lat/long grid only for this territory. But in doesn't work as I expected.

At first, even that I set constraints for the projection world extent worldExtent: [72, 40, 120, 85], there are still extra latitude lines (pic #1). Secondly, there are empty parts of longitude lines in the north (pic #1). Finally, if I move my map to the northern areas lines are being built absolutely incorrect. (pic #2).


enter image description here enter image description here

Here is my HTML:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>graticule</title>
    <link rel="stylesheet" href="./libs/v6.1.1-dist/ol.css">
    <link rel="stylesheet" href="./styles.css">
</head>
<body>
    <div id='js-map' class='map'></div>
    <script src='./libs/proj4js/proj4-src.js'></script>
    <script src='./libs/proj4js/proj4.js'></script>
    <script src='./libs/v6.1.1-dist/ol.js'></script>
    <script src='./main.js'></script>
</body>
</html>

My JS:

window.onload = init;

function init() {

    proj4.defs('customProj1',"+proj=tmerc +lat_0=0 +lon_0=95 +k=0.998 +x_0=0 +y_0=0 +ellps=WGS84 +units=m +no_defs");
    ol.proj.proj4.register(proj4);

    const customProj1 = new ol.proj.Projection({
        code: 'customProj1',
        extent: [-90099540.605703328, -90099540.605703328,
        90099540.605703328, 90099540.605703328],
        worldExtent: [72, 40, 120, 85],
        global: false
    });

    const osmStandartMap = new ol.layer.Tile({
        source: new ol.source.OSM({
            url: "https://{a-c}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png"
        }),
        visible: true,
        title: 'OSMStandart'
    });

    const graticule = new ol.layer.Graticule({
        strokeStyle: new ol.style.Stroke({
            color: 'rgba(1, 1, 1, 0.9)',
            width: 0.5
        }),
        showLabels: true,
        intervals: [12, 8],
        targetSize: 100,
        wrapX: true,
        visible: true,
        title: 'graticule'

    })

    const map = new ol.Map({
        view: new ol.View({
            center: [25630.78311572224, 7235308.151852912],
            zoom: 8,
            projection: customProj1
        }),
        target: 'js-map'
    });

    const layerGroup = new ol.layer.Group({
        layers: [
            osmStandartMap,
            graticule
        ],
    });
    map.addLayer(layerGroup);
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.