绘制工具的App适配，方法初步选定，需要继续逻辑处理

src/components/CrMap/CrImageServerLayer.js

@@ -119,6 +119,8 @@ class CrImageServerLayer {
 		this._isUpdateTile = show;
 		/* 是否输出测试信息 */
 		this._isDebug = true;
+		/* 缓存 */
+		this._chacheImages = new Map();
 		/* 创建一个线程 用于处理移除任务 */
 		this._sendTask = true;
 		let workerBlob = new Blob([`(${downloadWorker.toString ()})()`]); // 把函数转成一个自执行函数
@@ -149,6 +151,17 @@ class CrImageServerLayer {
 			case CrImageServerLayer.ProviderType.UrlTemplateImageryProvider:
 				this._provider = new Cesium.UrlTemplateImageryProvider(this._config);
 				break;
+			case CrImageServerLayer.ProviderType.WebMapTileServiceImageryProvider:
+				this._provider = new Cesium.WebMapTileServiceImageryProvider({
+					url: _self._config.url,
+					layer: 1,
+					style: 'default',
+					format: 'image/png',
+					tileMatrixSetID: 'default028mm',
+					maximumLevel: _self._config.maxLevel ? _self._config.maxLevel : 19,
+					minimumLevel: _self._config.minLevel ? _self._config.maxLevel : 0,
+				});
+				break;
 		}
 		/* 服务提供者判断 */
 		if (this._provider === undefined) {
@@ -177,9 +190,52 @@ class CrImageServerLayer {
 					_self._renderTiles();
 				}
 			});
+
+			/* 测试 */
+			// for (let i = 0; i < 20; i++) {
+			// 	/* 找到对应级别的子节点 */
+			// 	let filterQuadTree = quadTree.filter(function(obj) {
+			// 		return obj.level === i;
+			// 	})
+			// 	/* 创建子节点 */
+			// 	for (let findQuadTree of filterQuadTree) {
+			// 		let rectangle = findQuadTree.rectangle;
+			// 		/* 将该矩形按照四叉树规则分割为4个高层级的矩形 */
+			// 		let rect1 = Cesium.Rectangle.subsection(rectangle, 0, 0, 0.5, 0.5);
+			// 		let rect2 = Cesium.Rectangle.subsection(rectangle, 0.5, 0, 1.0, 0.5);
+			// 		let rect3 = Cesium.Rectangle.subsection(rectangle, 0, 0.5, 0.5, 1.0);
+			// 		let rect4 = Cesium.Rectangle.subsection(rectangle, 0.5, 0.5, 1.0, 1.0);
+			// 		/* 查询当前节点的行列号 */
+			// 		let centerPoint = Cesium.Rectangle.center(rectangle);
+			// 		let xy = _self._tilingScheme.positionToTileXY(centerPoint, 0);
+			// 		findQuadTree.x = xy.x;
+			// 		findQuadTree.y = xy.y;
+
+			// 	}
+			// }
+
+			// let quadTree = new QuadTreeTile(0, 0, _self._tilingScheme, _self._rectangle, 0, 20);
+			// _self._console(quadTree);
+			/* 找到有效数据 */
+			// _self._findTile(quadTree);
 		})
 	}
 
+	_findTile(tile) {
+		// this._console(tile);
+		if (tile.children.length > 0) {
+			if (Cesium.Rectangle.intersection(tile.rectangle, this._rectangle)) {
+				this._console(tile.x, tile.y, tile.level);
+			}
+			this._findTile(tile.children[0]);
+			this._findTile(tile.children[1]);
+			this._findTile(tile.children[2]);
+			this._findTile(tile.children[3]);
+		} else {
+			this._console('结束');
+		}
+	}
+
 	/**
 	 * 生成GUID随机数
 	 */
