Cgcs2000ToWgs84(lng, lat, wkid): Point { return projection.project(new Point({ longitude: parseFloat(lng), latitude: parseFloat(lat), spatialReference: {wkid} }), {wkid: 4326}) as Point; }
记录一下draw的绘图方法 HTML+JS代码保存过程中格式化出现了问题，手动恢复格式后可能会出现不对的地方，切记不可直接复制粘贴。更多的是参考思路。// 绑定面按钮绘制事件 const; drawAreaButton = document.getElementById('query-area-button'); drawAreaButton; . onclick = () => { if (that.showPolyline) { that.stateService.map.remove(that.stateService.map.findLayerById('polygon')); that.showAreaDataTree = false; that.showPolyline = false; } else { this.stateService.activeTool$.next('query-area-button'); that.enableCreateArea(draw, that.stateService.view); } }; // ==================绘图方法=========================== // /** * 开始监听画线 */ enableCreateLine(draw, view): void { const action = draw.create('polyline', {mode: 'click'}); let graphicsLayer = view.map.findLayerById('polyline') as GraphicsLayer; if (!graphicsLayer) { graphicsLayer = new GraphicsLayer({title: 'polyline', id: 'polyline', listMode: 'hide',}); view.map.add(graphicsLayer); } // 获取焦点 view.focus(); // 顶点添加事件 action.on('vertex-add', (event) => { this.createPolyline(event, graphicsLayer); }); // 顶点移除事件 action.on('vertex-remove', (event) => { this.createPolyline(event, graphicsLayer); }); // 鼠标移动事件 action.on('cursor-update', (event) => { this.createPolyline(event, graphicsLayer); }); // 绘制完成事件 action.on('draw-complete', (event) => { this.createPolyline(event, graphicsLayer); }); } /** * 开始监听画面 绘制多边形 */ enableCreateArea(draw, view): void { const action = draw.create('polygon', { mode: 'click'// 点击方式加点 }); let graphicsLayer = view.map.findLayerById('polygon') as GraphicsLayer; if (!graphicsLayer) { graphicsLayer = new GraphicsLayer({title: '多边形区域查询', id: 'polygon', listMode: 'hide',}); view.map.add(graphicsLayer); } // 获取焦点 view.focus(); // 顶点添加事件 action.on('vertex-add', (event) => { this.createPolygon(event, graphicsLayer); }); // 顶点移除事件 action.on('vertex-remove', (event) => { this.createPolygon(event, graphicsLayer); }); // 鼠标移动事件 action.on('cursor-update', (event) => { this.createPolygon(event, graphicsLayer); }); // 绘制完成事件 action.on('draw-complete', (event) => { this.showPolyline = true; this.createPolygon(event, graphicsLayer); console.log('区域绘图完成，准备查询。', this.AreaGeometry); this.handleIdentify(this.AreaGeometry); }); } /** * 开始监听画点 */ enableCreatePoint(draw, view): void { const action = draw.create('point', { mode: 'click'// 点击方式加点 }); let graphicsLayer = view.map.findLayerById('Point') as GraphicsLayer; if (!graphicsLayer) { graphicsLayer = new GraphicsLayer({title: 'Point', id: 'Point', listMode: 'hide',}); view.map.add(graphicsLayer); } // 获取焦点 view.focus(); // 顶点添加事件 action.on('vertex-add', (event) => { this.createPoint(event, graphicsLayer); }); // 顶点移除事件 action.on('vertex-remove', (event) => { this.createPoint(event, graphicsLayer); }); // 绘制完成事件 action.on('draw-complete', (event) => { this.createPoint(event, graphicsLayer); }); } /** * 开始监听画圆 */ enableCreateCircle(draw, view): void { const action = draw.create('circle', { mode: 'click'// 点击方式加点 }); let graphicsLayer = view.map.findLayerById('Circle') as GraphicsLayer; if (!graphicsLayer) { graphicsLayer = new GraphicsLayer({title: '圆形选区查询', id: 'Circle', listMode: 'hide',}); view.map.add(graphicsLayer); } // 获取焦点 view.focus(); // 顶点移除事件 action.on('vertex-remove', (event) => { this.createCircle(event, graphicsLayer); }); // 鼠标移动事件 action.on('cursor-update', (event) => { this.createCircle(event, graphicsLayer); }); // 绘制完成事件 action.on('draw-complete', (event) => { this.showCircle = true; this.createCircle(event, graphicsLayer); console.log('圆形绘图完成，准备查询。', this.CircleGeometry); this.handleIdentify(this.CircleGeometry); }); } /** * 开始监听画矩形 */ enableCreateRectangle(draw, view): void { const action = draw.create('rectangle', { mode: 'click'// 点击方式加点 }); let graphicsLayer = view.map.findLayerById('rectangle') as GraphicsLayer; if (!graphicsLayer) { graphicsLayer = new GraphicsLayer({title: '矩形选区查询', id: 'rectangle', listMode: 'hide',}); view.map.add(graphicsLayer); } // 获取焦点 view.focus(); //顶点移除事件 action.on('vertex-remove', (event) => { this.createRectangle(event, graphicsLayer); }); // 鼠标移动事件 action.on('cursor-update', (event) => { this.createRectangle(event, graphicsLayer); }); // 绘制完成事件 action.on('draw-complete', (event) => { this.showRectangle = true; this.createRectangle(event, graphicsLayer); console.log('长方形绘图完成，准备查询。', this.RectangleGeometry); this.handleIdentify(this.RectangleGeometry); }); } /** * 根据点坐标生成新的线 */ createPolyline(event, graphicsLayer): void { const that = this; // 获取所有顶点 const vertices = event.vertices; // 清除之前绘制 graphicsLayer.removeAll(); // 生成绘制的图形 const symbolData = {type: 'simple-line', color: [4, 90, 141], width: 4, cap: 'round', join: 'round'}; const graphic = new Graphic({ geometry: new Polyline({paths: vertices, spatialReference: that.stateService.view.spatialReference}), symbol: symbolData }); // 将绘制的图形添加到 view; graphicsLayer.add(graphic); } /** * 根据点坐标生成新的线 */ createPolygon(event, graphicsLayer): void { const that = this; // 获取所有顶点 const vertices = event.vertices; // 清除之前绘制 graphicsLayer.removeAll(); const symbolData = { type: 'simple-fill', color: [0, 0, 0, 0.1], style: 'solid', outline: {color: 'black', width: 1, style: 'dash'} }; // 生成绘制的图形 const graphic = new Graphic({ geometry: new Polygon({ hasZ: false, hasM: false, rings: [vertices], spatialReference: that.stateService.view.spatialReference }), symbol: symbolData }); this.AreaGeometry = new Polygon({ hasZ: false, hasM: false, rings: [vertices], spatialReference: that.stateService.view.spatialReference }); // 将绘制的图形添加到view graphicsLayer.add(graphic); } /** * 根据点坐标生成新的线 */ createPoint(event, graphicsLayer): void { const that = this; // 获取所有顶点 const coordinates = event.coordinates; const symbolData = { type: 'simple-marker', // autocasts as new SimpleMarkerSymbol() style: 'square', color: 'blue', size: '8px', }; // 生成绘制的图形 const graphic = new Graphic({ geometry: new Point({ hasZ: false, hasM: false, x: coordinates[0], y: coordinates[1], spatialReference: that.stateService.view.spatialReference }), symbol: symbolData }); // 将绘制的图形添加到 view; graphicsLayer.add(graphic); } /** * 根据点坐标生成新的线 */ createCircle(event, graphicsLayer): void { // 获取所有顶点 const vertices = event.vertices; // 少于一个点无法展示圆 if (vertices.length < 2) { return; } // 清除之前绘制 graphicsLayer.removeAll(); // 生成绘制的图形,两点画圆 const center = new Point({ hasZ: false, hasM: false, x: vertices[0][0], y: vertices[0][1], spatialReference: this.stateService.view.spatialReference }); const dis = center.distance(new Point({ hasZ: false, hasM: false, x: vertices[1][0], y: vertices[1][1], spatialReference: this.stateService.view.spatialReference })); const symbolData = { type: 'simple-fill', color: [0, 0, 0, 0.1], style: 'solid', outline: { color: 'black', width: 1, style: 'dash' } }; const graphic = new Graphic({ geometry: new Circle({ hasZ: false, hasM: false, center, radius: dis, spatialReference: this.stateService.view.spatialReference }), symbol: symbolData }); this.CircleGeometry = new Circle({ hasZ: false, hasM: false, center, radius: dis, spatialReference: this.stateService.view.spatialReference }); // 将绘制的图形添加到 view; graphicsLayer.add(graphic); } createRectangle(event, graphicsLayer): void { // 获取所有顶点 const vertices = event.vertices; // 两点画矩形 if (vertices.length < 2) { return; } const rings = [vertices[0], [vertices[0][0], vertices[1][1]], vertices[1], [vertices[1][0], vertices[0][1]]]; // 清除之前绘制 graphicsLayer.removeAll(); const symbolData = {type: 'simple-fill', color: [0, 0, 0, 0.1], style: 'solid', outline: {color: 'black', width: 1, style: 'dash'}}; // 生成绘制的图形 const graphic = new Graphic({ geometry: new Polygon({ hasZ: false, hasM: false, rings: [rings], spatialReference: this.stateService.view.spatialReference }), symbol: symbolData }); // 保存geometry 用于查询数据 this.RectangleGeometry = new Polygon({ hasZ: false, hasM: false, rings: [rings], spatialReference: this.stateService.view.spatialReference }); // 将绘制的图形添加到view graphicsLayer.add(graphic); } close(): void { this.dataSource.data = []; this.showAreaDataTree = false; } remove(): void { this.stateService.view.graphics.removeAll(); // 清楚之前的绘制 } };
1.随机数（TS脚本） Laya内已有随机数方法以0~1取值为基准，拓展后，任意正整数区间，代码如下 /** * 随机数 * @param min 最小数 * @param max 最大数 */ private randomNumber(min: any, max: any): any { return Math.floor( parseInt( Math.random() * (max - min + 1) + min, 10) ); } 2.复制到粘贴板（JS脚本） 将文本在鼠标或手机复制到粘贴板，代码如下 CopyUrl: function (url) { const t = document.createElement('textarea'); t.value = url; t.style.visibility = true; // 加入文档流中 document.body.appendChild(t); // 选中textarea的内容，并拷贝到剪切板 t.select(); document.execCommand('copy'); // 删除隐藏的textarea t.parentElement.removeChild(t); }