The key-down event invalid in zoom out when using ARCGIS JavaScript in EPSG:3826

Question

The key-down event invalid in zoom out when using ARCGIS JavaScript in EPSG:3826

39 views Asked by abramhum At 26 December 2023 at 07:14

I am a newbie to ARCGIS JAVASCRIPT. And I meet a problem when the tileLayer load in, and the zoom controller I set in the top-right is not work well. The plus button can only be invoked event two or three times, and then not working any more, and the minus button can work well. In another aspect of moues, the mouse-wheel event can zoom out/in in perfect behavior. my version is 4.10, my environment is node.js with express, the code snippet is as following:

const basemap = new Basemap({
    baseLayers: [
        new TileLayer({
            url: "https://arcgis.tpgos.gov.taipei/arcgis/rest/services/ED/GD_Plain_Service/MapServer",
            title: "Basemap",
            crossOrigin: 'anonymous',
            spatialReference: {
                wkid: 102443
            }
        })
    ],
    title: "basemap",
    id: "basemap",
    spatialReference: {
        wkid: 102443
    }
});


// Create a map using the MapImageLayer
var map = new Map({
    basemap: basemap
});


var view = new MapView({
    container: "divmap",
    map: map,
    zoom: 3,
    extent: {
        xmin: 296938.73458000005,
        ymin: 2776832.77203,
        xmax: 301876.2566600001,
        ymax: 2781271.34259,
    },
    crossOrigin: 'anonymous',
    spatialReference: {
        wkid: 102443
    } // Set the spatial reference
   
});
view.ui.move("zoom", "top-right");

is anyone know the exactly reason? and how to fix that, thanks a lot.

Original Q&A

There are 1 answers

**cabesuon** · Answer 1 · 2024-01-09T16:09:56+00:00

It is actually a weird issue, not sure what is causing it. But I give you a bit of a dirty solution, just hack the zoomIn method of the Zoom widget. In order to do that you will need a new view model for the widget.

<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Hack Zoom zoomIn Method Sample | ArcGIS Maps SDK for JavaScript 4.28</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>

    <link rel="stylesheet" href="https://js.arcgis.com/4.28/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.10/"></script>

    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/Basemap",
            "esri/layers/TileLayer",
            "esri/widgets/Zoom",
            "esri/widgets/Zoom/ZoomViewModel",
        ], (Map, MapView, Basemap, TileLayer, Zoom, ZoomVM) => {
            const basemap = new Basemap({
                baseLayers: [
                    new TileLayer({
                        url: "https://arcgis.tpgos.gov.taipei/arcgis/rest/services/ED/GD_Plain_Service/MapServer",
                        title: "Basemap",
                        crossOrigin: 'anonymous',
                        spatialReference: {
                            wkid: 102443
                        }
                    })
                ],
                title: "basemap",
                id: "basemap",
                spatialReference: {
                    wkid: 102443
                }
            });

            const map = new Map({
                basemap
            });

            const view = new MapView({
                container: "viewDiv",
                map,
                zoom: 3,
                extent: {
                    xmin: 296938.73458000005,
                    ymin: 2776832.77203,
                    xmax: 301876.2566600001,
                    ymax: 2781271.34259,
                },
                spatialReference: {
                    wkid: 102443
                }
            });
            view.ui.components = [];
            let zoomVM = new ZoomVM({view});
            zoomVM.zoomIn = () => {
                view.goTo({center: view.center, zoom: view.zoom + 1});
            };
            let zoom = new Zoom({
                viewModel: zoomVM
            });
            view.ui.add(zoom, "top-right");
        });
    </script>
</head>

<body>
    <div id="viewDiv"></div>
</body>

</html>

TechQA.

The key-down event invalid in zoom out when using ARCGIS JavaScript in EPSG:3826

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in GIS

Related Questions in ARCGIS

Related Questions in ARCGIS-JS-API

Popular Questions

Popular Tags

Trending Questions