05 ArcGIS JS API 4.12版本监听view-change事件

问题描述

        在JS API 3.X版本下，我们监听视图范围变化、获取当前视图范围这些事情是很轻松的，但是到了4.X的版本，由于API文档里没有了这些事件监听的描述，我们要想实现上述事情，就变得比较困难。所幸在GeoNet上可以找到些答案，接下来我们主要介绍下如何监听view-change事件。

解决方法

1、MapView

import React, { Component } from 'react';
import esriLoader from 'esri-loader';
import appConfig from './appConfig/config';

import './main.css';

const options = {
    url: appConfig.js_api_host+'/4.12/init.js' // 这里的API地址可以是官网提供的CDN，也可在此配置离线部署的地址
};
let outputMessages=null;
class Main extends Component {

    state={
        mainView:null,
    }

    //生命周期函数
    componentDidMount=()=>{
        let _self=this;

        esriLoader.loadModules([
            "esri/Map",
            "esri/views/MapView",
            "esri/WebMap",
            "esri/core/watchUtils"
        ], options) // 传入需要使用的类
            .then(([Map,
                       MapView,
                       WebMap,
                       watchUtils
                   ]) => {
                // doSomeThing

                let map = new Map({
                    basemap: "topo"
                });

                let view = new MapView({
                    container: "mapview",
                    map: map,
                    zoom: 12,
                    center: [104.072044,30.662782] // longitude, latitude
                });

                _self.setState({
                    mainView:view,
                });

                //逻辑代码
                outputMessages = document.getElementById("outputMessages");

                view.map.allLayers.on("change", function(event) {
                    // change event fires after an item has been added, moved or removed from the collection.
                    // event.moved - an array of moved layers
                    // event.removed - an array of removed layers
                    // event.added returns an array of added layers
                    if (event.added.length > 0) {
                        event.added.forEach(function(layer) {
                            let info = "<br> <span> layer added: </span> " + layer.title;
                            _self._displayMessage(info);
                        });
                    }
                });

                watchUtils.whenTrue(view, "stationary", function() {
                    // Get the new center of the view only when view is stationary.
                    if (view.center) {
                        let info =
                            "<br> <span> the view center changed. </span> x: " +
                            view.center.x.toFixed(2) +
                            " y: " +
                            view.center.y.toFixed(2);
                        _self._displayMessage(info);
                    }

                    // Get the new extent of the view only when view is stationary.
                    if (view.extent) {
                        let info =
                            "<br> <span> the view extent changed: </span>" +
                            "<br> xmin:" +
                            view.extent.xmin.toFixed(2) +
                            " xmax: " +
                            view.extent.xmax.toFixed(2) +
                            "<br> ymin:" +
                            view.extent.ymin.toFixed(2) +
                            " ymax: " +
                            view.extent.ymax.toFixed(2);
                        _self._displayMessage(info);
                    }
                });

            })
            .catch(err => {
                console.error(err)
            })
    }

    //显示信息事件
    _displayMessage=(info)=>{
        outputMessages.innerHTML += info;
        outputMessages.scrollTop = outputMessages.scrollHeight;
    }

    render() {
        return (
            <div className="main">
                <div id="mapview" className="mapview">
                    <div id="outputMessages" className="outputMessages"></div>
                </div>
            </div>
        );
    }
}

export default Main;

2、SceneView

import React, { Component } from 'react';
import esriLoader from 'esri-loader';
import appConfig from './appConfig/config';

import './main.css';

const options = {
    url: appConfig.js_api_host+'/4.12/init.js' // 这里的API地址可以是官网提供的CDN，也可在此配置离线部署的地址
};
let outputMessages=null;
class MainSceneView extends Component {

    state={
        mainView:null,
    }

    //生命周期函数
    componentDidMount=()=>{
        let _self=this;

        esriLoader.loadModules([
            "esri/Map",
            "esri/views/SceneView",
            "esri/WebMap",
            "esri/core/watchUtils"
        ], options) // 传入需要使用的类
            .then(([Map,
                       SceneView,
                       WebMap,
                       watchUtils
                   ]) => {
                // doSomeThing

                let map = new Map({
                    basemap: "topo"
                });

                let view = new SceneView({
                    container: "mapview",
                    map: map,
                    zoom: 12,
                    center: [104.072044,30.662782] // longitude, latitude
                });

                _self.setState({
                    mainView:view,
                });

                //逻辑代码
                outputMessages = document.getElementById("outputMessages");

                view.map.allLayers.on("change", function(event) {
                    // change event fires after an item has been added, moved or removed from the collection.
                    // event.moved - an array of moved layers
                    // event.removed - an array of removed layers
                    // event.added returns an array of added layers
                    if (event.added.length > 0) {
                        event.added.forEach(function(layer) {
                            let info = "<br> <span> layer added: </span> " + layer.title;
                            _self._displayMessage(info);
                        });
                    }
                });

                watchUtils.whenTrue(view, "stationary", function() {
                    // Get the new center of the view only when view is stationary.
                    if (view.center) {
                        let info =
                            "<br> <span> the view center changed. </span> x: " +
                            view.center.x.toFixed(2) +
                            " y: " +
                            view.center.y.toFixed(2);
                        _self._displayMessage(info);
                    }

                    // Get the new extent of the view only when view is stationary.
                    if (view.extent) {
                        let info =
                            "<br> <span> the view extent changed: </span>" +
                            "<br> xmin:" +
                            view.extent.xmin.toFixed(2) +
                            " xmax: " +
                            view.extent.xmax.toFixed(2) +
                            "<br> ymin:" +
                            view.extent.ymin.toFixed(2) +
                            " ymax: " +
                            view.extent.ymax.toFixed(2);
                        _self._displayMessage(info);
                    }
                });

            })
            .catch(err => {
                console.error(err)
            })
    }

    //显示信息事件
    _displayMessage=(info)=>{
        outputMessages.innerHTML += info;
        outputMessages.scrollTop = outputMessages.scrollHeight;
    }

    render() {
        return (
            <div className="main">
                <div id="mapview" className="mapview">
                    <div id="outputMessages" className="outputMessages"></div>
                </div>
            </div>
        );
    }
}

export default MainSceneView;