// All material copyright ESRI, All Rights Reserved, unless otherwise specified.
// See https://js.arcgis.com/4.10/esri/copyright.txt for details.
//>>built ; ;sdfsd sd;;;
define('esri/widgets/Widget esri/widgets/support/widget'.split(' '), function(Widget, widget) {
console.log("baseButtonWedgit")
var baseButtonWedgit = Widget.createSubclass({
constructor: function(options) {
if (options) {
dojo.mixin(this, options);
}
},
cancelGo: function() {},
go: function() {
alert('go go go');
},
_go: function() {
if (this.go) {
this.go.call(this,this);
}
},
getLable: function() {
return this.lable || '标题';
},
getTitle: function() {
return this.title || 'title';
},
getDivClass :function(){
return {};
},
getIconClass :function(){
return {};
},
render: function() {
var title = this.getTitle(this);
var lable = this.getLable(this);
var divClass = this.getDivClass(this);
var iconClass = this.getIconClass(this);
return widget.tsx(
'div',
{
bind: this,
class: this.classes('esri-home esri-widget--button esri-widget',divClass),
role: 'button',
tabIndex: 0,
onclick: this._go,
onkeydown: this._go,
'aria-label': lable,
title: title,
},
widget.tsx('span', {
'aria-hidden': 'true',
class: this.classes('esri-icon', iconClass),
innerText: this.title, }),
widget.tsx(
'span',
{
class: 'esri-icon-font-fallback-text',
},
'button'
)
);
},
});
return baseButtonWedgit;
});
    /**
* 添加工具按钮
*/
this.addButtonWedgit = (options = {}) => {
// options.map = map;
// options.view = view;
const button = new BaseButtonWedgit(options);
view.ui.add(button, {
position: options.position || 'bottom-right',
});
return button;
};
const btn1 = this.pmap.addButtonWedgit({
go: (e) => {
const {domNode} = e;
console.log(domNode)
if (this.maptype === '3D') {
this.maptype = '2D';
self.setState({ is3D: false });
btn1.title = '二维地图'
btn1.set("title", '二维地图');
} else {
this.maptype = '3D';
btn1.title = '三维地图'
self.setState({ is3D: true });
}
},
getTitle:()=>this.maptype === '3D'?"二维地图":"三维地图" ,
getIconClass:()=>this.maptype === '3D'?{"esri-icon-2d":true}:{"esri-icon-3d":true}
});
btn1.set("title", '三维地图');
btn1.set("maptype", '2D');
btn1.set("buttonClass", 'buttonClass');
}

arcgis js api 4.X 自定义工具按钮的更多相关文章

  1. ArcGIS JS API使用PrintTask打印地图问题解决汇总

    环境:来源于工作过程,使用的API是  arcgis js 3.*  3系API,4.*暂时没测试: 1.数据与打印服务跨域情况下,不能打印问题. 一般情况下,我们发布的数据服务和打印服务是在一台服务 ...

  2. 基于ArcGIS JS API的在线专题地图实现

    0 引言     专题地图是突出而深入的表示一种或几种要素或现象,即按照地图主题的要求,集中表示与主题有关内容的地图.专题地图的专题要素多种多样,分类方法也多种多样,根据专题地图表现数据的特点可分为定 ...

  3. geoserver图层属性查询及查询结果转换为arcgis js api能使用的格式

    一个项目使用了ArcGIS JS API开发GIS展示层,但GIS服务使用了Geoserver,这时加载Geoserver数据和查询数据就和之前完全不一样了,以下介绍下我使用ArcGIS JS API ...

  4. 关于ueditor与arcgis js api同用会报错的问题

    在ueditor与arcgis js api共用时,需要将ueditor\third-party\zeroclipboard\ZeroClipboard.js中的 if (typeof define ...

  5. arcgis js api 本地化配置

    配置arcgis library 根目录的init.js的 "baseUrl:",使其指向正确的地址

  6. Arcgis js API使用wmts方式加载GeoWebCache中的切片地图(转载)

    使用GeoWebCache的主要目的是其独立安装版能够发布arcgis的切片.我们知道,使用openlayer是调用geoserver最方便的方法,那么在发布完arcgis的切片后,怎么用arcgis ...

  7. ArcGIS JS API多线程克里金插值

        最近做关于雨量插值的项目,本来使用后台的GP工具做的,但是处理时间比较长需要十几秒钟左右,所以研究怎么通过前台来计算.     参考下克里金例子,思路是生成要计算区域的100乘以100网格,然 ...

  8. ArcGIS js api 手动构建FeatureLayer

    坐标系 var spatialReference = new SpatialReference(4326);1要素坐标点 var pointArr = [ new Point(116.94431351 ...

  9. ArcGIS JS Api 4.x修改三维球背景技巧

        通过修改scenceview.js中tileBackground和defaultTileBackground中的png的base64编码就可以达到要求. 4.8中通过修改scenceview. ...

随机推荐

  1. 百度地图API 基本用法

    百度地图 百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,可帮助您在网站中构建功能丰富.交互性强的地图应用,支持PC端和移动端基于浏览器的地图应用开发,且支持H ...

  2. 「白帽挖洞技能」YxCMS 1.4.7 漏洞分析

    这几天有小伙伴留言给我们,想看一些关于后台的漏洞分析,今天i春秋选择YxCMS 1.4.7版本,理论内容结合实际案例进行深度分析,帮助大家提升挖洞技能. 注:篇幅较长,阅读用时约7分钟. YXcms是 ...

  3. 【Android】天气应用

    模仿华为的"天气"应用写的一个小Demo.部分功能.动画效果没有实现,也没有过多考虑性能.Bug等其它方面的因素.写这个Demo的初衷是想熟悉下目前网上常用的一些框架. Demo采 ...

  4. Google Analytics 学习笔记二 —— GA部署

    一.直接部署 直接复制GA跟踪代码 放到所有页面 跟踪代码放到 "head"前面 二.GTM部署方法一 三.GTM部署方法二 Tacking ID 四.测试.参数配置与调优

  5. 章节十一、6-操作集合里面的Web元素

    以下演示操作以该网站为例:https://learn.letskodeit.com/p/practice 一.如何操作多个元素(把多个元素放到集合容器中然后操作它们) 列如我们需要操作这些单选框:: ...

  6. Lodash 严重安全漏洞背后 你不得不知道的 JavaScript 知识

    摘要: 详解原型污染. 原文:Lodash 严重安全漏洞背后 你不得不知道的 JavaScript 知识 作者:Lucas HC Fundebug经授权转载,版权归原作者所有. 可能有信息敏感的同学已 ...

  7. element-ui的tag组件关闭事件失效的原因

    问题如上,原因是忘了加上一个函数 @close="handleClose(tag)" <el-tag :key="tag" v-for="tag ...

  8. 数据库系统(五)---MySQL基础

    一.SQL基本概念: SQL 已经成为关系数据库的标准语言,是一种数据库查询和程序设计语言,用 于存取数据以及查询.更新和管理关系数据库系统. 功能不仅仅是查询,还包括数据定义.数据操纵和数据控制等于 ...

  9. 每天一套题打卡|河南省第八届ACM/ICPC

    A 挑战密室 化学方程式求分子量 这题我懒得写了 可以用map<string,int>哈希表,表示每种分子的相对分子质量 之后,从头遍历到尾. 1.数字:连读直到不是数字 2.字母:连读直 ...

  10. 201871010118-唐敬博《面向对象程序设计(java)》第十二周学习总结

    博文正文开头格式:(2分) 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.co ...