@@ -481,17 +537,26 @@ class CrImageServerLayer {
 							imageOrientation: 'flipY',
 						});
 						primise.then(function(resImage) {
-							let renderPrimitive = _self._primitives.getById(tile.key);
+							let renderPrimitive = _self._primitives.getById(tile
+								.key);
 							if (renderPrimitive !== undefined) {
-								let canvas = _self._createCanvas(tile, resImage, _self._isDebug);
-								renderPrimitive.appearance = _self._createMaterialImageAppearance(
-									canvas);
+								let canvas = _self._createCanvas(tile, resImage,
+									_self
+									._isDebug);
+								renderPrimitive.appearance = _self
+									._createMaterialImageAppearance(
+										canvas);
 								/* 修改集合中内容 */
 								if (_self._renderPrimitives.has(tile.key)) {
-									let item = _self._renderPrimitives.get(tile.key);
+									let item = _self._renderPrimitives.get(tile
+										.key);
 									item.renderImage = true;
 									_self._renderPrimitives.set(tile.key, item);
 								}
+								/* 缓存起来备用 */
+								// if (!_self._chacheImages.has(tile.key)) {
+								// 	_self._chacheImages.set(tile.key, resImage);
+								// }
 							}
 							/* 释放图片资源 */
 							image.close();
@@ -925,5 +990,39 @@ CrImageServerLayer.ProviderType = Object.freeze({
 	WebMapTileServiceImageryProvider: 'WebMapTileServiceImageryProvider',
 })
 
+function QuadTreeTile(x, y, tilingScheme, dataRectangle, depth, maxDepth) {
+	this.x = x;
+	this.y = y;
+	this.level = depth; //最小层数 this.maxDepth = maxDepth; //最大分几层 下面规则就是每次4分直到到达规定最大层数 
+	// this.rectangle = tilingScheme.tileXYToRectangle(this.x, this.y, this.level);
+	// let tempRectangle = tilingScheme.tileXYToNativeRectangle(this.x, this.y, this.level);
+	// if (Cesium.Rectangle.intersection(tempRectangle, dataRectangle)) {
+	// 	console.log('===>>>', this.x, this.y, this.level, this.rectangle);
+	// 	// let center = Cesium.Rectangle.center(this.rectangle);
+	// 	// let xy = tilingScheme.positionToTileXY(center);
+	// 	// if (xy !== undefined) {
+	// 	// 	console.log('===>>>', xy.x, xy.y, this.level);
+	// 	// }
+
+	// }
+	if (this.level === 11 && this.x === 1695 && this.y === 808) {
+		console.log('===>>>', this.x, this.y, this.level, this.rectangle);
+	}
+	if (depth < maxDepth) {
+		this.children = [
+			// 北西
+			new QuadTreeTile(this.x * 2, this.y * 2, tilingScheme, dataRectangle, depth + 1, maxDepth),
+			// 北东
+			new QuadTreeTile(this.x * 2, this.y * 2 + 1, tilingScheme, dataRectangle, depth + 1, maxDepth),
+			// 南西
+			new QuadTreeTile(this.x * 2, this.y * 2 + 1, tilingScheme, dataRectangle, depth + 1, maxDepth),
+			// 南东
+			new QuadTreeTile(this.x * 2 + 1, this.y * 2 + 1, tilingScheme, dataRectangle, depth + 1, maxDepth),
+		]
+	} else {
+		this.children = []
+	}
+}
+
 /* 输出类 */
 export default CrImageServerLayer

src/components/CrMap/CrMap.js

@@ -972,6 +972,11 @@ Object.assign(CrMap.prototype, {
 	 * @param {Object} callSuccess
 	 */
 	addFloatLayer(options, callSuccess) {
+		/* 创建一个网格 */
+		let provider = new Cesium.TileCoordinatesImageryProvider({
+			tilingScheme: new Cesium.WebMercatorTilingScheme(),
+		})
+		this._addImageryProvider(provider);
 		let layer = new CrImageServerLayer({
 			viewer: this._viewer,
 			providerType: options.providerType,

src/components/CrMap/CrMap.vue

@@ -416,7 +416,7 @@ onMounted(() => {
 		}
 	});
 
-	// /* 添加实景地图 */
+	/* 添加实景地图 */
 	// proxy.CMapApi.addLayer({
 	// 	layId: 'lsq3d',
 	// 	layName: '兰山区实景',
@@ -443,22 +443,23 @@ onMounted(() => {
 		layType: CrMap.LayerType.wmtsLayer,
 		isShow: true,
 		config: {
-			url: 'http://218.59.194.74:6080/arcgis/rest/services/LYLSQ_YX_102100_202112/MapServer/WMTS'
+			url: 'http://218.59.194.74:6080/arcgis/rest/services/LYLSQ_YX_102100_202112/MapServer/WMTS',
+			alpha: 1.0
 		}
 	});
 
 	/* 添加模版影像地图 */
-	// proxy.CMapApi.addLayer({
-	// 	layId: 'mpYxt',
-	// 	layName: '牟平影像图',
-	// 	layType: CrMap.LayerType.templateLayer,
-	// 	isShow: true,
-	// 	config: {
-	// 		url: 'http://202.102.167.52:16282/geoserver/gwc/service/tms/1.0.0/ytmp%3Atdt@EPSG%3A900913@png/{z}/{x}/{reverseY}.png',
-	// 		minimumLevel: 0,
-	// 		maximumLevel: 18
-	// 	}
-	// });
+	proxy.CMapApi.addLayer({
+		layId: 'mpYxt',
+		layName: '牟平影像图',
+		layType: CrMap.LayerType.templateLayer,
+		isShow: true,
+		config: {
+			url: 'http://202.102.167.52:16282/geoserver/gwc/service/tms/1.0.0/ytmp%3Atdt@EPSG%3A900913@png/{z}/{x}/{reverseY}.png',
+			minimumLevel: 0,
+			maximumLevel: 18
+		}
+	});
 
 	/* 添加网格地图 */
 	// proxy.CMapApi.addLayer({
@@ -475,16 +476,28 @@ onMounted(() => {
 	// 	}
 	// });
 
+	/* 添加兰山区影像图浮动图层 */
 	// proxy.CMapApi.addLayer({
-	// 	layId: 'floatGHT',
-	// 	layName: '浮动规划图',
+	// 	layId: 'floatLSQYx',
+	// 	layName: '兰山区影像',
 	// 	layType: CrMap.LayerType.floatLayer,
 	// 	isShow: true,
 	// 	config: {
 	// 		providerType: 'ArcGisMapServerImageryProvider',
 	// 		url: 'http://218.59.194.74:6080/arcgis/rest/services/LYLSQ_YX_102100_202112/MapServer',
-	// 		// url: 'http://218.59.194.82:6080/arcgis/rest/services/LSQZRZY_RE_WEB_V1/MapServer',
-	// 		// layers: '24',
+	// 		opacity: 0.45
+	// 	}
+	// });
+
+	/* 添加兰山区规划图浮动图层 */
+	// proxy.CMapApi.addLayer({
+	// 	layId: 'floatLSQGht',
+	// 	layName: '兰山区规划图',
+	// 	layType: CrMap.LayerType.floatLayer,
+	// 	isShow: true,
+	// 	config: {
+	// 		providerType: 'ArcGisMapServerImageryProvider',
+	// 		url: 'http://218.59.194.74:6080/arcgis/rest/services/LYLSQ_GHT_102100_202112/MapServer',
 	// 		opacity: 1.0
 	// 	}
 	// });

src/components/CrMap/DrawTools.js

@@ -270,6 +270,8 @@ class DrawTools {
 		/* 获取画布的宽度和高度 */
 		this._canvasWidth = this._viewer.scene.canvas.width;
 		this._canvasHeight = this._viewer.scene.canvas.height;
+		/* 获取当前运行模式 */
+		this._windowType = this._checkAppOrWeb();
 	}
 
 	/**
@@ -879,7 +881,7 @@ class DrawTools {
 		this._sketchPoints = [];
 		this._sketchOutputPoints = [];
 		this._sketchWallHeights = [];
-		/* 重置编辑实体 */
+		/* ���������������������������������������������������������������������������置编辑实体 */
 		this._drawEntity = undefined;
 	}
 }
@@ -889,7 +891,7 @@ class DrawTools {
  */
 Object.assign(DrawTools.prototype, {
 	/**
-	 * ���������������������������������置点击点显示�����标记
+	 * �����������������������������������������������������������置点击点显示�����标记
 	 * @param {JSNO} options 配置项
 	 * @param {String} options.lineLabel 线点文字标注
 	 * @param {String} options.polygonLabel 面点文字标注
@@ -1012,6 +1014,8 @@ Object.assign(DrawTools.prototype, {
 	_clearEvent: function(handler) {
 		/* 清理事件的同时 彻底清理提示标签 */
 		this._endTooltip();
+		/* 隐藏操作容器 */
+		this._removeOperationDom();
 		if (!handler) return;
 		/* 干掉事件句柄 释放资源 */
 		handler.destroy();
@@ -2022,6 +2026,8 @@ Object.assign(DrawTools.prototype, {
 			/* 监听输出 */
 			if (options.onAdded) options.onAdded(_self._sketchPoints, _self
 				._sketchOutputPoints);
+			/* 添加操作容器 */
+			_self._createOperationDom();
 		})
 		/* 注册鼠标移动事件 */
 		this._registerMouseMoveEvent(handler, function(event) {
@@ -2104,6 +2110,8 @@ Object.assign(DrawTools.prototype, {
 			_self._sketchOutputPoints.push(loc.gLocation);
 			/* 监听输出 */
 			if (options.onAdded) options.onAdded(_self._sketchPoints, _self._sketchOutputPoints);
+			/* 添加操作容器 */
+			_self._createOperationDom();
 		})
 		/* 注册鼠标移动事件 */
 		this._registerMouseMoveEvent(handler, function(event) {
@@ -2264,6 +2272,8 @@ Object.assign(DrawTools.prototype, {
 			_self._sketchOutputPoints.push(loc.gLocation);
 			/* 监听输出 */
 			if (options.onAdded) options.onAdded(_self._sketchPoints, _self._sketchOutputPoints);
+			/* 添加操作容器 */
+			_self._createOperationDom();
 		});
 		/* 注册鼠标移动事件 */
 		this._registerMouseMoveEvent(handler, function(event) {
@@ -2412,8 +2422,7 @@ Object.assign(DrawTools.prototype, {
 				/* 创建正式矩形 */
 				_self._updateRectangle(options.isEdit);
 				/* 干掉事件句柄 释放资源*/
-				handler.destroy();
-				handler = null;
+				_self._clearEvent(handler);
 				/* 回调返回 */
 				if (options.onComplete) options.onComplete(_self._sketchOutputPoints);
 			}
@@ -2650,7 +2659,7 @@ Object.assign(DrawTools.prototype, {
 	Clear: function() {
 		/* 清理全部绘制内容 */
 		this._clear(true);
-		/* 结束编辑状态 */
+		/* 结���编���状��� */
 		this._unActivateEdit();
 		/* 删除坐标轴 */
 		this._removeCoorinateAxis();
@@ -2661,6 +2670,20 @@ Object.assign(DrawTools.prototype, {
 	 */
 	sketchInit: function() {
 		this._clear(false);
+	},
+
+	/**
+	 * 检测程序运行环境
+	 * @return {DrawTools.RuntimeEnvironment}
+	 */
+	_checkAppOrWeb() {
+		if (window.navigator.userAgent.match(
+				/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
+			)) {
+			return DrawTools.RuntimeEnvironment.App;
+		} else {
+			return DrawTools.RuntimeEnvironment.Web;
+		}
 	}
 })
 
@@ -2669,9 +2692,9 @@ Object.assign(DrawTools.prototype, {
  */
 Object.assign(DrawTools.prototype, {
 	/**
-	 * 提���标���初���化
+	 * 提示标签初始化
 	 * @ignore 生成方法时不对外公开
-	 * @param {String} text 显示的文本内���
+	 * @param {String} text 显示的文本内容
 	 * @param {JSON} mousePosition 鼠标位置 
 	 */
 	_tooltipInit: function(text, mousePosition) {
@@ -4304,7 +4327,7 @@ Object.assign(DrawTools.prototype, {
 		var point1 = turf.point([strLoc.longitude, strLoc.latitude]);
 		var point2 = turf.point([endLoc.gLocation.lng, endLoc.gLocation.lat]);
 		var bearing = turf.bearing(point1, point2);
-		/* 计算亮点之间的距离 距离单位和是否计算高度*/
+		/* 计算亮点���间���距��� 距���单���和���否���算���度*/
 		var options = {
 			units: 'kilometers',
 			calculateHeight: calculateHeight
@@ -4322,10 +4345,10 @@ Object.assign(DrawTools.prototype, {
 				/* 更新移动点数组 */
 				this._ellipseOutlineCoordinates[i] = position.clone();
 			}
-			/* ���新中心���置数组 */
+			/* �������新中心���置数组 */
 			this._movePoint = endLoc.sLocation;
 		} else {
-			/* 循环���理所有移动点 */
+			/* 循环处理所有移动点 */
 			for (let i = 0; i < this._startMovePoints.length; i++) {
 				/* 计算转换后的位置 */
 				let position = this._calculateTransformPosition(this._startMovePoints[i], distance, bearing,
@@ -4408,7 +4431,7 @@ Object.assign(DrawTools.prototype, {
 				._rectangleCoordinates[0], _self
 				._rectangleCoordinates[1], _self._rectangleCoordinates[2], _self
 				._rectangleCoordinates[3]);
-			/* ��������������矩形有边界线 特殊处理 */
+			/* 判断矩形有边界线 特殊处理 */
 			if (_self._editEntity.polyline != undefined) {
 				_self._editEntity.polyline.positions = _self._rectangleOutlineCoordinates;
 			}
@@ -4937,6 +4960,99 @@ Object.assign(DrawTools.prototype, {
 });
 
 /**
+ * 操作按钮相关
+ */
+Object.assign(DrawTools.prototype, {
+	/**
+	 * 初始化操作容器
+	 */
+	_initOperationDom: function() {
+		let _self = this;
+		this._operationDomId = 'drawtools_operation_dom'
+		this._operationDom = document.getElementById(this._operationDomId);
+		/* 先执行移除操作 */
+		this._removeOperationDom()
+		/* 开始创建 */
+		this._operationDom = document.createElement('div');
+		this._operationDom.id = this._operationDomId;
+		this._operationDom.style.width = '80px';
+		this._operationDom.style.backgroundColor = 'rgba(0, 0, 0, 0.85)';
+		this._operationDom.style.borderRadius = '5px';
+		this._operationDom.style.display = 'flex';
+		this._operationDom.style.flexDirection = 'column';
+		this._operationDom.style.padding = '8px';
+		this._operationDom.style.justifyContent = 'center';
+		this._operationDom.style.position = 'absolute';
+		this._operationDom.style.bottom = '150px';
+		this._operationDom.style.right = '50px';
+		document.body.appendChild(this._operationDom);
+		/* 创建回退按钮 */
+		let btnUndo = document.createElement('button');
+		btnUndo.style.height = '30px';
+		btnUndo.style.marginBottom = '8px';
+		btnUndo.style.backgroundColor = 'rgba(52, 137, 255, 1.0)';
+		btnUndo.style.color = 'rgb(255, 255, 255)';
+		btnUndo.style.border = '0px solid red';
+		btnUndo.style.borderRadius = '5px';
+		btnUndo.innerHTML = '回退';
+		btnUndo.style.fontSize = '13px';
+		btnUndo.style.cursor = 'pointer';
+		this._operationDom.appendChild(btnUndo);
+		/* 创建完成按钮 */
+		let btnCompletion = document.createElement('button');
+		btnCompletion.style.height = '30px';
+		btnCompletion.style.backgroundColor = 'rgba(88, 185, 45, 1.0)';
+		btnCompletion.style.color = 'rgb(255, 255, 255)';
+		btnCompletion.style.border = '0px solid red';
+		btnCompletion.style.borderRadius = '5px';
+		btnCompletion.innerHTML = '完成';
+		btnCompletion.style.fontSize = '13px';
+		btnCompletion.style.cursor = 'pointer';
+		this._operationDom.appendChild(btnCompletion);
+		/* 添加事件 */
+		btnUndo.onclick = function() {
+			_self._console(_self._drawEventHandler, _self._drawEventHandler.isDestroyed());
+			if (_self._drawEventHandler !== undefined && _self._drawEventHandler.isDestroyed() ===
+				false) {
+				let mouseDownEvent = {
+					position: new Cesium.Cartesian2(300, 300),
+				}
+				let action = _self._drawEventHandler.getInputAction(Cesium.ScreenSpaceEventType
+					.RIGHT_CLICK);
+				action(mouseDownEvent);
+			}
+		}
+		btnCompletion.onclick = function() {
+			if (_self._drawEventHandler !== undefined && _self._drawEventHandler.isDestroyed() ===
+				false) {
+				let mouseDownEvent = {
+					position: new Cesium.Cartesian2(300, 300),
+				}
+				let action = _self._drawEventHandler.getInputAction(Cesium.ScreenSpaceEventType
+					.LEFT_DOUBLE_CLICK);
+				action(mouseDownEvent);
+			}
+		}
+	},
+
+	/**
+	 * 移除操作容器
+	 */
+	_removeOperationDom: function() {
+		if (this._operationDom !== null && this._operationDom !== undefined) {
+			document.body.removeChild(this._operationDom);
+		}
+	},
+
+	/**
+	 * 添加操作容器
+	 */
+	_createOperationDom: function() {
+		this._initOperationDom();
+	}
+})
+
+/**
  * 绘制类型
  */
 DrawTools.DrawType = Object.freeze({
@@ -5019,6 +5135,14 @@ DrawTools.PolygonType = Object.freeze({
 	HousePolygon: 'housePolygon', //拉伸贴地面
 })
 
+/**
+ * 运行环境类型
+ */
+DrawTools.RuntimeEnvironment = Object.freeze(({
+	App: 'app',
+	Web: 'web'
+}))
+
 
 class WallMaterialProperty {
 	/**

src/demo.html

@@ -4,94 +4,28 @@
 		<meta charset="utf-8">
 		<title></title>
 		<style>
-			.jt-draw-tools-main {
-				width: 300px;
-				height: 400px;
-				position: absolute;
-				top: 100px;
-				left: 100px;
-				display: flex;
-				flex-direction: column;
-				border-radius: 5px;
-				/* 为了避免设置border-radius导致顶部覆盖底部进而显示不出来 */
-				overflow: auto;
-			}
 
-			.jt-draw-tools-main .top-head {
-				position: relative;
-				width: 100%;
-				height: 40px;
-				background-color: rgb(0, 0, 191);
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				color: rgba(255, 255, 255, 1);
-				font-size: 15px;
-			}
-
-			.jt-draw-tools-main .top-head::before,
-			.jt-draw-tools-main .top-head::after {
-				position: absolute;
-				content: '';
-				width: 2px;
-				height: 12px;
-				background: #fff;
-				right: 15px;
-			}
-
-			.jt-draw-tools-main .top-head:hover::before,
-			.jt-draw-tools-main .top-head:hover::after {
-				background: rgb(255, 0, 0);
-				cursor: pointer;
-			}
-
-			.jt-draw-tools-main .top-head::before {
-				transform: rotate(45deg);
-			}
-
-			.jt-draw-tools-main .top-head::after {
-				transform: rotate(-45deg);
-			}
-
-			.jt-draw-tools-main .content {
-				background-color: rgba(1, 26, 83, 0.85);
-				width: 100%;
-				height: calc(100% - 40px);
-			}
 		</style>
 	</head>
 	<body>
-		<button onclick="test()">测试</button>
-		<button onclick="test1111()">测试1111</button>
-		<div class="jt-draw-tools-main">
-			<div class="top-head">编辑框</div>
-			<div class="content"></div>
-		</div>
+		<!-- <div
+			style="width: 120px;background-color: rgba(0, 0, 0, 0.85);border-radius: 5px;display: flex;flex-direction: column;padding: 8px;justify-content: center;position: absolute;bottom: 50px;right: 50px;">
+			<button
+				style="margin-bottom: 8px;height: 30px;background-color: rgba(52, 137, 255, 1.0);color: rgb(255, 255, 255);border: 0px solid red;border-radius: 5px;">回退</button>
+			<button
+				style="height: 30px;background-color: rgba(88, 185, 45, 1.0);color: rgb(255, 255, 255);border: 0px solid red;border-radius: 5px;">完成</button>
+		</div> -->
+		<div id="btnDemo">测试</div>
 	</body>
 </html>
 <script>
-	let json = [{
-		name: '你好',
-	}]
-
-	function test() {
-		json[0].name = '测试';
-	}
-
-	let kkk = [];
-	for (let i = 0; i < json.length; i++) {
-		let mmm = JSON.stringify(json[i]);
-
-		kkk.push(JSON.parse(mmm));
-	}
-
-	function mmm(www) {
-		setTimeout(function() {
-			console.log(json[0].name);
-			console.log(www[0].name);
-			mmm(www);
-		}, 1000);
-	}
-
-	mmm(kkk);
+	let btnDemo = document.getElementById('btnDemo');
+	btnDemo.addEventListener('pointerdown', function() {
+		console.log("LLL");
+	})
+
+	console.log(btnDemo);
+	var evt = document.createEvent("Event");
+	evt.initEvent("pointerdown", true, true);
+	window.dispatchEvent(evt);
 </script>