件：Arcgis、Excel（WPS）

XY平面坐標轉換為經緯度

1、如果是.DAT格式，則需要粘貼進.XLS格式的表格中并簡要注明XYZ等信息表頭如圖2。

2、打開Aacmap，添加數據，選擇表格文件并選擇顯示XY數據，這里需要注意XY的反轉。設置顯示數據的坐標系（中央子午線）如圖3。完成后對該表格事件導出為shap。

3、添加該shap文件，并對屬性表添加新的字段，字段名稱如X1、Y1等，字段類型為雙精度。

4、對兩個字段進行幾何計算，屬性為相對應的點的X坐標、點的Y坐標，單位選擇為十進制度，計算完成如圖8。此時數據的坐標為十進制數據格式。

5、查看X1、Y1的字段屬性，設置數字格式，選擇方向，把“弧度(R)”更換為“度(D)”，小數位數根據需求自己設定。此時字段顯示數據格式為度分秒格式。

6、通過函數在Excel中把十進制數值計算為度分秒數據格式。在外部文件夾找到該shap文件存放位置，選擇dbf文件使用表格打開，在G2輸入函數：=TEXT(INT(E2),"0")&"°"&TEXT(INT((E2-INT(E2))*60),"00")&"′"&TEXT(((E2-INT(E2))*60-INT((E2-INT(E2))*60))*60,"00.0000")&"〃"

就得到度分秒數據格式文件。

7、同理，度分秒數據格式轉換為平面坐標，則需要把度分秒轉換為十進制數據格式，并且在Arcgis進行展XY數據事件，導出shap，再計算點的xy坐標，單位選擇米。

篇，我們講了更新畫布尺寸，以及網格，出入口位置，可移動對象的生成。這篇，我們接上一篇，給大家講下迷宮圖的生成和游戲界面繪制。

生成迷宮圖

迷宮圖是由墻和走廊構成的，我們需要將墻打通，形成一條入口到出口的通路，這就需要一種算法來實現，我這里采用的是深度優先查找算法。具體什么是深度優先查找算法，大家可以自行頭條搜索，我就不過多介紹了。

我是這樣實現的：首先初始化幾個變量，

• curCell 當前遍歷的目標墻（以下簡稱當前墻），我們取網格中的第一道墻給它
• history 訪問過一次的墻構成的數組
• getWall 根據墻，獲取相鄰墻的函數

然后，我們根據當前墻，隨機打通一道它的相鄰墻，然后把打通的那道墻作為當前墻。在循環中，我們不斷地將當前墻壓入歷史數組，當找不到可打的墻時，就從歷史中彈出最后一道墻作為當前墻，這樣一直循環，直到歷史被清空，結束循環。

private genMap () {
    const startTime=Date.now()
    let curCell: Block=this.grid[0][0]
    const history: Block[]=[curCell]
    const { TOP, RIGHT, BOTTOM, LEFT }=Direction
    const getWall=(cell: Block, dir: Direction)=> this.getBlock(cell, dir, BlockType.WALL)
    while (history.length) {
      curCell.flag=true
      const tCell=this.getBlock(curCell, TOP)
      const rCell=this.getBlock(curCell, RIGHT)
      const bCell=this.getBlock(curCell, BOTTOM)
      const lCell=this.getBlock(curCell, LEFT)
      const cells=[tCell, rCell, bCell, lCell].filter(_=> _ && !_.flag)
      if (cells.length) {
        history.push(curCell)
        const rndCell=cells[getRandInt(0, cells.length - 1)]
        let wall
        if (rndCell===tCell) {
          wall=getWall(curCell, TOP)
          curCell=tCell
        } else if (rndCell===rCell) {
          wall=getWall(curCell, RIGHT)
          curCell=rCell
        } else if (rndCell===bCell) {
          wall=getWall(curCell, BOTTOM)
          curCell=bCell
        } else {
          wall=getWall(curCell, LEFT)
          curCell=lCell
        }
        wall.type=BlockType.CELL
      } else {
        curCell=history.pop() as Block
      }
    }
    console.log(Date.now() - startTime)
  }

