arcGis在vue里事件操作

发布时间:2023-11-18 17:30

vue安装esri-loader

npm install --save esri-loader
或者
yarn add esri-loader
npm地址:https://www.npmjs.com/package/esri-loader
esri的api地址:https://developers.arcgis.com/javascript/latest/api-reference/esri-Basemap.html

npm地址:esri-loader - npm

介绍教程和api均在npm地址里有,这里不再赘述

esri-loader添加各种事件

methods: {
    doMap(){
        // this will lazy load the ArcGIS API
        // and then use Dojo\'s loader to require the classes
        loadModules([\'esri/views/MapView\', \'esri/WebMap\'])
        .then(([MapView, WebMap]) => {
            // then we load a web map from an id
            var webmap = new WebMap({
              portalItem: { // autocasts as new PortalItem()
                  id: \'f2e9b762544945f390ca4ac3671cfa72\'
              }
            });
            // and we show that map in a container w/ id #viewDiv
            var view = new MapView({
              map: webmap,
              container: \'viewDiv\'
            });
            view.on(\"click\",function(e){
              console.log(\'这里是点击事件\',e)
            })
            view.on(\"mouse-wheel\", (e) => {
              console.log(\'这里是鼠标滚轮事件\',e)
            });
            // 全部的鼠标事件如下:
            const events = [
              \"pointer-enter\",    //鼠标进入
              \"pointer-leave\",    //鼠标离开
              \"pointer-move\",   //鼠标移动
              \"pointer-down\",   //鼠标点击
              \"pointer-up\",   //鼠标点击结束
              \"immediate-click\",    //直接点击
              \"click\",    //点击
              \"immediate-double-click\",   //直接双击
              \"double-click\",   //双击
              \"mouse-wheel\",    //鼠标滚轮
              \"drag\",   //拖
              \"hold\",   //持有
              \"key-down\",   //响应按键
              \"key-up\",   //提高
              \"focus\",    //焦点
              \"blur\",   //模糊
              \"resize\"    //调整
            ];
        })
        .catch(err => {
            // handle any errors
            console.error(err);
        });
    }
  }

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号