獲取墻的坐標

我們的墻是根據行和列確定位置的，但是，繪制到畫布上時，需要將行列轉化為笛卡爾坐標系中的xy坐標。

畫布的坐標原點在左上角，向右是x軸正方向，向下是y軸正方向，這和數學上的坐標系有一些差異。

private getWallCoord (wall: Block) {
    let x1
    let y1
    let x2
    let y2
    const { row, col }=wall
    const { wallWidth, cellWidth }=this
    const space=wallWidth + cellWidth
    if (row % 2) {
      if (col % 2) return
      x1=col / 2 * space - wallWidth / 2
      y1=y2=(row + 1) / 2 * space
      x2=x1 + space + wallWidth
    } else {
      x1=x2=(col + 1) / 2 * space
      y1=row / 2 * space - wallWidth / 2
      y2=y1 + space + wallWidth
    }
    return { x1, y1, x2, y2 }
  }

繪制游戲界面

我采用的雙畫布繪制，可移動目標單獨繪制在一張畫布上，其它靜止的對象繪制在另一張畫布上。目標移動過程中，需要不斷重繪畫布。這樣做有一個好處，就是可以大幅減少計算量和重繪次數，這可以提高性能，因為我們僅需重繪可移動目標所在的畫布。

繪制游戲界面之前，需要先將畫布擦干凈，然后進行一系列對象的繪制。流程是：

1. 繪制入口
2. 保存畫布狀態
3. 繪制迷宮圖
4. 恢復上次保存的狀態
5. 繪制出口
6. 繪制可移動目標，獨享一張畫布

private drawUI () {
    const { cvs, ctx, wallWidth }=this
    ctx.clearRect(0, 0, cvs.width, cvs.height)
    this.drawStartPosition()
    ctx.save()
    ctx.strokeStyle=this.wallColor
    ctx.lineWidth=wallWidth
    ctx.strokeRect(wallWidth / 2, wallWidth / 2, cvs.width - wallWidth, cvs.height - wallWidth)
    this.grid.forEach(rows=> {
      rows.forEach(_=> {
        if (_.type===BlockType.WALL) {
          const coord=this.getWallCoord(_)
          if (coord) {
            ctx.beginPath()
            ctx.moveTo(coord.x1, coord.y1)
            ctx.lineTo(coord.x2, coord.y2)
            ctx.stroke()
          }
        }
      })
    })
    ctx.restore()
    this.drawEndPosition()
    this.drawBall()
  }

本篇文章到此就結束了，童鞋們都理解了嗎？下一講，下篇見！感謝閱讀！

#頭條創作挑戰賽##前端#?

要

[XY曲線圖] 元件用來顯示二維坐標的XY數據點，每個數據包含X值和Y值，皆從寄存器中讀取。

同時可顯示最多16組曲線。此功能可讓用戶觀察及分析各寄存器中的數據。負數亦可使用。

窗口設定

1. [元件]》[曲線圖]》[XY曲線圖]

2. XY曲線圖的相關設置屬性如下圖

步驟 1. 選擇顯示方向[往右移動],及所要顯示的通道數目

步驟 2. 控制地址設為LW0

注意：

· LW1中的數據要預先配置好，用來定義需要采集的數據個數，否則曲線顯示不了.

· 每個通道最多可以有1023 XY坐標點.

步驟 3. 為通道設定數據的讀取地址，如上，地址為LW10.

X數據1讀取自LW10

Y數據1讀取自LW11

X數據2 讀取自LW12

Y數據2 讀取自LW13

依此類推。

步驟 4. 設定通道數據的上下限，這里設定的是常數，也可以設置取自寄存器。

3. 至[顯示區域]設定頁.

步驟 1. 設定[外觀]為透明色

步驟 2. 為每個通道設定不同的曲線顏色、樣式及寬度

[樣式]

共有四種樣式-線，點,對X軸投影,對Y軸投影.

步驟 3. 為通道設定參考線的上下限及參考線的數值.