\r\n
\r\n {/*
*/}\r\n
\r\n
\r\n {/*
*/}\r\n
\r\n
this.gotoMap()}>\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n {/*
this.setState({ topbar: 1 })}>最新消息
*/}\r\n
this.setState({ topbar: 2 })}>簡介
\r\n
this.setState({ topbar: 3 })}>圖資使用說明
\r\n
this.setState({ topbar: 4 })}>常見問答集
\r\n
this.setState({ topbar: 5 })}>操作說明
\r\n
好站連結\r\n {this.dropmenu()}\r\n
\r\n {!this.state.isLogined ?
this.setState({ topbar: 6 })} alt=\"login\"/> :\r\n <>\r\n
{ this.logout() }}>登出
\r\n {this.state.currentAuthority === \"admin\" ?
{ this.gotoBackend_OnClick(); }}>後台
: null}\r\n
歡迎，{this.state.username}
\r\n \r\n }\r\n
\r\n
\r\n
\r\n
\r\n {\r\n this.topbarVisiblity()\r\n }\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
地址:54001 南投市中興路660號\r\n this.gotoGovernment()}>(如何到達縣府) \r\n
\r\n
電話:(049)2222106-9
\r\n\r\n
\r\n\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
上班時間:上午08:00-12:00;下午13:30-17:30;
\r\n
彈性上班時間:07:30-08:30;17:00-18:00(週六、日及假日休息)
\r\n
\r\n\r\n
\r\n
\r\n
\r\n
本日到訪人數:{this.state.viewer}{/* | 本月到訪人數:{157} */}| 到訪人次累積總人次:{this.state.allViewer}
\r\n
\r\n this.privacyPolicy()} >隱私權政策 | \r\n this.openDataDeclare()} >政府網站資料開放宣告 \r\n
\r\n
\r\n
\r\n
\r\n
\r\n );\r\n }\r\n}\r\n","import React, { Component } from 'react';\r\nimport './OviewMap.css'\r\n\r\nconst Geo3DPoint = window.Geo3DPoint;\r\nexport default class OviewMap extends Component { \r\n constructor(props) {\r\n super(props);\r\n\r\n this.initBaseLayerParam = {\r\n url: \"https://wmts.nlsc.gov.tw/wmts\",\r\n identifier: \"EMAP\",\r\n urlTemplate: \"{URL}\"\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n //開啟oview圖台\r\n window.gMainMap.Init(\"MainMap\", this.openTerrainCallback.bind(this));\r\n }\r\n\r\n async openTerrainCallback() {\r\n //window.gMainMap.layerManager = new LayerManager(window.gMainMap.TerrainView)\r\n window.gMainMap.TerrainView.setBaseLayer(this.initBaseLayerParam);\r\n //設定初始位置\r\n let initialPos = new window.GeoPoint(\r\n 120.6925705503777, 23.90282702330336, 264.3642244036524\r\n );\r\n let initialUp = new Geo3DPoint(-0.5480174933105086, 0.01615513463532407, 0.8363108504919576);\r\n let initialV = new Geo3DPoint(-0.8359477403630035, 0.024641867384041033, -0.5482555551508946);\r\n let initialCamera = new window.ov.Camera(initialPos, initialV, initialUp);\r\n window.gMainMap.TerrainView.gotoCamera(initialCamera, false);\r\n\r\n //關閉控制面板\r\n //window.gMainMap.TerrainView.controlPanel = false;\r\n //穿過地表\r\n window.gMainMap.TerrainView.throughSurface = true;\r\n //用來記錄圖層開啟狀態(每次開啟都會push圖層名進來)\r\n window.gMainMap.TerrainView.openedLayerStack = [];\r\n }\r\n\r\n render() {\r\n return (\r\n
\r\n
\r\n );\r\n }\r\n}","import React from 'react';\r\n\r\n\r\n// STEP 1: createContext(<預設值>)\r\nexport const LayoutContext = React.createContext({\r\n //圖層更新\r\n layers: [],\r\n updateLayers: (updatingLayers) => {},\r\n});","import React, { Component } from 'react';\r\nimport { LayoutContext } from '../modules/ContextModules/LayoutContext';\r\n\r\nexport class SearchParamProcess extends Component {\r\n static contextType = LayoutContext;\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n };\r\n\r\n }\r\n componentDidMount() {\r\n window.gMainMap.asyncWaitIsReady.then(() => {\r\n this.process()\r\n })\r\n }\r\n process() {\r\n const { travelDiaryToolContext } = this.context;\r\n let searchParams = (new URL(document.location)).searchParams;\r\n let token = searchParams.get(\"token\");\r\n if (token !== null) {\r\n travelDiaryToolContext.update({ token: token });\r\n this.readTokenRecord(token);\r\n }\r\n }\r\n async readTokenRecord(token) {\r\n this.context\r\n .draggableWindowContext[\"travelDiaryTool\"]\r\n .update({\r\n isOpened: true\r\n });\r\n }\r\n render() {\r\n return (<>)\r\n }\r\n}","import { useEffect, useState } from \"react\";\r\nimport React from \"react\";\r\n\r\nimport './BottomStatusBar.css'\r\n\r\nexport function BottomStatusBar(props) {\r\n let [coordinate, setCoordinate] = useState({ x: 0, y: 0, z: 0 });\r\n //let newepsg = 4326;\r\n //let digits = 2;\r\n let [newepsg, setNewepsg] = useState(4326);\r\n let [digits, setDigits] = useState(2);\r\n let [scale, setScale] = useState(0);\r\n\r\n const engine = window.GetEPSGEngine();\r\n\r\n useEffect(() => {\r\n let mapDiv = document.getElementById(\"MainMap\");\r\n mapDiv.onmousemove = () => {\r\n let mousePos = window.gMainMap.TerrainView.mousePos;\r\n if (mousePos !== null) {\r\n setCoordinate({\r\n x: mousePos.x,\r\n y: mousePos.y,\r\n z: mousePos.z\r\n })\r\n\r\n getScaleRuler();\r\n }\r\n };\r\n return (() => {\r\n mapDiv.onmousemove = null;\r\n });\r\n }, []);\r\n\r\n function getScaleRuler() {\r\n let mapDiv = document.getElementById(\"MainMap\");\r\n let centerW = mapDiv.getElementsByTagName(\"canvas\")[0].width / 2;\r\n let centerH = mapDiv.getElementsByTagName(\"canvas\")[0].height / 2;\r\n\r\n let dpi = js_getDPI();\r\n\r\n let p1 = new window.GeoPoint(centerW, centerH);\r\n let p2 = new window.GeoPoint(centerW + dpi[0] / (2.54), centerH);//1inch = 2.54cm\r\n window.gMainMap.TerrainView.windowToTerrain(p1);\r\n window.gMainMap.TerrainView.windowToTerrain(p2);\r\n\r\n engine.Transfer(4326, 3857, p1);\r\n engine.Transfer(4326, 3857, p2);\r\n\r\n let newScale = Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2)) * 100;\r\n setScale(newScale);\r\n }\r\n\r\n //取得dpi\r\n function js_getDPI() {\r\n var arrDPI = [];\r\n if (window.screen.deviceXDPI !== undefined) {\r\n arrDPI[0] = window.screen.deviceXDPI;\r\n arrDPI[1] = window.screen.deviceYDPI;\r\n }\r\n else {\r\n var tmpNode = document.createElement(\"MainMap\");\r\n tmpNode.style.cssText = \"width:1in;height:1in;position:absolute;left:0px;top:0px;z-index:99;visibility:hidden\";\r\n document.body.appendChild(tmpNode);\r\n arrDPI[0] = parseInt(tmpNode.offsetWidth);\r\n arrDPI[1] = parseInt(tmpNode.offsetHeight);\r\n tmpNode.parentNode.removeChild(tmpNode);\r\n }\r\n return arrDPI;\r\n }\r\n\r\n function financial(arg, digits) {\r\n return Number.parseFloat(arg).toFixed(digits);\r\n }\r\n\r\n function epsgTransform(x, y, newepsg) {\r\n var epsgEngine = new window.CEPSGEngine();\r\n epsgEngine.Init();\r\n var transferClient = epsgEngine.GenerateClient(4326, newepsg);\r\n\r\n var point = new window.GeoPoint(x, y);\r\n transferClient.Transfer(point);\r\n return point;\r\n }\r\n\r\n function selectEPSGOnChange(e) {\r\n console.log(e);\r\n switch (e) {\r\n default:\r\n case '經緯度':\r\n setNewepsg(4326);\r\n setDigits(2);\r\n break;\r\n case 'TWD97':\r\n setNewepsg(3826);\r\n setDigits(2);\r\n break;\r\n case 'TWD67':\r\n setNewepsg(3828);\r\n setDigits(2);\r\n break; \r\n }\r\n }\r\n\r\n return (\r\n
\r\n
\r\n 【比例(公分):1:{scale}】\r\n \r\n {
{ selectEPSGOnChange(e.target.value) }}>\r\n 經緯度 \r\n TWD97 \r\n {/*TWD67 */}\r\n }\r\n
\r\n \r\n 【坐標:\r\n \r\n \r\n X:{financial(epsgTransform(coordinate.x, coordinate.y, newepsg).x, digits)},\r\n \r\n \r\n Y:{financial(epsgTransform(coordinate.x, coordinate.y, newepsg).y, digits)},\r\n \r\n \r\n 高度:{financial(coordinate.z, 2)}(m)\r\n \r\n \r\n 】\r\n \r\n
\r\n
\r\n );\r\n}","import React, { Component } from \"react\";\r\n\r\nimport './LayersButton.css'\r\n\r\nimport layersIcon from './.image/layer-group-solid@3x.png'\r\n\r\nexport class LayersButton extends Component {\r\n render() {\r\n return (\r\n
\r\n
\r\n
圖資庫 \r\n
\r\n );\r\n }\r\n}\r\n ","import React, { Component } from \"react\";\r\n\r\nimport './Divider.css'\r\n\r\nexport class Divider extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n active: false,\r\n }\r\n }\r\n render() {\r\n return (\r\n
\r\n
\r\n );\r\n }\r\n}\r\n ","import React,{Component} from \"react\";\r\n\r\nimport './OpacityRange.css'\r\n\r\nexport class OpacityRange extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n opacity: 100\r\n }\r\n\r\n }\r\n\r\n componentDidMount() {\r\n IsNumber(this.props.value) && this.setState({\r\n opacity: this.props.value\r\n });\r\n }\r\n\r\n render() {\r\n return (\r\n
\r\n 不透明:{this.state.opacity}% \r\n
\r\n\r\n );\r\n }\r\n\r\n handleChangeValue=(event) => {\r\n this.setState({\r\n opacity: Number(event.currentTarget.value)\r\n })\r\n this.props.handleChangeValue && this.props.handleChangeValue(event);\r\n }\r\n}","export class LayerModule {\r\n constructor(terrainView, layerInfo) {\r\n this.terrainView = terrainView;\r\n this.layerInfo = layerInfo;\r\n this.oviewLayer = null; \r\n }\r\n\r\n async OpenLayer(callback) {\r\n console.log(\"open\");\r\n }\r\n\r\n async RemoveLayer() { \r\n if (this.oviewLayer) {\r\n // 有參考的圖層到都加進去\r\n let index = window.gMainMap.TerrainView.openedLayerStack.indexOf(this.oviewLayer.name || this.oviewLayer.layername);\r\n if (index >= 0) {\r\n window.gMainMap.TerrainView.openedLayerStack.splice(index, 1); \r\n }\r\n //再搜尋一次，確定是否為最後一個圖層\r\n index = window.gMainMap.TerrainView.openedLayerStack.indexOf(this.oviewLayer.name || this.oviewLayer.layername);\r\n if (index < 0) {\r\n if (IsClass(this.oviewLayer, ov.TerrainOverlay))\r\n this.terrainView.removeTerrainOverlay(this.oviewLayer);\r\n else\r\n this.terrainView.removeLayer(this.oviewLayer);\r\n delete this.oviewLayer;\r\n }\r\n }\r\n }\r\n\r\n async SetOpacity(v) {\r\n v = parseFloat(v);\r\n if (isNaN(v)) {\r\n return;\r\n }\r\n if (v > 1.0) {\r\n v = 1.0;\r\n }\r\n if (v < 0) {\r\n v = 0;\r\n }\r\n\r\n if (this.oviewLayer) {\r\n if (IsClass(this.oviewLayer, ov.TerrainOverlay))\r\n this.oviewLayer.opacity = v;\r\n else {\r\n this.oviewLayer.setOpacity(v);\r\n }\r\n }\r\n } \r\n\r\n async Goto() {\r\n if (this.layerInfo.Goto) {\r\n this.terrainView.gotoCamera(\r\n new window.ov.Camera(\r\n new Geo3DPoint(this.layerInfo.Goto.Pos),\r\n new Geo3DPoint(this.layerInfo.Goto.V),\r\n new Geo3DPoint(this.layerInfo.Goto.Up),\r\n ), true);\r\n } else if (this.oviewLayer && this.oviewLayer.goto) {\r\n this.oviewLayer.goto();\r\n }\r\n }\r\n}\r\n","import { LayerModule } from './.LayerModule.js';\r\nimport ApiLayersMap from '../WebApiModules/ApiLayersMap.js';\r\n\r\nexport class OverlayLayerModule extends LayerModule {\r\n async OpenLayer(callback) {\r\n return new Promise((rs)=>{\r\n ApiLayersMap.ListLayerInfo(\r\n { FolderFullName: this.layerInfo.FolderFullName, Name: this.layerInfo.Name },\r\n (obj) => {\r\n console.log(obj);\r\n let result = obj.result;\r\n this.oviewLayer = window.gMainMap.TerrainView.addTerrainWMTSOverlay({\r\n url: result.URL || `${window.gMainMap.OviewMapServerUrlUnderProxy()}/wmts`,\r\n urlTemplate: result.URLTemplate || window.gMainMap.ProxyUrlTemplete(),\r\n identifier: result.ID,\r\n layername: result.Name,\r\n }, rs);\r\n },\r\n () => {\r\n console.error(`取得${this.layerInfo.FolderFullName}/${this.layerInfo.Name}圖層資訊失敗`)\r\n }\r\n )\r\n }).then((param)=>{\r\n console.log(param);\r\n if (param.message === \"duplicate name exists\") { // 如果只是名稱重複當作成功\r\n this.oviewLayer = window.gMainMap.TerrainView.getTerrainOverlay(this.layerInfo.Name);\r\n param.success = true;\r\n }\r\n // 有參考的圖層到都加進去\r\n window.gMainMap.TerrainView.openedLayerStack.push(this.oviewLayer.layername);\r\n callback && callback(param);\r\n return param.success;\r\n }, ()=>{\r\n return false;\r\n });\r\n }\r\n}","import { LayerModule } from './.LayerModule';\r\nimport ApiLayersMap from '../WebApiModules/ApiLayersMap.js';\r\n\r\nexport class Layer3DTilesModule extends LayerModule {\r\n async OpenLayer(callback) {\r\n return new Promise((rs)=>{\r\n ApiLayersMap.ListLayerInfo(\r\n { FolderFullName: this.layerInfo.FolderFullName, Name: this.layerInfo.Name },\r\n (obj) => {\r\n console.log(obj);\r\n let result = obj.result;\r\n window.gMainMap.TerrainView.addOGC3DTilesLayer({\r\n url: result.URL,\r\n urlTemplate: result.URLTemplate || window.gMainMap.ProxyUrlTemplete(),\r\n identifier: result.ID,\r\n callback: (success, layer) => {\r\n rs({ success, layer })\r\n },\r\n });\r\n },\r\n () => {\r\n console.error(`取得${this.layerInfo.FolderFullName}/${this.layerInfo.Name}圖層資訊失敗`)\r\n }\r\n )\r\n }).then((param)=>{\r\n console.log(param);\r\n // 有參考的圖層到都加進去\r\n this.oviewLayer = param.layer;\r\n window.gMainMap.TerrainView.openedLayerStack.push(this.oviewLayer.name);\r\n \r\n callback && callback(param);\r\n return param.success;\r\n }, ()=>{\r\n return false;\r\n });\r\n }\r\n}","import { LayerModule } from './.LayerModule';\r\nimport ApiLayersMap from '../WebApiModules/ApiLayersMap.js';\r\n\r\nexport class ModelLayerModule extends LayerModule {\r\n async OpenLayer(callback) {\r\n return new Promise((rs)=>{\r\n ApiLayersMap.ListLayerInfo(\r\n { FolderFullName: this.layerInfo.FolderFullName, Name: this.layerInfo.Name },\r\n (obj) => {\r\n console.log(obj);\r\n let result = obj.result;\r\n this.oviewLayer = window.gMainMap.TerrainView.addModelLayer({\r\n url: window.gMainMap.OviewMapServerUrlUnderProxy(),\r\n urlTemplate: result.URLTemplate || window.gMainMap.ProxyUrlTemplete(),\r\n identifier: result.ID,\r\n callback: rs,\r\n });\r\n },\r\n () => {\r\n console.error(`取得${this.layerInfo.FolderFullName}/${this.layerInfo.Name}圖層資訊失敗`)\r\n }\r\n )\r\n }).then((param)=>{\r\n console.log(param);\r\n if (param.message === \"duplicate name exists\") { // 如果只是名稱重複當作成功\r\n this.oviewLayer = window.gMainMap.TerrainView.findLayer(this.layerInfo.Name);\r\n param.success = true;\r\n }\r\n // 有參考的圖層到都加進去\r\n window.gMainMap.TerrainView.openedLayerStack.push(this.oviewLayer.name);\r\n callback && callback(param);\r\n return param.success;\r\n }, ()=>{\r\n return false;\r\n });\r\n }\r\n}","import { LayerModule } from './.LayerModule';\r\nimport ApiLayersMap from '../WebApiModules/ApiLayersMap.js';\r\n\r\nexport class ModelsetLayerModule extends LayerModule {\r\n async OpenLayer(callback) {\r\n return new Promise((rs)=>{\r\n ApiLayersMap.ListLayerInfo(\r\n { FolderFullName: this.layerInfo.FolderFullName, Name: this.layerInfo.Name },\r\n (obj) => {\r\n console.log(obj);\r\n let result = obj.result;\r\n this.oviewLayer = window.gMainMap.TerrainView.addModelSetLayer({\r\n url: window.gMainMap.OviewMapServerUrlUnderProxy(),\r\n urlTemplate: result.URLTemplate || window.gMainMap.ProxyUrlTemplete(),\r\n identifier: result.ID,\r\n callback: (success, modelSetLayer) => {\r\n if (success) {\r\n\r\n rs({ success: success, layer: modelSetLayer });\r\n }\r\n else {\r\n rs({ success: success, layer: modelSetLayer });\r\n }\r\n },\r\n });\r\n },\r\n () => {\r\n console.error(`取得${this.layerInfo.FolderFullName}/${this.layerInfo.Name}圖層資訊失敗`)\r\n }\r\n )\r\n }).then((param)=>{\r\n console.log(param);\r\n this.oviewLayer = param.layer;\r\n if (param.message === \"duplicate name exists\") { // 如果只是名稱重複當作成功\r\n this.oviewLayer = window.gMainMap.TerrainView.findLayer(this.layerInfo.Name);\r\n param.success = true;\r\n }\r\n // 有參考的圖層到都加進去\r\n param.ID = this.layerInfo.ID;\r\n param.Name = this.layerInfo.Name;\r\n window.gMainMap.TerrainView.openedLayerStack.push(this.oviewLayer.name);\r\n callback && callback(param);\r\n return param.success;\r\n }, ()=>{\r\n return false;\r\n });\r\n }\r\n}","import { LayerModule } from './.LayerModule';\r\nimport ApiLayersMap from '../WebApiModules/ApiLayersMap.js';\r\n\r\nexport class PhotogrammetryModelLayerModule extends LayerModule {\r\n async OpenLayer(callback) {\r\n return new Promise((rs)=>{\r\n ApiLayersMap.ListLayerInfo(\r\n { FolderFullName: this.layerInfo.FolderFullName, Name: this.layerInfo.Name },\r\n (obj) => {\r\n console.log(obj);\r\n let result = obj.result;\r\n this.oviewLayer = window.gMainMap.TerrainView.addPhotogrammetryModelLayer({\r\n url: window.gMainMap.OviewMapServerUrlUnderProxy(),\r\n urlTemplate: result.URLTemplate || window.gMainMap.ProxyUrlTemplete(),\r\n identifier: result.ID,\r\n callback: rs,\r\n });\r\n },\r\n () => {\r\n console.error(`取得${this.layerInfo.FolderFullName}/${this.layerInfo.Name}圖層資訊失敗`)\r\n }\r\n )\r\n }).then((param)=>{ \r\n console.log(param);\r\n if (param.message === \"duplicate name exists\") { // 如果只是名稱重複當作成功\r\n this.oviewLayer = window.gMainMap.TerrainView.findLayer(this.layerInfo.Name);\r\n param.success = true;\r\n }\r\n // 有參考的圖層到都加進去\r\n window.gMainMap.TerrainView.openedLayerStack.push(this.oviewLayer.name);\r\n callback && callback(param);\r\n return param.success;\r\n }, ()=>{\r\n return false;\r\n });\r\n }\r\n}","import { LayerModule } from './.LayerModule';\r\nimport ApiLayersMap from '../WebApiModules/ApiLayersMap.js';\r\n\r\nexport class PipelineLayerModule extends LayerModule {\r\n async OpenLayer(callback) {\r\n return new Promise((rs)=>{\r\n ApiLayersMap.ListLayerInfo(\r\n { FolderFullName: this.layerInfo.FolderFullName, Name: this.layerInfo.Name },\r\n (obj) => {\r\n console.log(obj);\r\n let result = obj.result;\r\n this.oviewLayer = window.gMainMap.TerrainView.addPipelineLayer({\r\n url: window.gMainMap.OviewMapServerUrlUnderProxy(),\r\n urlTemplate: result.URLTemplate || window.gMainMap.ProxyUrlTemplete(),\r\n identifier: result.ID,\r\n callback: (success, modelSetLayer) => {\r\n if (success) {\r\n\r\n rs({ success: success, layer: modelSetLayer });\r\n }\r\n else {\r\n rs({ success: success, layer: modelSetLayer });\r\n }\r\n },\r\n });\r\n },\r\n () => {\r\n console.error(`取得${this.layerInfo.FolderFullName}/${this.layerInfo.Name}圖層資訊失敗`)\r\n }\r\n )\r\n }).then((param)=>{\r\n console.log(param);\r\n this.oviewLayer = param.layer;\r\n if (param.message === \"duplicate name exists\") { // 如果只是名稱重複當作成功\r\n this.oviewLayer = window.gMainMap.TerrainView.findLayer(this.layerInfo.Name);\r\n param.success = true;\r\n }\r\n // 有參考的圖層到都加進去\r\n window.gMainMap.TerrainView.openedLayerStack.push(this.oviewLayer.name);\r\n callback && callback(param);\r\n return param.success;\r\n }, ()=>{ //fail\r\n return false;\r\n });\r\n }\r\n}","import { LayerModule } from './.LayerModule';\r\nimport ApiLayersMap from '../WebApiModules/ApiLayersMap.js';\r\n\r\nexport class CustomEconomicDataLayerModule extends LayerModule {\r\n async OpenLayer(callback) {\r\n return new Promise((rs) => {\r\n ApiLayersMap.ListLayerInfo(\r\n { FolderFullName: this.layerInfo.FolderFullName, Name: this.layerInfo.Name },\r\n (obj) => {\r\n console.log(obj);\r\n let result = obj.result;\r\n this.entityList = [];\r\n this.colorList = [];\r\n this.lines = [];\r\n this.risingEntity = [];\r\n this.stopAnimation = true;\r\n this.get3DDate(result.ID,\r\n (obj) => {\r\n this.oviewLayer = this.getCustomLayer();\r\n obj.result.forEach(result => {\r\n let polygonset = new window.GeoPolygonSet();\r\n polygonset.FromGeoJSON(result.Geo);\r\n //console.log(polygonset.Bounds[0].SimplifyByPointCount(1000000));\r\n let color = this.randomColor();\r\n\r\n let param = {};\r\n param.geo = polygonset;\r\n param.height = 0;\r\n param.surfaceHeight = 4000;\r\n param.epsg = 3826;\r\n param.color = color;\r\n param.drawBorder = false;\r\n param.borderColor = color;\r\n let entity = this.oviewLayer.addPolygonPrismEntity(param);\r\n\r\n let textParam = {};\r\n textParam.geo = new window.GeoPoint(polygonset.Center.x, polygonset.Center.y, 4000 + 100 * result.count);\r\n textParam.color = new window.ov.Color(\"#FFFFFF\");\r\n textParam.text = result.townName + \"(\" + result.count + \"筆)\";\r\n textParam.size = 14;\r\n textParam.borderColor = new window.ov.Color(\"#000000\");\r\n textParam.borderSize = 4;\r\n textParam.epsg = 3826;\r\n\r\n //this.oviewLayer.addTextEntity(textParam);\r\n\r\n let points = [];\r\n polygonset.Bounds[0].Buffer.forEach(point => {\r\n points.push(new window.GeoPoint(point.x, point.y, 4000));\r\n });\r\n let line = new window.GeoPolyline(points);\r\n this.lines.push(line);\r\n\r\n this.risingEntity.push({ entity: entity, textParam: textParam, count: result.count })\r\n this.entityList.push({ geo: polygonset, townName: result.townName, count: result.count });\r\n });\r\n console.log(this.entityList);\r\n this.risingAnimation();\r\n let param = { success: obj.success, ID: result.ID + \"(3D社會經濟地圖)\" };\r\n rs(param)\r\n },\r\n () => { console.error(`取得${this.layerInfo.FolderFullName}/${this.layerInfo.Name}圖層資訊失敗`) })\r\n },\r\n () => {\r\n console.error(`取得${this.layerInfo.FolderFullName}/${this.layerInfo.Name}圖層資訊失敗`)\r\n }\r\n )\r\n }).then((param) => {\r\n console.log(param);\r\n if (param.message === \"duplicate name exists\") { // 如果只是名稱重複當作成功\r\n this.oviewLayer = window.gMainMap.TerrainView.findLayer(this.layerInfo.Name);\r\n param.success = true;\r\n }\r\n // 有參考的圖層到都加進去\r\n window.gMainMap.TerrainView.openedLayerStack.push(this.oviewLayer.name);\r\n callback && callback(param);\r\n return param.success;\r\n }, () => {\r\n return false;\r\n });\r\n }\r\n\r\n async get3DDate(ID, successCallback, errorCallback) {\r\n let url = window.gMainMap.MakeDoCmdUrl(\"CMD_GetStatisticsByTownArea\");\r\n\r\n let data = { \"counity\": \"南投縣\", \"town\": \"\", \"layername\": ID };\r\n\r\n try {\r\n const response = await fetch(url, {\r\n method: \"POST\",\r\n headers: new Headers({\r\n \"Content-Type\": \"application/json\",\r\n }),\r\n body: JSON.stringify(data)\r\n });\r\n const json = await response.json();\r\n\r\n if (json.success) {\r\n successCallback(json);\r\n }\r\n else {\r\n errorCallback(json);\r\n }\r\n } catch (error) {\r\n console.log(\"error:\", error);\r\n }\r\n }\r\n\r\n randomColor() {\r\n let r, g, b;\r\n let isDuplicate = true;\r\n while (isDuplicate) {\r\n isDuplicate = false;\r\n\r\n r = Math.floor(Math.random() * 256);\r\n g = Math.floor(Math.random() * 256);\r\n b = Math.floor(Math.random() * 256);\r\n\r\n for (let i = 0; i < this.colorList.length; i++) {\r\n if (this.colorList.r === r && this.colorList.g === g && this.colorList.b === b) {\r\n isDuplicate = true;\r\n break;\r\n }\r\n }\r\n }\r\n\r\n let color = new window.ov.Color(r, g, b);\r\n this.colorList.push(color);\r\n\r\n return color;\r\n }\r\n\r\n repaint(list) {\r\n if (this.stopAnimation) {\r\n this.oviewLayer.removeAllEntity();\r\n\r\n this.entityList.forEach((result, index) => {\r\n let color = this.colorList[index]\r\n\r\n let param = {};\r\n let textParam = {};\r\n if (list.indexOf(result.townName) >= 0 && result.count > 0) {\r\n param.geo = result.geo;\r\n param.height = 100 * result.count;\r\n param.surfaceHeight = 4000;\r\n param.epsg = 3826;\r\n param.color = color;\r\n param.drawBorder = false;\r\n this.oviewLayer.addPolygonPrismEntity(param);\r\n\r\n textParam.geo = new window.GeoPoint(result.geo.Center.x, result.geo.Center.y, 4000 + 100 * result.count);\r\n textParam.color = new window.ov.Color(\"#FFFFFF\");\r\n textParam.text = result.townName + \"(\" + result.count + \"筆)\";\r\n textParam.size = 14;\r\n textParam.borderColor = new window.ov.Color(\"#000000\");\r\n textParam.borderSize = 4;\r\n textParam.epsg = 3826;\r\n }\r\n else {\r\n param.geo = this.lines[index];\r\n param.color = color;\r\n param.size = 4;\r\n param.epsg = 3826;\r\n this.oviewLayer.addPolylineEntity(param);\r\n\r\n textParam.geo = new window.GeoPoint(result.geo.Center.x, result.geo.Center.y, 4000);\r\n textParam.color = new window.ov.Color(\"#FFFFFF\");\r\n textParam.text = result.townName + \"(\" + result.count + \"筆)\";\r\n textParam.size = 14;\r\n textParam.borderColor = new window.ov.Color(\"#000000\");\r\n textParam.borderSize = 4;\r\n textParam.epsg = 3826;\r\n }\r\n\r\n this.oviewLayer.addTextEntity(textParam);\r\n });\r\n }\r\n }\r\n\r\n risingAnimation() {\r\n let timeset;\r\n timeset = setInterval(function () {\r\n let stop = true;\r\n this.risingEntity.forEach(entity => {\r\n let height = entity.entity.getParameter().height;\r\n if (!entity.entity || !this.oviewLayer) {\r\n clearInterval(timeset);\r\n }\r\n\r\n if (height < 100 * entity.count) {\r\n stop = false;\r\n height += 100 * (entity.count / 10);\r\n entity.entity.update({\r\n height: height,\r\n });\r\n }\r\n });\r\n\r\n if (stop) {\r\n this.risingEntity.forEach((entity, index) => {\r\n if (this.oviewLayer) {\r\n this.oviewLayer.addTextEntity(entity.textParam);\r\n\r\n if (entity.count === 0) {\r\n let param = {};\r\n param.geo = this.lines[index];\r\n param.color = this.colorList[index];\r\n param.size = 4;\r\n param.epsg = 3826;\r\n this.oviewLayer.addPolylineEntity(param);\r\n }\r\n }\r\n });\r\n clearInterval(timeset);\r\n this.stopAnimation = true;\r\n }\r\n }.bind(this), 100);\r\n }\r\n\r\n getCustomLayer() {\r\n try {\r\n let layer = window.gMainMap.TerrainView.findLayer(this.layerInfo.Name);\r\n if (!layer) {\r\n layer = window.gMainMap.TerrainView.addCustomLayer(this.layerInfo.Name);\r\n }\r\n layer.setDepthTest(false);\r\n return layer;\r\n } catch (error) {\r\n return null;\r\n }\r\n }\r\n}","import { LayerModule } from './.LayerModule.js';\r\nimport ApiLayersMap from '../WebApiModules/ApiLayersMap.js';\r\n\r\nexport class VectorTileLayerModule extends LayerModule {\r\n async OpenLayer(callback) {\r\n return new Promise((rs) => {\r\n ApiLayersMap.ListLayerInfo(\r\n { FolderFullName: this.layerInfo.FolderFullName, Name: this.layerInfo.Name },\r\n (obj) => {\r\n console.log(obj);\r\n let result = obj.result;\r\n let url = result.URL || `${window.gMainMap.OviewMapServerUrlUnderProxy()}/3857/${result.ID}/{z}/{x}/{y}.vector.mvt`\r\n console.log(url);\r\n this.oviewLayer = window.gMainMap.TerrainView.addTerrainVectorTileOverlay({\r\n url: url,\r\n urlTemplate: result.URLTemplate || window.gMainMap.ProxyUrlTemplete(),\r\n layername: result.Name,\r\n lineWidth: 5,\r\n minLevel: 0,\r\n maxLevel: 18,\r\n opacity: 1.0,\r\n visibleFactor: 20.0,\r\n isGeoJson: false,\r\n pointSetting: {\r\n textLabel: result.TextLabel,\r\n fadeEffect: true,\r\n allowOverlapping: false,\r\n groundLineColor: new window.ov.Color(\"#FF0000\"),\r\n fontTable: {\r\n \"DEFAULT\": {\r\n font: \"標楷體\",\r\n fontSize: 16,\r\n fontColor: new window.ov.Color(\"#000000\"),\r\n fontBorderSize: 1,\r\n fontBorderColor: \"#ffff00\",\r\n pullUpY: 100,\r\n },\r\n }\r\n },\r\n polylineSetting: {\r\n colorTable: {\r\n \"DEFAULT\": {\r\n color: \"#e0e0e080\"\r\n },\r\n }\r\n },\r\n polygonSetting: {\r\n //colorLabel: \"show_color_label\",\r\n colorTable: {\r\n \"DEFAULT\": {\r\n fillColor: \"#FF0000\",\r\n boundaryColor: \"#00FF00\",\r\n boundaryWidth: 2\r\n }\r\n }\r\n }\r\n }, rs);\r\n },\r\n () => {\r\n console.error(`取得${this.layerInfo.FolderFullName}/${this.layerInfo.Name}圖層資訊失敗`)\r\n }\r\n )\r\n }).then((param) => {\r\n console.log(param);\r\n console.log(this.oviewLayer);\r\n if (param.message === \"duplicate name exists\") { // 如果只是名稱重複當作成功\r\n this.oviewLayer = window.gMainMap.TerrainView.getTerrainOverlay(this.layerInfo.Name);\r\n param.success = true;\r\n }\r\n // 有參考的圖層到都加進去\r\n window.gMainMap.TerrainView.openedLayerStack.push(this.oviewLayer.layername);\r\n callback && callback(param);\r\n return param.success;\r\n }, () => {\r\n return false;\r\n });\r\n }\r\n}","import { LayerModule } from './.LayerModule';\r\nimport ApiLayersMap from '../WebApiModules/ApiLayersMap.js';\r\n\r\nexport class LayerI3SModule extends LayerModule {\r\n async OpenLayer(callback) {\r\n return new Promise((rs) => {\r\n ApiLayersMap.ListLayerInfo(\r\n { FolderFullName: this.layerInfo.FolderFullName, Name: this.layerInfo.Name },\r\n (obj) => {\r\n console.log(obj);\r\n let result = obj.result;\r\n window.gMainMap.TerrainView.addOGCI3SLayer({\r\n url: result.URL,\r\n urlTemplate: result.URLTemplate || window.gMainMap.ProxyUrlTemplete(),\r\n identifier: result.ID,\r\n callback: (success, layer) => {\r\n rs({ success, layer })\r\n },\r\n });\r\n },\r\n () => {\r\n console.error(`取得${this.layerInfo.FolderFullName}/${this.layerInfo.Name}圖層資訊失敗`)\r\n }\r\n )\r\n }).then((param) => {\r\n console.log(param);\r\n // 有參考的圖層到都加進去\r\n this.oviewLayer = param.layer;\r\n window.gMainMap.TerrainView.openedLayerStack.push(this.oviewLayer.name);\r\n\r\n callback && callback(param);\r\n return param.success;\r\n }, () => {\r\n return false;\r\n });\r\n }\r\n}","import { LayerModule } from './.LayerModule.js';\r\nimport { LayerModuleFactory } from './.LayerModuleFactory'\r\n\r\nexport class LayerGroupModule extends LayerModule {\r\n constructor(terrainView, layerInfo) {\r\n super(terrainView, layerInfo);\r\n\r\n this.children = this._GetChildren();\r\n }\r\n\r\n _GetChildren() {\r\n let rtn = [];\r\n\r\n for (let i in this.layerInfo.Layers) {\r\n let layer = this.layerInfo.Layers[i];\r\n rtn.push(LayerModuleFactory.CreateLayer(this.terrainView, layer));\r\n }\r\n\r\n return rtn;\r\n }\r\n\r\n\r\n async OpenLayer(callback) {\r\n let promises = [];\r\n this.children.forEach((child) => {\r\n promises.push(child.OpenLayer());\r\n });\r\n Promise.all(promises).then((results) => {\r\n let success = true;\r\n results.forEach((result) => {\r\n success &= result;\r\n })\r\n callback && callback({ success: success });\r\n });\r\n }\r\n async RemoveLayer() {\r\n this.children.forEach((child) => {\r\n child.RemoveLayer();\r\n });\r\n }\r\n async SetOpacity(value) {\r\n this.children.forEach((child) => {\r\n child.SetOpacity(value);\r\n });\r\n }\r\n\r\n async Goto() {\r\n if (this.layerInfo.Goto) {\r\n this.terrainView.gotoCamera(\r\n new window.ov.Camera(\r\n new window.Geo3DPoint(this.layerInfo.Goto.Pos),\r\n new window.Geo3DPoint(this.layerInfo.Goto.V),\r\n new window.Geo3DPoint(this.layerInfo.Goto.Up),\r\n ), true);\r\n } else {\r\n // 定位到第一個子圖層\r\n this.children.length > 0 && this.children[0].Goto();\r\n }\r\n }\r\n}","import { LayerModule } from \"./.LayerModule\";\r\nimport { OverlayLayerModule } from \"./OverlayLayerModule\";\r\nimport { Layer3DTilesModule } from \"./Layer3DTilesModule\";\r\nimport { ModelLayerModule } from \"./ModelLayerModule\";\r\nimport { ModelsetLayerModule } from \"./ModelsetLayerModule\";\r\nimport { PhotogrammetryModelLayerModule } from \"./PhotogrammetryModelLayerModule\";\r\nimport { PipelineLayerModule } from \"./PipelineLayerModule\";\r\nimport { CustomEconomicDataLayerModule } from \"./CustomEconomicDataLayerModule\";\r\nimport { VectorTileLayerModule } from \"./VectorTileLayerModule\";\r\nimport { LayerI3SModule } from \"./LayerI3SModule\";\r\nimport { LayerGroupModule } from \"./LayerGroupModule\";\r\n\r\nexport class LayerModuleFactory {\r\n static CreateLayer = (terrainView, layerInfo) => {\r\n let rtn;\r\n let type = layerInfo.Class.toLowerCase();\r\n switch (type) {\r\n case \"folder\": {\r\n rtn = new LayerGroupModule(terrainView, layerInfo);\r\n break;\r\n }\r\n case \"overlay\": {\r\n rtn = new OverlayLayerModule(terrainView, layerInfo);\r\n break;\r\n }\r\n case \"modelset\": {\r\n rtn = new ModelsetLayerModule(terrainView, layerInfo);\r\n break;\r\n }\r\n case \"pipeline\": {\r\n rtn = new PipelineLayerModule(terrainView, layerInfo);\r\n break;\r\n }\r\n case \"vectortile\": {\r\n rtn = new VectorTileLayerModule(terrainView, layerInfo);\r\n break;\r\n }\r\n // case \"vector3d\": {\r\n // rtn = new VectorLayerController(terrainView, layerInfo);\r\n // break;\r\n // }\r\n case \"bim\": {\r\n rtn = new ModelLayerModule(terrainView, layerInfo);\r\n break;\r\n }\r\n case \"photogrammetry\": {\r\n rtn = new PhotogrammetryModelLayerModule(terrainView, layerInfo);\r\n break;\r\n }\r\n case \"customeconomic\": {\r\n rtn = new CustomEconomicDataLayerModule(terrainView, layerInfo);\r\n break;\r\n }\r\n // case \"well\": {\r\n // rtn = new WellLayerController(terrainView, layerInfo);\r\n // break;\r\n // }\r\n // case \"landmark3d\": {\r\n // rtn = new LandMark3DLayerController(terrainView, layerInfo);\r\n // break;\r\n // }\r\n // case \"multi\": {\r\n // rtn = new MultiLayerController(terrainView, layerInfo);\r\n // break;\r\n // }\r\n case \"3dtiles\": {\r\n rtn = new Layer3DTilesModule(terrainView, layerInfo);\r\n break;\r\n }\r\n case \"i3s\": {\r\n rtn = new LayerI3SModule(terrainView, layerInfo);\r\n break;\r\n }\r\n case \"clicklayer\":\r\n default:\r\n rtn = new LayerModule(terrainView, layerInfo)\r\n break;\r\n }\r\n return rtn;\r\n }\r\n}","import React, { Component } from \"react\";\r\n\r\nimport './Loading.css'\r\n\r\nexport class Loading extends Component {\r\n render() {\r\n return (\r\n
\r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n ","import React, { Component } from 'react';\r\n\r\nimport './LocateButton.css'\r\n\r\nimport imgLocate from './.image/locate.png'\r\nexport class LocateButton extends Component {\r\n\r\n constructor(props) {\r\n super(props)\r\n }\r\n\r\n render() {\r\n return (\r\n
\r\n
\r\n
\r\n );\r\n }\r\n}","import React, { Component } from \"react\";\r\nimport { OpacityRange } from \"../../../../.common/OpacityRange/OpactiyRange\";\r\nimport { LayerModuleFactory } from \"../../../../../modules/LayerModules/.LayerModuleFactory\";\r\nimport { Loading } from \"../../../../.common/Loading/Loading\";\r\nimport { LayoutContext } from '../../../../../modules/ContextModules/LayoutContext';\r\n\r\nimport './LayerItem.css'\r\n\r\nimport commonImg from './.image/layer.png'\r\nimport folderImg from './.image/folder.png'\r\nimport backgroundImg from './.image/矩形 51@3x.png'\r\nimport { LocateButton } from \"../../../../.common/Buttons/Locate/LocateButton\";\r\n//import { RemoveButton } from \"../../../../.common/Buttons/Remove/RemoveButton\";\r\n\r\nexport class LayerItem extends Component {\r\n static contextType = LayoutContext;\r\n constructor(props) {\r\n super(props);\r\n this.layerModule = null;\r\n this.coreLayer = null;\r\n\r\n this.state = {\r\n isOpenedCoreLayers: false\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n this.layerModule = LayerModuleFactory.CreateLayer(window.gMainMap.TerrainView, this.props.data);\r\n this.layerModule.OpenLayer(this.openCallback);\r\n }\r\n\r\n componentWillUnmount() {\r\n this.handleRemove();\r\n }\r\n\r\n render() {\r\n return (\r\n
\r\n
\r\n {/* 圖層標頭 */}\r\n
\r\n
\r\n
\r\n
\r\n
{this.props.data.Name} \r\n
\r\n
\r\n {\r\n this.state.isOpenedCoreLayers ?\r\n
\r\n
\r\n {/* {\r\n this.state.isOpenedCoreLayers ?\r\n
\r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n : \r\n } */}\r\n\r\n
\r\n {/* 透明度拉條 */}\r\n {\r\n this.state.isOpenedCoreLayers && this.props.data.ID !== \"pipeline\" && !this.props.data.Name.includes(\"3DTiles\") ?\r\n
\r\n
\r\n : null\r\n }\r\n\r\n
\r\n );\r\n }\r\n\r\n imgWithType() {\r\n switch (this.props.data.Class) {\r\n case \"FOLDER\":\r\n return folderImg;\r\n default:\r\n return commonImg;\r\n }\r\n }\r\n\r\n openCallback = (param) => {\r\n const { socioeconomicContext } = this.context;\r\n const { readilyAvailableHouseToolContext } = this.context;\r\n this.setState({\r\n isOpenedCoreLayers: param.success\r\n });\r\n\r\n this.coreLayer = this.layerModule.oviewLayer;\r\n if (param.ID && param.ID === \"南投市近似化建物\") {\r\n readilyAvailableHouseToolContext.set(this.coreLayer);\r\n this.coreLayer.setOnClickEntity(this.addBuildOnClickEntity.bind(this));\r\n }\r\n\r\n if (param.ID && param.ID.includes(\"3D社會經濟地圖\")) {\r\n if (socioeconomicContext.layerModule) {\r\n socioeconomicContext.layerModule.RemoveLayer();\r\n this.props.handleRemove([socioeconomicContext.layerModule.layerInfo.Name]);\r\n }\r\n socioeconomicContext.update({ layerModule: this.layerModule });\r\n socioeconomicContext.remove();\r\n\r\n this.context\r\n .draggableWindowContext[\"socioeconomic\"]\r\n .update({\r\n isOpened: true,\r\n isMinimized: false\r\n });\r\n }\r\n }\r\n\r\n //建物模型點擊事件\r\n addBuildOnClickEntity(id, pos) {\r\n const { LayerAttrsRndContext } = this.context;\r\n const { readilyAvailableHouseToolContext } = this.context;\r\n const { draggableWindowContext } = this.context;\r\n this.coreLayer.getColAndAttrs(id, function (attrs) {\r\n let obj = {};\r\n for (let i = 1; i < attrs.ATTR.length; i++) {\r\n let col = LayerAttrsRndContext.attrsMaps[0][attrs.COL[i]];\r\n obj[col] = attrs.ATTR[i];\r\n }\r\n\r\n LayerAttrsRndContext.update({\r\n isShowLayerAttrsRnd: true,\r\n layerAttrsRnd: obj,\r\n layerAttrsRndTitle: attrs.ATTR[2] + \":\" + attrs.ATTR[0],\r\n layerAttrsRndPosition: { x: pos.x, y: pos.y }\r\n });\r\n });\r\n this.coreLayer.resetAllOpacityEntityID();\r\n this.coreLayer.resetAllHideEntityID();\r\n this.coreLayer.removeBuildingFloorColor(id);\r\n if (draggableWindowContext.readilyAvailableHouseTool.isOpened) {\r\n this.coreLayer.setOpacityByEntityID(id, 0.7);\r\n this.coreLayer.setHideByEntityID(id, window.ov.HIDE.DISABLE_SELECT);\r\n readilyAvailableHouseToolContext.setID(id);\r\n }\r\n }\r\n\r\n handleChangeOpacityValue = (event) => {\r\n this.layerModule.SetOpacity(Number(event.currentTarget.value) / 100);\r\n if (this.props.data.ID.includes(\"社會經濟\") && this.props.data.Name.includes(\"3D\")) {\r\n this.coreLayer.entities.forEach(entity => {\r\n entity.update({ opacity: Number(event.currentTarget.value) / 100 });\r\n })\r\n }\r\n }\r\n\r\n handleLocate = () => {\r\n this.layerModule.Goto();\r\n }\r\n\r\n handleRemove = () => {\r\n const { socioeconomicContext } = this.context;\r\n const { readilyAvailableHouseToolContext } = this.context;\r\n console.log(this.props.data.Name);\r\n\r\n if (this.props.data.ID === \"南投市近似化建物\") {\r\n readilyAvailableHouseToolContext.remove();\r\n }\r\n\r\n if (this.props.data.ID.includes(\"社會經濟\") && this.props.data.Name.includes(\"3D\")) {\r\n socioeconomicContext.update({ isEmptyModule: true });\r\n socioeconomicContext.remove();\r\n\r\n this.context\r\n .draggableWindowContext[\"socioeconomic\"]\r\n .update({\r\n isOpened: false,\r\n isMinimized: false\r\n });\r\n }\r\n this.layerModule.RemoveLayer();\r\n this.props.handleRemove([this.props.data.Name]);\r\n }\r\n}\r\n","import React, { Component } from \"react\";\r\nimport { LayoutContext } from \"../../../../modules/ContextModules/LayoutContext\";\r\nimport { LayerItem } from \"./LayerItem/LayerItem\";\r\n\r\nimport './SelectedLayerList.css'\r\n\r\nexport class SelectedLayerList extends Component {\r\n static contextType = LayoutContext;\r\n render() {\r\n return (\r\n
\r\n {\r\n this.context.selectedLayerContext.layers.map((layer)=>{\r\n return (\r\n \r\n );\r\n })\r\n } \r\n
\r\n );\r\n }\r\n\r\n handleRemove = (removeLayers) => {\r\n this.context\r\n .selectedLayerContext\r\n .updateLayers({\r\n remove:removeLayers\r\n })\r\n }\r\n}\r\n ","import React, { Component } from \"react\";\r\nimport { LayersButton } from \"./LayersButton/LayersButton\";\r\nimport { Divider } from \"./../../.common/Divider/Divider\"\r\nimport { SelectedLayerList } from \"./SelectedLayerList/SelectedLayerList\";\r\nimport { LayoutContext } from \"../../../modules/ContextModules/LayoutContext\";\r\n\r\nimport './RightPanel.css'\r\n\r\nexport class RightPanel extends Component {\r\n static contextType = LayoutContext;\r\n render() {\r\n return (\r\n
\r\n );\r\n }\r\n\r\n layersButtonClick = () => {\r\n this.context\r\n .draggableWindowContext\r\n .layersMap\r\n .update({\r\n isOpened: true,\r\n isMinimized: false\r\n });\r\n }\r\n}\r\n ","import React, { Component } from 'react';\r\n\r\nimport './MinimizeButton.css'\r\nexport class MinimizeButton extends Component {\r\n\r\n constructor(props) {\r\n super(props)\r\n }\r\n\r\n render() {\r\n return (\r\n
\r\n );\r\n }\r\n}","import React, { Component } from 'react';\r\n\r\nimport './MaximizeButton.css'\r\nexport class MaximizeButton extends Component {\r\n render() {\r\n return (\r\n
\r\n );\r\n }\r\n}","import React, { Component } from 'react';\r\n\r\nimport './CancelButton.css'\r\n\r\nimport cancel from './.image/cancel.png'\r\nexport class CancelButton extends Component {\r\n render() {\r\n return (\r\n
\r\n
\r\n
\r\n );\r\n }\r\n}","import React, { Component } from 'react';\r\nimport Draggable from 'react-draggable';\r\nimport { Rnd } from \"react-rnd\";\r\n\r\nimport { MinimizeButton } from '../../.common/Buttons/Minimize/MinimizeButton';\r\nimport { MaximizeButton } from '../../.common/Buttons/Maximize/MaximizeButton';\r\nimport { CancelButton } from '../../.common/Buttons/Cancel/CancelButton';\r\n\r\n//\r\nimport './DraggableWindow.css'\r\n\r\n//圖片\r\n\r\nexport class DraggableWindow extends Component {\r\n constructor(props) {\r\n super(props)\r\n\r\n this.state = {\r\n opacity: false,\r\n width: this.props.width || '500px',\r\n height: this.props.height || '500px',\r\n }\r\n }\r\n\r\n render() {\r\n {/*< Draggable\r\n handle = \".draggableWindow__header\"\r\n defaultPosition = { this.props.defaultPosition || { x: 200, y: 200 } }\r\n bounds = \"parent\"\r\n position = { this.props.position }\r\n grid = { [5, 5]}\r\n scale = { 1}\r\n onStart = { this.handleStart }\r\n onDrag = { this.handleDrag }\r\n onStop = { this.handleStop } >*/}\r\n {/**/ }\r\n return (\r\n
{\r\n if (this.props.handleResize) {\r\n this.props.handleResize(ref.style.width, ref.style.height);\r\n }\r\n\r\n this.setState({\r\n width: (ref.style.width),\r\n height: (ref.style.height),\r\n });\r\n }}\r\n style={{ display: this.props.isShow ? 'inline-block' : 'none' }}\r\n >\r\n \r\n
\r\n
\r\n {this.props.header || this.header()}\r\n \r\n
\r\n */}\r\n {this.props.header != \"社會經濟資料\" ?
\r\n
\r\n
\r\n {this.props.content || this.content()}\r\n
\r\n
配置內容
);\r\n }\r\n\r\n display = () => {\r\n return this.context\r\n .draggableWindowContext\r\n .layersMap\r\n }\r\n\r\n handleStart = () => {\r\n this.setState({\r\n opacity: true\r\n })\r\n this.props.handleStart && this.props.handleStart();\r\n };\r\n\r\n handleDrag = () => {\r\n this.props.handleDrag && this.props.handleDrag();\r\n }\r\n\r\n handleStop = () => {\r\n this.setState({\r\n opacity: false\r\n })\r\n this.props.handleStop && this.props.handleStop();\r\n };\r\n\r\n handleMinimize = () => {\r\n console.log(\"縮小\");\r\n this.props.handleMinimize && this.props.handleMinimize();\r\n }\r\n\r\n handleMaximize = () => {\r\n console.log(\"放大\");\r\n this.props.handleMaximize && this.props.handleMaximize();\r\n }\r\n\r\n handleCancel = () => {\r\n console.log(\"關閉\");\r\n this.props.handleCancel && this.props.handleCancel();\r\n }\r\n}","import React, { Component } from 'react';\r\n\r\nimport ApiLayersMap from '../../../../../../modules/WebApiModules/ApiLayersMap';\r\nimport { LayerContext } from '../../../../../../modules/ContextModules/LayoutContext';\r\nimport { LayoutContext } from '../../../../../../modules/ContextModules/LayoutContext';\r\nimport './Layer.css'\r\n\r\nimport layerImg from './.image/layer.png'\r\n\r\nexport class Layer extends Component {\r\n static contextType = LayoutContext;\r\n constructor(props) {\r\n super(props)\r\n\r\n this.state = {\r\n isOpened: false\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n
{ e.stopPropagation(); }}\r\n onChange={(e) => { this.handleLayerOpen(e); }}\r\n checked={this.isCheck()}\r\n />\r\n
\r\n
\r\n
\r\n
{this.props.data.Name} \r\n
\r\n );\r\n }\r\n\r\n isCheck() {\r\n const { selectedLayerContext } = this.context;\r\n for (const layer of selectedLayerContext.layers) {\r\n if (layer.Name === this.props.data.Name) {\r\n return true;\r\n }\r\n }\r\n return false;\r\n }\r\n\r\n handleLayerOpen = (event) => {\r\n // 開啟\r\n \r\n if (/*event.currentTarget.checked*/!this.isCheck() === true) {\r\n this.props.updateLayerList.addLayerToList(this.props.data/*{\r\n Name: this.props.name,\r\n Data: this.props.data,\r\n Class: this.props.class\r\n }*/);\r\n // ApiLayersMap.ListLayerInfo(\r\n // { FolderFullName: this.props.data, Name: this.props.name },\r\n // (result) => {\r\n // console.log(result);\r\n // },\r\n // () => {\r\n // console.error(`取得${this.props.data}/${this.props.name}圖層資訊失敗`)\r\n // }\r\n // )\r\n } else {\r\n this.props.updateLayerList.removeLayerFromList(this.props.data/*{\r\n Name: this.props.name,\r\n Data: this.props.data,\r\n Class: this.props.class\r\n }*/);\r\n }\r\n // 關閉\r\n // 通知已選圖層\r\n \r\n event.stopPropagation();\r\n }\r\n}","import React, { Component } from 'react';\r\n\r\nimport './Folder.css'\r\n\r\nimport { Layer } from '../Layer/Layer';\r\n\r\nimport expandImg from './.image/expand.png'\r\nimport collapseImg from './.image/collapse.png'\r\nimport folderImg from './.image/folder.png'\r\n\r\nexport class Folder extends Component {\r\n constructor(props) {\r\n super(props)\r\n\r\n this.state = {\r\n expand: false\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n
\r\n
\r\n
\r\n {/*
{e.stopPropagation();}} \r\n onChange={this.handleLayerOpen}>*/}\r\n
\r\n
\r\n
\r\n
{this.props.data.Name} \r\n
\r\n );\r\n }\r\n\r\n parseData = (data) => {\r\n return data.map((item, index)=>{\r\n return (\r\n item.Class==\"FOLDER\" ?\r\n :\r\n \r\n );\r\n });\r\n }\r\n\r\n handleLayerOpen = (event) => {\r\n if (event.currentTarget.checked === true) {\r\n this.props.updateLayerList.addLayerToList(this.props.data/*{\r\n Name: this.props.name,\r\n Data: this.props.data,\r\n Class: this.props.class\r\n }*/)\r\n } else {\r\n this.props.updateLayerList.removeLayerFromList(this.props.data/*{\r\n Name: this.props.name,\r\n Data: this.props.data,\r\n Class: this.props.class\r\n }*/);\r\n }\r\n event.stopPropagation();\r\n }\r\n\r\n handleClick = ()=>{\r\n this.setState({\r\n expand: !this.state.expand\r\n });\r\n }\r\n\r\n toggleImage = () => {\r\n return this.state.expand ? collapseImg : expandImg;\r\n }\r\n}","import React, { Component } from 'react';\r\n\r\nimport { Folder } from './Folder/Folder';\r\nimport { Layer } from './Layer/Layer';\r\nimport './LayersList.css'\r\n\r\n\r\nexport class LayersList extends Component {\r\n constructor(props) {\r\n super(props)\r\n\r\n this.state = {\r\n expand: false\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n {this.parseData(this.props.data)}\r\n \r\n
:\r\n \r\n );\r\n });\r\n } \r\n}","import React from 'react';\r\n\r\nvar reviewLayers = {\r\n \"2DLayer\": [\r\n {\r\n ID: \"(管線分布圖)消防栓\"\r\n },\r\n {\r\n ID: \"(管線分布圖)號誌\"\r\n },\r\n {\r\n ID: \"(管線分布圖)電桿\"\r\n },\r\n ],\r\n \"3DLayer\": [\r\n {\r\n ID: \"pipeline\"\r\n },\r\n ]\r\n}\r\n\r\nexport default reviewLayers;","import React, { Component } from 'react';\r\nimport { DraggableWindow } from './../DraggableWindow';\r\n\r\nimport { LayoutContext } from '../../../../modules/ContextModules/LayoutContext';\r\nimport { LayersList } from './LayersList/LayersList';\r\nimport ApiLayersMap from '../../../../modules/WebApiModules/ApiLayersMap';\r\nimport { Divider } from './../../../.common/Divider/Divider';\r\n\r\nimport ls from 'localstorage-slim';\r\nimport reviewLayers from '../LayersMap/LayerReview';\r\n\r\nimport './LayersMap.css'\r\nexport class LayersMap extends Component {\r\n static contextType = LayoutContext;\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n layers: [\r\n //{\r\n // FolderFullName: \"\",\r\n // IsFolder: true,\r\n // Name: \"底圖\",\r\n // Layers: [{ FolderFullName: \"\\/底圖\", Name: \"正射影像\"},{ FolderFullName: \"\\/底圖\", Name: \"電子地圖\", Class: \"OVERLAY\", IsDefault: true}]\r\n //},\r\n //{\r\n // FolderFullName: \"\",\r\n // IsFolder: true,\r\n // Name: \"三維圖資\",\r\n // Layers: [{ FolderFullName: \"\\/三維圖資\", Name: \"管線\"},{ FolderFullName: \"\\/三維圖資\", Class: \"FOLDER\", Name: \"傾斜攝影集\", Layers: [{ FolderFullName: \"\\/三維圖資\\/傾斜攝影集\", Name: \"傾斜攝影\", Class: \"PHOTOGRAMMETRY\"}]}]\r\n //}\r\n ]\r\n }\r\n this.addedLayers = [];\r\n this.updateLayerList = {\r\n addedLayers: this.addedLayers,\r\n addLayerToList: (layerInfo) => {\r\n this.handleAddingClick(layerInfo);\r\n },\r\n removeLayerFromList: (layerInfo) => {\r\n const { selectedLayerContext } = this.context;\r\n for (let i = 0; i < selectedLayerContext.layers.length; i++) {\r\n let addedLayer = selectedLayerContext.layers[i];\r\n if (addedLayer.Name === layerInfo.Name) {\r\n this.handleRemoveClick(layerInfo.Name);\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n let lsInfo = ls.get(\"userInfo\", { decrypt: true });\r\n ApiLayersMap.ListAll(\r\n // success\r\n async (result) => {\r\n if (result.success) {\r\n if (!lsInfo) {\r\n reviewLayers['2DLayer'].forEach((item) => {\r\n this.removeLayerFromResult(result.result, item);\r\n });\r\n\r\n reviewLayers['3DLayer'].forEach((item) => {\r\n this.removeLayerFromResult(result.result, item);\r\n });\r\n\r\n this.removeEmptyFolder(result.result);\r\n this.setState({\r\n layers: result.result\r\n })\r\n }\r\n else {\r\n let url2DAuthLayer = \"https://ntmap.nantou.gov.tw/server/layer/get2DLayerList\";\r\n let url3DAuthLayer = \"https://ntmap.nantou.gov.tw/server/layer/get3DLayerList\";\r\n\r\n await this.reviewLayerWithAuth(reviewLayers['2DLayer'], url2DAuthLayer, result.result);\r\n await this.reviewLayerWithAuth(reviewLayers['3DLayer'], url3DAuthLayer, result.result);\r\n }\r\n this.setState({\r\n layers: result.result\r\n })\r\n } else {\r\n console.error(`取的圖層清單失敗，${result.error}`);\r\n }\r\n },\r\n // error\r\n () => {\r\n console.error(\"取的圖層清單失敗\");\r\n })\r\n }\r\n\r\n async reviewLayerWithAuth(reviewLayerList, url, list) {\r\n let rtn = await new Promise(rs => {\r\n fetch(url, {\r\n method: \"POST\",\r\n headers: { 'Content-Type': 'application/json' },\r\n body: JSON.stringify({})\r\n }).then((response) => {\r\n return response.json();\r\n }).then(function (json) {\r\n if (json.success) {\r\n\r\n reviewLayerList.forEach((item) => {\r\n let condition = (element) => item.ID === element.layername;\r\n if (!json.ret.some(condition)) {\r\n this.removeLayerFromResult(list, item);\r\n }\r\n });\r\n this.removeEmptyFolder(list);\r\n rs(true)\r\n }\r\n else {\r\n rs(false);\r\n }\r\n }.bind(this)).catch((error) => {\r\n console.log(`Error: ${error}`);\r\n rs(false);\r\n })\r\n });\r\n\r\n return await rtn;\r\n }\r\n\r\n removeLayerFromResult(list, removeItem) {\r\n for (let i = 0; i < list.length; i++) {\r\n if (list[i].Class === \"FOLDER\") {\r\n if (this.removeLayerFromResult(list[i].Layers, removeItem)) {\r\n return true;\r\n }\r\n }\r\n else {\r\n if (list[i].ID === removeItem.ID) {\r\n list.splice(i, 1);\r\n return true;\r\n }\r\n }\r\n }\r\n\r\n return false;\r\n }\r\n\r\n removeEmptyFolder(list) {\r\n list.forEach(listItem => {\r\n if (listItem.Class === \"FOLDER\") {\r\n if (listItem.Layers.length === 0) {\r\n list.splice(list.indexOf(listItem), 1);\r\n }\r\n else {\r\n this.removeEmptyFolder(listItem.Layers);\r\n }\r\n }\r\n });\r\n }\r\n\r\n render() {\r\n // 在 render 中將可以使用 this.context\r\n return (\r\n \r\n
\r\n
\r\n
\r\n {/*
加入
*/}\r\n
\r\n
\r\n
\r\n
\r\n
{this.props.data.name} \r\n
\r\n {\r\n this.list.map(item=>{\r\n return \r\n })\r\n }\r\n
\r\n );\r\n }\r\n\r\n handleClick = (data) => {\r\n switch(data.name) {\r\n case \"平面距離測量\": {\r\n window.gMainMap.TerrainView.abortInput();\r\n window.alertify.log(\"平面距離測量中，單擊左鍵選取起點，雙擊左鍵選取終點。\");\r\n window.gMainMap.TerrainView.measureSurfaceLength({onCompleted:()=>{}});\r\n }\r\n break;\r\n case \"空間距離測量\": {\r\n window.gMainMap.TerrainView.abortInput();\r\n window.alertify.log(\"空間距離測量中，單擊左鍵選取起點，雙擊左鍵選取終點。\");\r\n window.gMainMap.TerrainView.measureSpatialLength({onCompleted:()=>{}}); \r\n }\r\n break;\r\n case \"垂直高度測量\": {\r\n window.gMainMap.TerrainView.abortInput();\r\n window.alertify.log(\"高度測量中，單擊滑鼠左鍵選取起終點。\");\r\n window.gMainMap.TerrainView.measureHeight({onCompleted:()=>{}});\r\n }\r\n break;\r\n case \"區域面積測量\": {\r\n window.gMainMap.TerrainView.abortInput();\r\n window.alertify.log(\"區域面積測量中，單擊左鍵選取起點，雙擊左鍵完成繪製。\");\r\n window.gMainMap.TerrainView.measureArea({onCompleted:()=>{}});\r\n }\r\n break;\r\n case \"清除測量標記\": {\r\n window.gMainMap.TerrainView.clearMeasure({onCompleted:()=>{\r\n window.alertify.success(\"已清除測量標記。\");\r\n }});\r\n }\r\n break;\r\n }\r\n } \r\n\r\n //縮小視窗 暫用不到\r\n minimizeWindow = () => {\r\n this.state\r\n .draggableWindowContext\r\n .measureTool\r\n .update({\r\n isOpened: false,\r\n });\r\n }\r\n}","import React, { Component } from 'react';\r\n\r\nimport './MarkItem.css'\r\nexport class MarkItem extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n }\r\n\r\n }\r\n\r\n componentDidMount() {\r\n }\r\n\r\n render() {\r\n // 在 render 中將可以使用 this.context\r\n return (\r\n \r\n
\r\n
\r\n
\r\n
{this.props.data.name} \r\n
\r\n
\r\n {\r\n this.list.map(item => {\r\n if (this.state.isOpenFunc && item.name === this.state.funcName) {\r\n return
\r\n {\r\n this.state.isOpenFunc ?\r\n
\r\n 標註顏色:\r\n
\r\n \r\n \r\n
\r\n 標註文字:\r\n
\r\n
\r\n {\r\n this.state.funcName === \"點標註\" ?\r\n <>\r\n 標註樣式:\r\n
\r\n
{ this.imgActive_OnClick(e) }} />\r\n
{ this.imgActive_OnClick(e) }} />\r\n
{ this.imgActive_OnClick(e) }} />\r\n
\r\n :\r\n null\r\n }\r\n
{ this.doMark_OnClick(); }}>開始輸入 \r\n
: null\r\n }\r\n
\r\n {this.props.data.text} \r\n
\r\n );\r\n }\r\n\r\n calculateWidth(param) {\r\n let sizeOfSingleCharacter = param.fontSize;\r\n let length = param.text.length;\r\n let res = sizeOfSingleCharacter;\r\n try {\r\n if (sizeOfSingleCharacter.indexOf(\"rem\") > 0) {\r\n sizeOfSingleCharacter = sizeOfSingleCharacter.replace(\"rem\", \"\");\r\n res = `${this.convertRemToPixels(Number(sizeOfSingleCharacter))*length*2}px`;\r\n } else if (sizeOfSingleCharacter.indexOf(\"px\") > 0){\r\n sizeOfSingleCharacter = sizeOfSingleCharacter.replace(\"px\", \"\");\r\n res = `${Number(sizeOfSingleCharacter)*length*2}px`;\r\n } else {\r\n res = `${Number(sizeOfSingleCharacter)*length*2}px`;\r\n }\r\n }\r\n catch(ex) {\r\n res = null;\r\n } \r\n\r\n return res;\r\n }\r\n\r\n calculateHeight(param) {\r\n let sizeOfSingleCharacter = param.fontSize;\r\n let res = sizeOfSingleCharacter;\r\n try {\r\n if (sizeOfSingleCharacter.indexOf(\"rem\") > 0) {\r\n sizeOfSingleCharacter = sizeOfSingleCharacter.replace(\"rem\", \"\");\r\n res = `${this.convertRemToPixels(Number(sizeOfSingleCharacter))*2}px`;\r\n } else if (sizeOfSingleCharacter.indexOf(\"px\") > 0){\r\n sizeOfSingleCharacter = sizeOfSingleCharacter.replace(\"px\", \"\");\r\n res = `${Number(sizeOfSingleCharacter)*2}px`;\r\n } else {\r\n res = `${Number(sizeOfSingleCharacter)*2}px`;\r\n }\r\n }\r\n catch(ex) {\r\n res = null;\r\n } \r\n return res;\r\n }\r\n\r\n convertRemToPixels(rem) { \r\n return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);\r\n }\r\n}","import React, {Component} from \"react\";\r\nimport { TextButton } from \"../Buttons/Text/TextButton\";\r\n\r\nimport \"./InputFile.css\"\r\nexport class InputFile extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.inputFile = React.createRef();\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n {this.props.data.text}\r\n \r\n );\r\n }\r\n}\r\n ","import React, { Component } from \"react\";\r\n\r\nimport './AttributesTable.css'\r\n\r\nexport class AttributesTable extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n active: false,\r\n }\r\n }\r\n render() {\r\n return (\r\n \r\n {\r\n this.props.list.map((item) => {\r\n return (\r\n
\r\n );\r\n }) \r\n }\r\n
{\r\n this.state.isEdit ?
{ this.setState({ editText:e.target.value}); }} /> :\r\n
\r\n }\r\n
\r\n
\r\n {\r\n this.props.data.list.map((item)=>{\r\n return (\r\n \r\n );\r\n })\r\n } \r\n
\r\n );\r\n } \r\n}","import React, { Component } from 'react';\r\n\r\nimport './KMLAttributeOptionList.css'\r\nexport class KMLAttributeOptionList extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n }\r\n\r\n render() {\r\n // 在 render 中將可以使用 this.context\r\n return (\r\n \r\n
屬性欄位：
\r\n {\r\n Object.keys(this.props.data).map((item)=>{\r\n return (\r\n
\r\n {item} \r\n
\r\n );\r\n })\r\n } \r\n
\r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n {this.props.name} \r\n
\r\n );\r\n }\r\n\r\n handleClick = () => {\r\n this.props.handleClick && this.props.handleClick(this.props.name);\r\n }\r\n}","import React, { Component } from 'react';\r\nimport { DraggableWindow } from '../DraggableWindow';\r\nimport { LayoutContext } from '../../../../modules/ContextModules/LayoutContext';\r\nimport './ReadilyAvailableHouseTool.css'\r\nimport { ReadilyAvailableHouseItem } from './ReadilyAvailableHouseItem/ReadilyAvailableHouseItem';\r\n\r\nimport ok from './.image/ok.png';\r\nimport error from './.image/error.png';\r\nimport loading from './.image/loading.gif';\r\n\r\nexport class ReadilyAvailableHouseTool extends Component {\r\n static contextType = LayoutContext;\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n fileName: \"\",\r\n uploadDataArray: new Array(3),\r\n checkStates: [],\r\n errorMessage: \"\",\r\n tabIndex: 0,\r\n errorCols: [],\r\n errorRows: [],\r\n downloadExcel: \"\",\r\n loading:false,\r\n }\r\n\r\n this.list = [\r\n {\r\n name: \"輸入\"\r\n },\r\n {\r\n name: \"屬性檢核規則\"\r\n }\r\n ]\r\n\r\n this.checkStateName = [\"開啟SHP\", \"幾何檢核\", \"欄位檢核\", \"屬性檢核\", \"檔名檢核\"];\r\n }\r\n\r\n componentDidMount() {\r\n const { readilyAvailableHouseToolContext } = this.context;\r\n const { LayerAttrsRndContext } = this.context;\r\n this.readilyAvailableHouseToolContext = readilyAvailableHouseToolContext;\r\n this.LayerAttrsRndContext = LayerAttrsRndContext;\r\n }\r\n\r\n componentWillUnmount() {\r\n if (this.readilyAvailableHouseToolContext.layer) {\r\n this.readilyAvailableHouseToolContext.layer.resetAllOpacityEntityID();\r\n }\r\n window.gMainMap.TerrainView.removeLayer(this.Layer);\r\n }\r\n\r\n async Async_WaitMapInit() {\r\n if (window.gMainMap.IsReady) {\r\n return;\r\n }\r\n function Wait(time) {\r\n return new Promise((rs) => { setTimeout(rs, time ?? 100) })\r\n }\r\n while (!window.gMainMap.IsReady) {\r\n await Wait();\r\n }\r\n }\r\n\r\n //選擇檔案\r\n async handleUpload_OnChange(e) {\r\n if (e.target.files.length !== 3) {\r\n window.alertify.log(\"檔案數量錯誤。\");\r\n this.setState({ fileName: \"\", uploadDataArray: new Array(3) });\r\n return;\r\n }\r\n\r\n //檔案名稱\r\n let firstFile = e.target.files[0].name.substring(0, e.target.files[0].name.length - 4);\r\n let secondFile = e.target.files[1].name.substring(0, e.target.files[1].name.length - 4);\r\n let thirdFile = e.target.files[2].name.substring(0, e.target.files[2].name.length - 4);\r\n\r\n if (firstFile !== secondFile || secondFile !== thirdFile || firstFile !== thirdFile) {\r\n window.alertify.log(\"檔名不一致。\");\r\n this.setState({ fileName: \"\", uploadDataArray: new Array(3) });\r\n return;\r\n }\r\n\r\n //副檔名\r\n let firstFileType = e.target.files[0].name.substring(e.target.files[0].name.length - 4, e.target.files[0].name.length);\r\n let secondFileType = e.target.files[1].name.substring(e.target.files[1].name.length - 4, e.target.files[1].name.length);\r\n let thirdFileType = e.target.files[2].name.substring(e.target.files[2].name.length - 4, e.target.files[2].name.length);\r\n\r\n let types = [\".shp\", \".shx\", \".dbf\"];\r\n let typeNum = 0;\r\n\r\n types.forEach(type => {\r\n if (firstFileType == type || secondFileType == type || thirdFileType == type) {\r\n typeNum++;\r\n }\r\n });\r\n\r\n if (typeNum < 3) {\r\n window.alertify.log(\"缺少檔案(.shp、.shx、.dbf)其中之一\");\r\n this.setState({ fileName: \"\", uploadDataArray: new Array(3) });\r\n return;\r\n }\r\n\r\n this.convertFile(e.target.files);\r\n this.setState({ fileName: firstFile });\r\n }\r\n\r\n //轉換檔案為uploadData\r\n convertFile(file) {\r\n for (let i = 0; i < file.length; i++) {\r\n let reader = new FileReader();\r\n reader.readAsDataURL(file[i]);\r\n reader.onload = () => {\r\n let res = reader.result.split(',');\r\n let uploadDataArray = Object.assign({}, this.state.uploadDataArray);\r\n uploadDataArray[i] = {\r\n type: file[i].name.substr(-4, 4),\r\n file: res[1]\r\n };\r\n this.setState({\r\n uploadDataArray: uploadDataArray\r\n })\r\n };\r\n }\r\n }\r\n\r\n //SHP模型點擊事件\r\n addModelOnClickEntity(id, pos) {\r\n const { LayerAttrsRndContext } = this.context;\r\n this.Layer.getColAndAttrs(id, function (attrs) {\r\n let 建物層次 = Number(attrs.ATTR[attrs.COL.indexOf(\"建物層次\") + 1]);\r\n\r\n let obj = {};\r\n for (let i = 1; i < attrs.ATTR.length; i++) {\r\n let col = attrs.COL[i];\r\n obj[col] = attrs.ATTR[i];\r\n }\r\n\r\n LayerAttrsRndContext.update({\r\n isShowLayerAttrsRnd: true,\r\n layerAttrsRnd: obj,\r\n layerAttrsRndTitle: attrs.ATTR[2] + \":\" + attrs.ATTR[0],\r\n layerAttrsRndPosition: { x: pos.x, y: pos.y }\r\n });\r\n this.SetFloorColor(建物層次, \"#7CF1F3\");\r\n }.bind(this));\r\n }\r\n\r\n //改變選中樓層顏色\r\n SetFloorColor(buildingFloor, floorColor) {\r\n if (this.readilyAvailableHouseToolContext.layer) {\r\n let id = this.readilyAvailableHouseToolContext.selectedBuildingID;\r\n this.readilyAvailableHouseToolContext.layer.removeBuildingFloorColor(id);\r\n this.readilyAvailableHouseToolContext.layer.addBuildingFloorColor(id, buildingFloor, floorColor, 1); //配合建物已經半透明所以這邊給1就好，不然太淡\r\n }\r\n }\r\n\r\n //開始檢核\r\n async startCheck() {\r\n if (!this.state.loading) {\r\n let checkStates = [];\r\n\r\n this.setState({ checkStates: checkStates });\r\n let url = window.gMainMap.MakeDoCmdUrl(\"CMD_ShpCheckAndUpload\");\r\n\r\n if (this.state.fileName != \"\") {\r\n this.setState({ loading: true });\r\n this.checkStateName.forEach(stateName => {\r\n checkStates[stateName] = null;\r\n });\r\n //上傳檔案與類型\r\n let firstType = this.state.uploadDataArray[0].type;\r\n let firstFile = this.state.uploadDataArray[0].file;\r\n let secondType = this.state.uploadDataArray[1].type;\r\n let secondFile = this.state.uploadDataArray[1].file;\r\n let thirdType = this.state.uploadDataArray[2].type;\r\n let thirdFile = this.state.uploadDataArray[2].file;\r\n\r\n let postdata = {\r\n 檔案名稱: this.state.fileName,\r\n [firstType]: firstFile,\r\n [secondType]: secondFile,\r\n [thirdType]: thirdFile\r\n };\r\n\r\n try {\r\n const response = await fetch(url, {\r\n method: \"POST\",\r\n body: JSON.stringify(postdata)\r\n });\r\n\r\n const json = await response.json();\r\n if (json.success) {\r\n window.gMainMap.TerrainView.removeLayer(this.Layer);\r\n\r\n this.checkStateName.forEach(stateName => {\r\n checkStates[stateName] = true;\r\n });\r\n\r\n window.gMainMap.TerrainView.addModelSetLayer({\r\n url: window.gMainMap.OviewMapServerUrlUnderProxy(),\r\n urlTemplate: window.gMainMap.ProxyUrlTemplete(),\r\n identifier: json.layerName,\r\n callback: function (success, layer) {\r\n if (success) {\r\n this.Layer = layer;\r\n layer.setOnClickEntity(this.addModelOnClickEntity.bind(this));\r\n }\r\n this.setState({ checkStates: checkStates ,loading:false});\r\n }.bind(this),\r\n });\r\n }\r\n else {\r\n let errorIndex = this.checkStateName.indexOf(json.state);\r\n\r\n if (json.state == \"欄位檢核\") {\r\n this.setState({ errorCols: json.欄位, errorRows: json.欄位內容, loading: false });\r\n }\r\n else if (json.state == \"屬性檢核\") {\r\n this.setState({ downloadExcel: json.錯誤報表, loading: false });\r\n }\r\n\r\n this.checkStateName.forEach((stateName, index) => {\r\n if (index < errorIndex) {\r\n checkStates[stateName] = true;\r\n }\r\n else if (index == errorIndex) {\r\n checkStates[stateName] = false;\r\n }\r\n else {\r\n checkStates[stateName] = undefined;\r\n }\r\n });\r\n\r\n this.setState({ checkStates: checkStates, errorMessage: json.message, loading: false });\r\n }\r\n } catch (error) {\r\n console.log(error);\r\n this.setState({ loading: false });\r\n }\r\n }\r\n else {\r\n window.alertify.log(\"請選擇檔案\");\r\n }\r\n }\r\n }\r\n\r\n downloadErrorExcel() {\r\n const link = document.createElement(\"a\");\r\n link.href = 'data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64, ' + this.state.downloadExcel;\r\n link.download = \"錯誤報表\";\r\n link.click();\r\n link.remove();\r\n }\r\n\r\n goto() {\r\n if (this.Layer) {\r\n this.Layer.goto();\r\n }\r\n }\r\n\r\n render() {\r\n // 在 render 中將可以使用 this.context\r\n return (\r\n
\r\n );\r\n }\r\n\r\n content() {\r\n return (<>\r\n \r\n
\r\n {\r\n this.list.map(item => {\r\n return
\r\n {\r\n this.state.isOpenFunc ? <>\r\n {\r\n this.state.funcName == \"輸入\" ? this.inputDataPanel() : null\r\n }\r\n {\r\n this.state.funcName == \"屬性檢核規則\" ? this.attributeRulePanel() : null\r\n }\r\n {\r\n this.state.funcName == \"詳細資料\" ? this.detailDataPanel() : null\r\n }\r\n \r\n : null\r\n }\r\n
\r\n
\r\n 檔案:\r\n \r\n 上傳\r\n { e.persist(); this.handleUpload_OnChange(e); }}\r\n />\r\n \r\n
\r\n
\r\n { this.startCheck(); }}>\r\n 開始檢核\r\n \r\n
\r\n
\r\n 檢核步驟:\r\n
\r\n
\r\n
\r\n {\r\n this.checkStateName.map(stateName => {\r\n return (\r\n
\r\n {this.statusOfImage(this.state.checkStates[stateName])}\r\n {stateName} \r\n {this.state.checkStates[stateName] === false ? \r\n {this.state.errorMessage} : null}\r\n
\r\n )\r\n })\r\n }\r\n
\r\n
\r\n
\r\n {typeof (this.state.checkStates[\"屬性檢核\"]) != \"undefined\" ? this.state.checkStates[\"屬性檢核\"] === false ?\r\n { this.downloadErrorExcel(); }}>\r\n 匯出報表\r\n : null : null\r\n }\r\n {!!this.readilyAvailableHouseToolContext.layer ?\r\n { this.goto(); }}>\r\n 定位\r\n : null\r\n }\r\n
\r\n
\r\n
\r\n 1.所代碼(必填)，兩位數英文字母之代碼，\r\n 範例:NG\r\n
\r\n
\r\n 2.段代碼(必填)，四位數整數，不可有「-」符號，\r\n 範例:1008\r\n
\r\n
\r\n 3.建物段名(必填)，\r\n 範例:香田段\r\n
\r\n
\r\n 4.建物門牌(必填)，建物門牌欄位過長時({'>'}30個字元)，長度限制254個字元，去看「層次」欄位，判斷規則如下:\r\n
\r\n
\r\n (1).J、Y、Z、P (pass)\r\n
\r\n
\r\n (2).其他跳提醒\r\n
\r\n
\r\n 範例:儒林路3號\r\n
\r\n
\r\n 5.登記日期(必填)，格式：民國年+月+日，\r\n 範例：1000825\r\n
\r\n
\r\n 6.登記原因名(選填)，符合「資料統一代碼」表格中規範之代碼，\r\n 範例:02\r\n
\r\n
\r\n 7.主要用途名(必填)，判斷規則：\r\n
\r\n
\r\n (1).0→早期建物 (pass)\r\n
\r\n
\r\n (2).9→未登封 (pass)\r\n
\r\n
\r\n (3).A-H、J-M、P、Y、Z(pass)\r\n
\r\n
\r\n (4).空白→漏填 (跳錯)\r\n
\r\n
\r\n (5).其他跳錯誤\r\n
\r\n
\r\n 範例:Z\r\n
\r\n
\r\n 8.主要建材名(選填)，\r\n
\r\n
\r\n (1).0~20(PASS)\r\n
\r\n
\r\n (2).Y、Z(PASS)\r\n
\r\n
\r\n (3).空白(PASS)\r\n
\r\n
\r\n (4).其餘跳提醒，\r\n
\r\n
\r\n 以「鋼筋混凝土加強磚造」為例則填入12。\r\n
\r\n
\r\n 範例:12\r\n
\r\n
\r\n 9.總面積(必填)，格式為整數部分最多8位數，小數部分最多2位數\r\n\r\n
\r\n
\r\n 範例: 210.78\r\n
\r\n
\r\n 10.基地地號(必填)，8位數整數，不可有「-」符號\r\n 範例:06500000\r\n
\r\n
\r\n 11.層數(必填)，例如1、2、3，寫001、002、003\r\n 範例:002\r\n
\r\n
\r\n 12.層次(必填)\r\n
\r\n
\r\n (1).最接近地面層次紀錄(例如1、2、3，寫001、002、003；B01、B02、B03，寫B01)\r\n
\r\n
\r\n (2).A01~A29、J、Y、Z、P(跳錯誤)。\r\n
\r\n
\r\n (3).僅有數字者，歸類為地上層。\r\n
\r\n
\r\n (4).B01為地下一樓，B02為地下二樓，以此類推。\r\n
\r\n
\r\n (5).地上層或地下層以程式推算高度，其他放在地面。一層樓3公尺。【圖臺展示規則，非檢核規則】\r\n
\r\n
\r\n (6).\t夾層以0.5做紀錄。夾層高度為1.5公尺。\r\n
\r\n
\r\n 範例:002、003.5\r\n
\r\n
\r\n 13.建物完成日(必填)，格式：民國年+月+日，\r\n\r\n 範例：1000825\r\n
\r\n
\r\n 14.使用執照號(選填)\r\n 範例:83彰工管使字154763號\r\n
\r\n
\r\n 15.xcoord(必填)，TWD97坐標系統(公尺)，EPSG:3826或EPSG:3825，小數部分最多2位數，\r\n
\r\n
\r\n 範例: 186537.61\r\n
\r\n
\r\n 16.ycoord(必填)，TWD97坐標系統(公尺)，EPSG:3826或EPSG:3825，小數部分最多2位數，\r\n
\r\n
\r\n 範例: 2641213.12\r\n
\r\n
{col} \r\n );\r\n const rowList = this.state.errorRows.map((row, index) => {\r\n return (\r\n \r\n {\r\n row.map((rowEle, index) => {\r\n let style = \"\";\r\n if (rowEle.includes(\"╳\")) {\r\n style = \"errorMessage\";\r\n }\r\n return ({rowEle} );\r\n })\r\n }\r\n \r\n );\r\n });\r\n return (\r\n \r\n
\r\n \r\n \r\n {colList}\r\n \r\n \r\n \r\n {rowList}\r\n \r\n
\r\n
\r\n
{ this.setState({ isSelecting: !this.state.isSelecting }) }}\r\n >\r\n
{this.props.value ?? this.state.selectedName} \r\n
\r\n
\r\n
\r\n {\r\n this.props.Options.map((ele, index) => {\r\n let value = ele;\r\n let name = ele;\r\n if (typeof ele !== \"string\") {\r\n value = ele.value;\r\n name = ele.name;\r\n }\r\n return (\r\n
{\r\n this.setState({ isSelecting: false, selected: value, selectedName: name })\r\n let e = { target: { value: value ,name: name} }\r\n this.props.OnChange(e)\r\n }}>\r\n {name}\r\n
\r\n )\r\n })\r\n }\r\n
\r\n
\r\n {this.props.data.name} \r\n
\r\n );\r\n }\r\n\r\n handleClick = () => {\r\n this.props.handleClick&&this.props.handleClick(this.props.data);\r\n } \r\n}","import React, { Component } from 'react';\r\nimport { Input } from 'reactstrap';\r\nimport { DraggableWindow } from '../DraggableWindow';\r\nimport { InputSelect } from '../../../.common/InputSelect/InputSelect';\r\n\r\nimport { LayoutContext } from '../../../../modules/ContextModules/LayoutContext';\r\nimport { LocateItem } from './LocateItem/LocateItem';\r\nimport './LocateTool.css'\r\n\r\nimport locate from './.image/locate-2.png';\r\n\r\nexport class LocateTool extends Component {\r\n static contextType = LayoutContext;\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n isOpenFunc: false,\r\n funcName: \"\",\r\n 地址: \"\",\r\n 行政區List: [],\r\n 行政區: \"-1\",\r\n 行政區Id: \"\",\r\n 地址: \"\",\r\n 道路List: [],\r\n 道路: \"-1\",\r\n 號: \"-1\",\r\n 之: \"-1\",\r\n sectionCode: \"\",\r\n landCode: \"\",\r\n lon: \"\",\r\n lat: \"\",\r\n }\r\n\r\n this.list = [\r\n {\r\n name: \"座標定位\",\r\n },\r\n {\r\n name: \"門牌定位\",\r\n },\r\n {\r\n name: \"地號定位\",\r\n },\r\n ]\r\n }\r\n\r\n componentDidMount() {\r\n let workerWaitForInit;\r\n function waitForInit() {\r\n if (!!window.gMainMap.IsReady) {\r\n clearInterval(workerWaitForInit);\r\n this.custom = this.GetCustomLayer();\r\n }\r\n }\r\n workerWaitForInit = setInterval(waitForInit.bind(this), 1000);\r\n\r\n this.get行政區List();\r\n }\r\n\r\n componentWillUnmount() {\r\n window.gMainMap.TerrainView.removeLayer(this.custom)\r\n }\r\n\r\n GetCustomLayer() {\r\n const CustDrawLayerID = \"_SearchCoorLayer\";\r\n let layer = window.gMainMap.TerrainView.findLayer(CustDrawLayerID);\r\n if (!layer) {\r\n layer = window.gMainMap.TerrainView.addCustomLayer(CustDrawLayerID);\r\n layer.setDepthTest(true);\r\n }\r\n\r\n return layer;\r\n }\r\n\r\n async get行政區List() {\r\n let url = \"https://api.nlsc.gov.tw/other/ListTown/M\"\r\n\r\n fetch(url)\r\n .then(response => response.text())\r\n .then(text => {\r\n let town = \"\";\r\n let townlist = [];\r\n let townId = {};\r\n const parser = new DOMParser();\r\n const xmlDoc = parser.parseFromString(text, 'text/xml');\r\n for (let i = 0; ; i++) {\r\n if (xmlDoc.getElementsByTagName(\"towncode\")[i]) {\r\n let townCode = xmlDoc.getElementsByTagName(\"towncode\")[i].childNodes[0].nodeValue;\r\n let townName = xmlDoc.getElementsByTagName(\"townname\")[i].childNodes[0].nodeValue;\r\n townlist.push(townName);\r\n townId[townName] = townCode;\r\n }\r\n else { break; }\r\n }\r\n this.setState({ 行政區List: townlist, 行政區: \"-1\", 行政區Id: townId });\r\n })\r\n .catch(err => { console.log(err); });\r\n\r\n }\r\n\r\n async get道路List() {\r\n let url = `https://api.nlsc.gov.tw/idc/ListRoad/M/${this.state.行政區Id[this.state.行政區]}`\r\n\r\n fetch(url)\r\n .then(response => response.text())\r\n .then(text => {\r\n let name = \"\";\r\n let roadList = [];\r\n const parser = new DOMParser();\r\n const xmlDoc = parser.parseFromString(text, 'text/xml');\r\n for (let i = 0; ; i++) {\r\n if (xmlDoc.getElementsByTagName(\"name\")[i]) {\r\n let roadName = xmlDoc.getElementsByTagName(\"name\")[i].childNodes[0].nodeValue;\r\n roadList.push(roadName);\r\n if (i == 0) {\r\n name = roadName;\r\n }\r\n }\r\n else { break; }\r\n }\r\n this.setState({ 道路List: roadList, 道路: \"-1\" });\r\n })\r\n .catch(err => { console.log(err); });\r\n }\r\n\r\n 行政區onChange() {\r\n let text = \"南投縣\" + this.state.行政區;\r\n this.setState({ 地址: text })\r\n this.get道路List()\r\n }\r\n\r\n 道路onChange() {\r\n let text = \"南投縣\" + this.state.行政區 + this.state.道路;\r\n this.setState({ 地址: text })\r\n }\r\n\r\n 號onChange() {\r\n let text = \"南投縣\" + this.state.行政區 + this.state.道路 + this.state.號 + \"號\";\r\n this.setState({ 地址: text })\r\n }\r\n\r\n 之onChange() {\r\n let text = \"南投縣\" + this.state.行政區 + this.state.道路 + this.state.號 + \"號之\" + this.state.之;\r\n this.setState({ 地址: text })\r\n }\r\n\r\n paintLocate(geoPoint) {\r\n this.custom.removeAllEntity();\r\n let param = {};\r\n param = {};\r\n geoPoint.z = 0\r\n param.geo = geoPoint;\r\n param.color = new window.ov.Color(\"#FF0000\");\r\n param.opacity = 1.0;\r\n param.size = 50;\r\n param.epsg = 4326;\r\n param.absHeight = false;\r\n param.symbol = locate;\r\n this.custom.addPointEntity(param);\r\n }\r\n\r\n //座標定位\r\n goto() {\r\n let x = parseFloat(this.state.lon);\r\n let y = parseFloat(this.state.lat);\r\n\r\n if (x.toString() === \"NaN\" || y.toString() === \"NaN\") {\r\n window.alertify.log(\"請輸入正確數字。\");\r\n return;\r\n }\r\n\r\n let geoPoint = new window.GeoPoint(x, y, 0);\r\n let v = new window.Geo3DPoint(0, 0, -1);\r\n let up = new window.Geo3DPoint(0, 1, 0);\r\n\r\n let camera = new window.ov.Camera(geoPoint, v, up);\r\n window.gMainMap.TerrainView.gotoCamera(camera, true);\r\n\r\n if (!this.custom) {\r\n return;\r\n }\r\n this.paintLocate(geoPoint)\r\n }\r\n\r\n //地號定位\r\n gotoCadas() {\r\n this.custom.removeAllEntity();\r\n if (this.state.sectionCode === \"\") {\r\n window.alertify.log(\"地段代碼不可為空。\");\r\n return;\r\n }\r\n else if (this.state.landCode === \"\") {\r\n window.alertify.log(\"地號不可為空。\");\r\n return;\r\n }\r\n\r\n let url = \"https://api.nlsc.gov.tw/dmaps/CadasMapPosition/M/\" + this.state.sectionCode + \"/\" + this.state.landCode\r\n fetch(url)\r\n .then(response => response.text())\r\n .then(text => {\r\n const parser = new DOMParser();\r\n const xmlDoc = parser.parseFromString(text, 'text/xml');\r\n\r\n let x = parseFloat(xmlDoc.getElementsByTagName(\"repX\")[0].childNodes[0].nodeValue);\r\n let y = parseFloat(xmlDoc.getElementsByTagName(\"repY\")[0].childNodes[0].nodeValue);\r\n let ldx = parseFloat(xmlDoc.getElementsByTagName(\"ldX\")[0].childNodes[0].nodeValue);\r\n let ldy = parseFloat(xmlDoc.getElementsByTagName(\"ldY\")[0].childNodes[0].nodeValue);\r\n let rtx = parseFloat(xmlDoc.getElementsByTagName(\"rtX\")[0].childNodes[0].nodeValue);\r\n let rty = parseFloat(xmlDoc.getElementsByTagName(\"rtY\")[0].childNodes[0].nodeValue);\r\n let pos = new window.GeoPoint({ x: x, y: y });\r\n\r\n let param = {};\r\n param.geo = new window.GeoPolygonSet(\r\n new window.GeoPolygon([new window.GeoPoint(ldx, rty), new window.GeoPoint(rtx, rty), new window.GeoPoint(rtx, ldy), new window.GeoPoint(ldx, ldy)]));\r\n param.color = \"#FFFF00\";\r\n param.opacity = 0.5;\r\n param.epsg = 4326;\r\n if (!this.custom) {\r\n return;\r\n }\r\n this.custom.addSurfacePolygonSetEntity(param);\r\n window.gMainMap.TerrainView.goto(pos, 500, false);\r\n })\r\n .catch(err => { console.log(err); });\r\n }\r\n\r\n //門牌定位\r\n gotoDoorplate() {\r\n let 縣市代碼 = \"M\";//南投縣\r\n let url = `https://api.nlsc.gov.tw/idc/TextQueryAddress/${this.state.地址}/1/${縣市代碼}`\r\n fetch(url)\r\n .then(response => response.text())\r\n .then(text => {\r\n let contentList = [];\r\n let locationList = [];\r\n const parser = new DOMParser();\r\n const xmlDoc = parser.parseFromString(text, 'text/xml');\r\n for (let i = 0; ; i++) {\r\n if (xmlDoc.getElementsByTagName(\"content\")[i]) {\r\n let content = xmlDoc.getElementsByTagName(\"content\")[i].childNodes[0].nodeValue;\r\n let location = xmlDoc.getElementsByTagName(\"location\")[i].childNodes[0].nodeValue;\r\n contentList.push(content)\r\n locationList.push(location)\r\n }\r\n else { break; }\r\n }\r\n if (locationList.length == 0) {\r\n console.log(\"error:找不到\")\r\n return\r\n }\r\n let 座標 = locationList[0].split(',')\r\n let geoPoint = new window.GeoPoint(parseFloat(座標[0]), parseFloat(座標[1]), 0);\r\n let height = window.gMainMap.TerrainView.getAbsHeight(geoPoint, 4326)\r\n geoPoint.z = height + 200;\r\n let v = new window.Geo3DPoint(0, 0, -1);\r\n let up = new window.Geo3DPoint(0, 1, 0);\r\n let camera = new window.ov.Camera(geoPoint, v, up);\r\n window.gMainMap.TerrainView.gotoCamera(camera, true);\r\n if (!this.custom) {\r\n return;\r\n }\r\n this.paintLocate(geoPoint);\r\n });\r\n }\r\n\r\n render() {\r\n // 在 render 中將可以使用 this.context\r\n return (\r\n \r\n
\r\n 採用WGS84經緯度座標系 \r\n
\r\n
\r\n 經度: \r\n
\r\n
\r\n 緯度: \r\n
\r\n
\r\n { this.goto(); }}>定位 \r\n
\r\n
\r\n
\r\n 南投地號查詢 \r\n
\r\n
\r\n 地段代碼: \r\n
\r\n
\r\n 地號: \r\n
\r\n
\r\n { this.gotoCadas(); }}>定位 \r\n
\r\n
\r\n
\r\n 搜尋地址: \r\n
\r\n
\r\n 行政區: \r\n {\r\n this.setState({ 行政區: e.target.value }, () => {\r\n this.行政區onChange();\r\n });\r\n }}> \r\n
\r\n
\r\n 道路: \r\n {\r\n this.setState({ 道路: e.target.value }, () => {\r\n this.道路onChange();\r\n });\r\n }}> \r\n
\r\n
\r\n 號，之 \r\n
\r\n
\r\n { this.gotoDoorplate(); }}>定位 \r\n
\r\n
\r\n
\r\n {\r\n this.list.map(item => {\r\n if (this.state.isOpenFunc && item.name === this.state.funcName) {\r\n return
\r\n {\r\n this.state.isOpenFunc ?\r\n this.state.funcName === \"座標定位\" ?\r\n this.searchByCoordinate() :\r\n this.state.funcName === \"地號定位\" ?\r\n this.searchByCadasPanel() :\r\n this.state.funcName === \"門牌定位\" ?\r\n this.searchByDoorplatePanel() : null : null\r\n }\r\n
\r\n {this.props.name} \r\n
\r\n );\r\n }\r\n\r\n handleClick = () => {\r\n this.props.handleClick && this.props.handleClick(this.props.name);\r\n }\r\n}","import React, { Component } from 'react';\r\nimport './TravelDiaryListItem.css';\r\n\r\nimport { AutoTruncateTextLabel } from '../../../../.common/AutoTruncateTextLabel/AutoTruncateTextLabel';\r\nimport ApiOviewDocmd from '../../../../../modules/WebApiModules/ApiOviewDocmd'; \r\n\r\nimport locate from './.image/locate-2.png';\r\nimport del from './.image/delete.png';\r\nimport visible from './.image/Visible.png';\r\nimport unVisible from './.image/Unvisible.png';\r\n\r\nexport class TravelDiaryListItem extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n isEdit: false,\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n }\r\n\r\n componentDidUpdate() {\r\n }\r\n\r\n componentWillUnmount() {\r\n }\r\n\r\n render() {\r\n // 在 render 中將可以使用 this.context\r\n return (\r\n \r\n
\r\n {\r\n
\r\n {this.props.isDelete ?
{ this.props.userDelete(this.props.name)}} /> : null}\r\n
{ this.props.goto(this.props.pos, this.props.index); }} />\r\n
{ this.props.setShow(this.props.index) }} />\r\n
\r\n }\r\n
{ e.persist(); this.setState({ describe: e.target.value }); }}\r\n />\r\n );\r\n }\r\n }\r\n\r\n return ({this.state.describe}
);\r\n }\r\n\r\n //軌跡上傳頁面\r\n update_Panel() {\r\n return (\r\n \r\n
\r\n GPX選擇: \r\n \r\n 選擇\r\n { e.persist(); this.gpxFile_OnChange(e); }}\r\n />\r\n \r\n
\r\n
\r\n 採用WGS84經緯度坐標系 \r\n
\r\n {this.state.nowTrack && this.state.nowTrack.enable ?\r\n
\r\n 照片選擇: \r\n \r\n 有坐標\r\n { e.persist(); this.picFile_OnChange(e); }}\r\n />\r\n \r\n \r\n 自訂\r\n { e.persist(); this.picFileNoCoor_OnChange(e); }}\r\n />\r\n \r\n
: null}\r\n
\r\n 軌跡故事: \r\n {\r\n this.trackText_EditPanel()\r\n }\r\n
\r\n {this.state.nowTrack ?\r\n
\r\n
\r\n
{ this.outputViedo_OnClick(); }} />\r\n {this.state.nowTrack.enable && this.state.nowTrack.dir !== \"\" ?\r\n
{ this.getShortURL_OnClick(); }} /> : null\r\n }\r\n
\r\n {this.state.nowTrack.enable ?\r\n
{this.state.uploadLoading ?
:\r\n this.state.nowTrack.dir === \"\" ?\r\n
{ this.uploadTrack_OnClick(); }}>上傳 :\r\n
{ this.deleteTrack_OnClick(); }}>刪除 \r\n }\r\n
{ this.editDescribe_OnClick(); }}>{this.state.textEdit ? \"存檔\" : \"編輯\"} \r\n
: null\r\n }\r\n
: null\r\n }\r\n
{this.state.picTitle} );\r\n }\r\n\r\n //相片故事編輯區域\r\n picture_EditText() {\r\n if (this.state.nowTrack) {\r\n if (this.state.nowTrack.enable && this.state.picEdit) {\r\n return (\r\n { this.setState({ picText: e.target.value }); }}\r\n />\r\n );\r\n }\r\n }\r\n\r\n return (\r\n \r\n {this.state.picText}\r\n
\r\n );\r\n }\r\n\r\n //相片編輯頁面\r\n picture_Panel() {\r\n return (\r\n \r\n
\r\n
\r\n
\r\n
\r\n {\r\n this.picture_EditTitle()\r\n }\r\n
\r\n
\r\n {\r\n this.picture_EditText()\r\n }\r\n
\r\n {this.state.nowTrack.enable && this.state.showPicIndex !== -1 ?\r\n
\r\n { this.picture_Edit_OnClick(); }}>{this.state.picEdit ? \"存檔\" : \"編輯\"} \r\n { this.picDelete_OnClick(); }}>刪除 \r\n
\r\n : null}\r\n
\r\n
\r\n 範例: \r\n {\r\n this.demoIndex !== -1 && this.trackList[this.demoIndex] ?\r\n
\r\n
\r\n {\r\n this.trackList.map((track, index) => {\r\n if (index === this.demoIndex) {\r\n return null;\r\n }\r\n return (
\r\n
\r\n
\r\n
\r\n {this.state.pageName === \"日記\" ? this.update_Panel() : null}\r\n {this.state.pageName === \"日記編輯\" ? this.picture_Panel() : null}\r\n {this.state.pageName === \"清單\" ? this.list_Panel() : null}\r\n
\r\n
\r\n {this.props.name} \r\n { this.setState({ isOpen: !this.state.isOpen }) }}>選單 \r\n
\r\n {this.state.isOpen ?\r\n
\r\n {this.props.type === \"I3S\" ? <>不透明度:\r\n
{ buildingToolContext.setOpacity(this.props.index, e.target.value / 100); }} />\r\n : null}\r\n
{ this.locate(this.props.layer) }}>定位 \r\n
{ buildingToolContext.remove(this.props.index); }} alt=\"delete\" />\r\n
: null\r\n }\r\n
\r\n
\r\n 套疊網址:\r\n { this.introducer(); }}>\r\n 套疊\r\n \r\n
\r\n
\r\n
{ this.setState({ isOpenHelp: !this.state.isOpenHelp }) }}>{this.state.isOpenHelp ? \"關閉\" : \"展開\"}說明 \r\n {\r\n this.state.isOpenHelp ?\r\n
\r\n 本工具用於顯示套疊的3DTile、I3S模型
: null\r\n }\r\n
\r\n
\r\n 套疊圖層:\r\n
\r\n
\r\n {\r\n buildingToolContext.buildingList.map((item, index) => {\r\n return (\r\n
\r\n
\r\n
\r\n
{\r\n townNames.map(townName => {\r\n return (\r\n \r\n {townName} \r\n \r\n );\r\n })\r\n }\r\n
\r\n
\r\n
\r\n
\r\n {socioeconomicContext.showChart ?
\r\n
\r\n {this.chartContent()}\r\n
\r\n
: null}\r\n
\r\n { this.setState({ activeChartType: e.target.value }) }}>\r\n 長條圖 \r\n 折線圖 \r\n 圓餅圖 \r\n \r\n { this.showChart_OnClick(); }}>顯示 \r\n
\r\n
\r\n
{ this.openSensorThings(); }}>民生公共物聯資訊
\r\n {this.state.isLogined ?
{ this.tabClick(\"kmlUploadTool\") }}>道路養護成果上傳
: null}\r\n {this.state.isLogined ?
{ this.tabClick(\"readilyAvailableHouseTool\") }}>既有成屋檢核工具
: null}\r\n
{ this.tabClick(\"travelDiaryTool\") }}>旅圖日記
\r\n {/*
{ this.gotoBestCommentator_OnClick() }}>故事地圖編輯器
*/}\r\n
{ /*this.openBestCommentatorPlayer()*/ }}>使用者故事
\r\n {this.dropmenu()}\r\n
\r\n {this.state.isLogined ?
{ this.tabClick(\"threeDBuildingTool\") }}>套疊3D建物模型
: null}\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n {this.props.name} \r\n
\r\n
\r\n
\r\n \r\n
\r\n );\r\n }\r\n\r\n handleClick = (event) => {\r\n this.props.handleClick && this.props.handleClick(event, this.props.name);\r\n }\r\n}","import React, { Component } from \"react\";\r\n\r\nimport { BottomBarItem } from './BottomBarItem/BottomBarItem'\r\nimport { LayoutContext } from \"../../../modules/ContextModules/LayoutContext\";\r\nimport \"./BottomBar.css\"\r\n\r\nimport measureImg from './.image/pen-ruler-solid@3x.png'\r\nimport tagImg from './.image/tag-solid@3x.png'\r\nimport printImg from './.image/print-solid@3x.png'\r\nimport locate from './.image/locate.png'\r\n\r\nexport class BottomBar extends Component {\r\n static contextType = LayoutContext;\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n topbar: 1\r\n }\r\n\r\n this.buttonList = [\r\n { icon: measureImg, name: \"測量工具\" },\r\n { icon: tagImg, name: \"標註功能\" },\r\n { icon: printImg, name: \"列印功能\" },\r\n { icon: locate, name: \"定位功能\" },\r\n ]\r\n }\r\n\r\n render() {\r\n return (\r\n
\r\n
\r\n
\r\n {\r\n this.buttonList.map(item => {\r\n return (\r\n
\r\n
\r\n );\r\n }\r\n\r\n handleClick = (event, name) => {\r\n (this.getClickHandles()[name])(event);\r\n }\r\n\r\n getClickHandles = () => ({\r\n 測量工具: (event) => {\r\n // todo handle\r\n console.log(\"測量工具\");\r\n this.context\r\n .draggableWindowContext\r\n .measureTool\r\n .update({\r\n isOpened: true,\r\n isMinimized: false\r\n });\r\n },\r\n 標註功能: (event) => {\r\n // todo handle\r\n console.log(\"標註功能\");\r\n this.context\r\n .draggableWindowContext\r\n .markFunction\r\n .update({\r\n isOpened: true,\r\n isMinimized: false\r\n });\r\n\r\n },\r\n 列印功能: (event) => {\r\n // todo handle\r\n console.log(\"列印功能\");\r\n this.context\r\n .draggableWindowContext\r\n .printFunction\r\n .update({\r\n isOpened: true,\r\n isMinimized: false\r\n });\r\n },\r\n 定位功能: (event) => {\r\n // todo handle\r\n console.log(\"定位功能\");\r\n this.context\r\n .draggableWindowContext\r\n .locateTool\r\n .update({\r\n isOpened: true,\r\n isMinimized: false\r\n });\r\n }\r\n })\r\n}","import React, { Component } from 'react';\r\nimport { CancelButton } from '../../../.common/Buttons/Cancel/CancelButton';\r\nimport { LayoutContext } from '../../../../modules/ContextModules/LayoutContext';\r\nimport './MinimizedWindowStatusItem.css'\r\nexport class MinimizedWindowStatusItem extends Component {\r\n static contextType = LayoutContext;\r\n\r\n render() {\r\n return (\r\n
\r\n {this.props.data.name}\r\n {this.props.data.name !== this.context.draggableWindowContext[\"socioeconomic\"].name?
\r\n {/* */}\r\n {/* */}\r\n
:null}\r\n
\r\n );\r\n \r\n }\r\n\r\n status = () => {\r\n return `minimizedWindowStatusItem \r\n ${this.props.data.isOpened? 'minimizedWindowStatusItem--isOpened':''} \r\n ${this.props.data.isMinimized? 'minimizedWindowStatusItem--isMinimized':''}`;\r\n }\r\n\r\n handleBodyClick = () => {\r\n this.props.handleBodyClick && this.props.handleBodyClick(this.props.data); \r\n }\r\n\r\n handleCancel = (e) => {\r\n this.props.handleCancel && this.props.handleCancel(this.props.data); \r\n e.stopPropagation();\r\n }\r\n}","import React, { Component } from 'react';\r\n\r\nimport { MinimizedWindowStatusItem } from './MinimizedWindowStatusItem/MinimizedWindowStatusItem';\r\nimport { LayoutContext } from '../../../modules/ContextModules/LayoutContext';\r\nimport './MinimizedWindowStatusBar.css'\r\nexport class MinimizedWindowStatusBar extends Component {\r\n static contextType = LayoutContext;\r\n\r\n render() {\r\n return (\r\n
\r\n {\r\n this.props.data.minimizedStatusStack.map(key=>{\r\n let item = this.props.data[key];\r\n item.contextKey = key;\r\n return \r\n })\r\n }\r\n
\r\n ); \r\n }\r\n\r\n handleBodyClick = (data) => {\r\n this.context\r\n .draggableWindowContext[data.contextKey]\r\n .update({\r\n isOpened: true,\r\n isMinimized: !data.isMinimized\r\n });\r\n }\r\n\r\n handleCancel = (data) => {\r\n this.context\r\n .draggableWindowContext[data.contextKey]\r\n .update({\r\n isOpened: false\r\n });\r\n }\r\n}","import React, { Component } from \"react\";\r\n\r\nimport './Modal.css'\r\n\r\nexport class Modal extends Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n render() {\r\n return (\r\n
\r\n
\r\n {this.props.content || this.content()} \r\n
\r\n
\r\n );\r\n }\r\n\r\n content() {\r\n return (\r\n
\r\n 顯示內容\r\n
\r\n );\r\n }\r\n\r\n handleOutterClick = (e)=>{\r\n this.props.onOutterClick && this.props.onOutterClick(e);\r\n }\r\n\r\n handleInnerClick = (e) => {\r\n this.props.onInnerClick && this.props.onInnerClick(e);\r\n e.stopPropagation();//阻止他傳遞到外面導致視窗關掉\r\n }\r\n}\r\n ","import React, { Component } from \"react\";\r\n\r\nimport { Modal } from \"../../.common/Modal/Modal\";\r\nimport { LayoutContext } from \"../../../modules/ContextModules/LayoutContext\";\r\n\r\nimport './AttributesModal.css'\r\n\r\nexport class AttributesModal extends Component {\r\n static contextType = LayoutContext;\r\n render() {\r\n return (\r\n
\r\n );\r\n }\r\n\r\n handleOutterClick = (e) => {\r\n const {attributesModalContext} = this.context;\r\n attributesModalContext.updateContent({isOpened: false})\r\n }\r\n}\r\n ","import React, { Component } from 'react';\r\nimport { Rnd } from 'react-rnd';\r\nimport { LayoutContext } from '../../../modules/ContextModules/LayoutContext';\r\nimport './LayerAttrsRnd.css'\r\n\r\nexport class LayerAttrsRnd extends Component {\r\n static contextType = LayoutContext;\r\n\r\n render() {\r\n const { LayerAttrsRndContext } = this.context;\r\n const style = {\r\n borderRadius: \"5px\",\r\n transition: \"right 0.5s\",\r\n border: \"1px solid black\",\r\n display: LayerAttrsRndContext.isShowLayerAttrsRnd ? \"\" : \"none\",\r\n };\r\n\r\n return (\r\n {\r\n let layerAttrsRndPosition = { x: d.x, y: d.y };\r\n LayerAttrsRndContext.update({ layerAttrsRndPosition: layerAttrsRndPosition });\r\n }}\r\n maxWidth='338px'\r\n maxHeight='397px'\r\n enableResizing={{\r\n top: false,\r\n right: false,\r\n bottom: false,\r\n left: false,\r\n topRight: false,\r\n bottomRight: false,\r\n bottomLeft: false,\r\n topLeft: false\r\n }}\r\n onResize={(e, direction, ref, delta, position) => {\r\n }}\r\n >\r\n \r\n {LayerAttrsRndContext.layerAttrsRndTitle}\r\n
\r\n \r\n
\r\n
\r\n \r\n\r\n \r\n \r\n {\r\n Object.keys(LayerAttrsRndContext.layerAttrsRnd).map((key, i) => {\r\n if (key === \"\") {\r\n return null;\r\n }\r\n return (\r\n \r\n {key} \r\n {LayerAttrsRndContext.layerAttrsRnd[key]} \r\n \r\n )\r\n })\r\n }\r\n \r\n
\r\n
\r\n
中\r\n this.state = {\r\n opacityValue:100,\r\n // 自己的屬性\r\n // width: 0,\r\n // height: 0,\r\n // 已選圖層 狀態\r\n selectedLayerContext: {\r\n layers: [],\r\n economicLayerModules: undefined,\r\n updateLayers: this.updateLayers,\r\n addInitLayer: this.addInitLayer,\r\n },\r\n // 視窗 狀態\r\n draggableWindowContext: {\r\n minimizedStatusStack: [],\r\n layersMap: {\r\n name: \"圖資庫\",\r\n isOpened: false,\r\n isMinimized: false,\r\n update: (status) => {\r\n this.updateDraggableWindow(status, \"layersMap\");\r\n }\r\n },\r\n measureTool: {\r\n name: \"測量工具\",\r\n isOpened: false,\r\n isMinimized: false,\r\n update: (status) => {\r\n this.updateDraggableWindow(status, \"measureTool\");\r\n }\r\n },\r\n markFunction: {\r\n name: \"標註功能\",\r\n isOpened: false,\r\n isMinimized: false,\r\n update: (status) => {\r\n this.updateDraggableWindow(status, \"markFunction\");\r\n }\r\n },\r\n printFunction: {\r\n name: \"列印功能\",\r\n isOpened: false,\r\n isMinimized: false,\r\n update: (status) => {\r\n this.updateDraggableWindow(status, \"printFunction\");\r\n }\r\n },\r\n kmlUploadTool: {\r\n name: \"道路養護\",\r\n isOpened: false,\r\n isMinimized: false,\r\n update: (status) => {\r\n this.updateDraggableWindow(status, \"kmlUploadTool\");\r\n }\r\n },\r\n readilyAvailableHouseTool: {\r\n name: \"既有成屋\",\r\n isOpened: false,\r\n isMinimized: false,\r\n update: (status) => {\r\n this.updateDraggableWindow(status, \"readilyAvailableHouseTool\");\r\n }\r\n },\r\n locateTool: {\r\n name: \"定位工具\",\r\n isOpened: false,\r\n isMinimized: false,\r\n update: (status) => {\r\n this.updateDraggableWindow(status, \"locateTool\");\r\n }\r\n },\r\n travelDiaryTool: {\r\n name: \"旅圖日記\",\r\n isOpened: false,\r\n isMinimized: false,\r\n update: (status) => {\r\n this.updateDraggableWindow(status, \"travelDiaryTool\");\r\n }\r\n },\r\n threeDBuildingTool: {\r\n name: \"介接功能\",\r\n isOpened: false,\r\n isMinimized: false,\r\n update: (status) => {\r\n this.updateDraggableWindow(status, \"threeDBuildingTool\");\r\n }\r\n },\r\n socioeconomic: {\r\n name: \"經濟資料\",\r\n isOpened: false,\r\n isMinimized: false,\r\n update: (status) => {\r\n this.updateDraggableWindow(status, \"socioeconomic\");\r\n }\r\n },\r\n },\r\n //既有成屋狀態\r\n readilyAvailableHouseToolContext: {\r\n layer: undefined,\r\n selectedBuildingID: -1,\r\n setID: this.readilyAvailableHouseSetID,\r\n set: this.readilyAvailableHouseSetLayer,\r\n remove: this.readilyAvailableHouseRemoveLayer,\r\n },\r\n // KML 上傳狀態\r\n kmlUploadContext: {\r\n kmlList: [],\r\n push: this.pushKMLItem,\r\n updateList: this.updateKMLList,\r\n toggleOpened: this.toggleKMLOpened,\r\n copyByRef: this.copyByRefKMLInstance,\r\n updateContextList: this.updateKMLContextList,\r\n },\r\n // 屬性視窗 狀態\r\n attributesModalContext: {\r\n isOpened: false,\r\n position: { x: \"10px\", y: \"-25px\" },\r\n content: (<>asjfl;ka\r\n jsda;fkjs;
\r\n jsda;fkjs;
\r\n jsda;fkjs;
\r\n jsda;fkjs;
\r\n jsda;fkjs;
),\r\n updateContent: this.updateAttributesContent,\r\n },\r\n // 近似化建物 介接狀態\r\n buildingToolContext: {\r\n buildingList: [],\r\n push: this.pushBuildingItem,\r\n remove: this.removeBuildingItem,\r\n setOpacity: this.setBuildingItemOpacity,\r\n },\r\n //經濟工具 狀態\r\n socioeconomicContext: {\r\n layerModule: undefined,\r\n data: [],\r\n labels: [],\r\n height: 200,\r\n selectTown: townNames,\r\n backgroundColorArray: [],\r\n borderColorArray: [],\r\n showChart: false,\r\n update: this.updateSocioeconomicContext,\r\n remove: this.removeSocioeconomicContext\r\n },\r\n travelDiaryToolContext: {\r\n token: \"\",\r\n update: this.updateTravelDiaryToolContext\r\n },\r\n LayerAttrsRndContext: {\r\n attrsMaps: [buildingAttrMap],\r\n layerAttrsRndTitle: \"\",\r\n isShowLayerAttrsRnd: false,\r\n layerAttrsRnd: {},\r\n layerAttrsRndPosition: { x: 0, y: 0 },\r\n update: this.updateLayerAttrsRnd,\r\n }\r\n }\r\n }\r\n\r\n addInitLayer(FolderFullName, Name) {\r\n ApiLayersMap.ListLayerInfo(\r\n { FolderFullName: FolderFullName, Name: Name },\r\n (obj) => {\r\n let result = obj.result;\r\n let addLayer = [];\r\n addLayer.push(result);\r\n this.updateLayers(\r\n {\r\n add: addLayer\r\n });\r\n },\r\n () => {\r\n console.error(`取得${this.layerInfo.FolderFullName}/${this.layerInfo.Name}圖層資訊失敗`)\r\n }\r\n )\r\n }\r\n\r\n ////// 定義修改 state 的方法\r\n /* 更新選取圖層狀態 */updateLayers = (updatingLayers) => {\r\n let updatedLayers = this.state.selectedLayerContext.layers;\r\n // remove\r\n if (updatingLayers.remove && updatingLayers.remove.length > 0) {\r\n updatedLayers = updatedLayers.filter((layer) => {\r\n return updatingLayers.remove.indexOf(layer.Name) < 0;\r\n })\r\n }\r\n // add\r\n if (updatingLayers.add && updatingLayers.add.length > 0) {\r\n updatedLayers = updatedLayers.concat(updatingLayers.add);\r\n }\r\n\r\n this.setState(prevState => ({\r\n // 加入圖層 \r\n selectedLayerContext: {\r\n ...prevState.selectedLayerContext,\r\n layers: updatedLayers\r\n },\r\n }))\r\n }\r\n\r\n /* 更新可拖曳視窗狀態 */updateDraggableWindow = (status, contextKey) => {\r\n let updatedMinimizedStatusStack = this.state.draggableWindowContext.minimizedStatusStack;\r\n let index = updatedMinimizedStatusStack.indexOf(contextKey);\r\n if (status.isOpened) { //開啟視窗\r\n if (index < 0) { //不存在就push \r\n updatedMinimizedStatusStack.push(contextKey);\r\n }\r\n } else { //關閉視窗\r\n if (index >= 0) { //從清單移除 \r\n updatedMinimizedStatusStack.splice(index, 1);\r\n }\r\n }\r\n let newDraggableWindowContext = this.state.draggableWindowContext;\r\n newDraggableWindowContext.minimizedStatusStack = updatedMinimizedStatusStack;\r\n newDraggableWindowContext[contextKey] = {\r\n ...this.state.draggableWindowContext[contextKey],\r\n isOpened: status.isOpened,\r\n isMinimized: status.isMinimized,\r\n }\r\n this.setState({\r\n draggableWindowContext: newDraggableWindowContext\r\n })\r\n\r\n }\r\n\r\n /* 新增KML項目 */pushKMLItem = (kml) => {\r\n // 更新\r\n let newKMLUploadContext = this.state.kmlUploadContext;\r\n newKMLUploadContext.kmlList.push(kml);\r\n this.updateKMLContextList(newKMLUploadContext.kmlList);\r\n }\r\n\r\n /* 更新KML清單 */updateKMLList = (list) => {\r\n let oldList = this.state.kmlUploadContext.kmlList;\r\n let newList = list.map((name) => { return { name: name, isOpened: false } });\r\n for (let i in newList) {\r\n let newOne = newList[i];\r\n for (let j in oldList) {\r\n let oldOne = oldList[j];\r\n if (newOne.name === oldOne.name) {\r\n newOne.isOpened = oldOne.isOpened;\r\n newOne.instance = oldOne.instance;\r\n break;\r\n }\r\n }\r\n }\r\n // 更新\r\n this.updateKMLContextList(newList);\r\n }\r\n /* 切換KML開關 */toggleKMLOpened = (name) => {\r\n let newList = this.state.kmlUploadContext.kmlList;\r\n for (let i in newList) {\r\n let kml = newList[i];\r\n if (kml.name === name) {\r\n kml.isOpened = !kml.isOpened;\r\n break;\r\n }\r\n }\r\n // 更新\r\n let newKMLUploadContext = this.state.kmlUploadContext;\r\n newKMLUploadContext.kmlList = newList;\r\n this.updateKMLContextList(newKMLUploadContext.kmlList);\r\n }\r\n\r\n /* 複製一份kml實體 */copyByRefKMLInstance = (name, instance) => {\r\n let newList = this.state.kmlUploadContext.kmlList;\r\n for (let i in newList) {\r\n let kml = newList[i];\r\n if (kml.name === name) {\r\n kml.instance = instance;\r\n break;\r\n }\r\n }\r\n // 更新\r\n this.updateKMLContextList(newList);\r\n }\r\n\r\n /* 更新kml context*/ updateKMLContextList = (newList) => {\r\n // 更新\r\n let newKMLUploadContext = this.state.kmlUploadContext;\r\n newKMLUploadContext.kmlList = newList;\r\n this.setState({\r\n kmlUploadContext: newKMLUploadContext\r\n });\r\n }\r\n\r\n /* 更新並開啟屬性視窗 */ updateAttributesContent = (param) => {\r\n // 更新\r\n let newAttributesModalContext = this.state.attributesModalContext;\r\n newAttributesModalContext.isOpened = param.isOpened !== false;\r\n newAttributesModalContext.position = param.position || newAttributesModalContext.position;\r\n newAttributesModalContext.content = param.content || newAttributesModalContext.content;\r\n this.setState({\r\n attributesModalContext: newAttributesModalContext\r\n });\r\n }\r\n ////\r\n\r\n /* 新增既有成屋圖層 */readilyAvailableHouseSetLayer = (layer) => {\r\n // 更新\r\n let readilyAvailableHouseToolContext = this.state.readilyAvailableHouseToolContext;\r\n readilyAvailableHouseToolContext.layer = layer\r\n this.setState({\r\n readilyAvailableHouseToolContext: readilyAvailableHouseToolContext\r\n });\r\n }\r\n\r\n /* 移除既有成屋圖層 */readilyAvailableHouseRemoveLayer = () => {\r\n let readilyAvailableHouseToolContext = this.state.readilyAvailableHouseToolContext;\r\n if (!!readilyAvailableHouseToolContext.layer) {\r\n window.gMainMap.TerrainView.removeLayer(readilyAvailableHouseToolContext.layer);\r\n readilyAvailableHouseToolContext.layer = undefined;\r\n readilyAvailableHouseToolContext.selectedBuildingID = -1;\r\n }\r\n this.setState({\r\n readilyAvailableHouseToolContext: readilyAvailableHouseToolContext\r\n });\r\n }\r\n\r\n /*設定點擊建物ID*/\r\n readilyAvailableHouseSetID = (id) => {\r\n let readilyAvailableHouseToolContext = this.state.readilyAvailableHouseToolContext;\r\n readilyAvailableHouseToolContext.selectedBuildingID = id;\r\n this.setState({\r\n readilyAvailableHouseToolContext: readilyAvailableHouseToolContext\r\n });\r\n }\r\n\r\n /* 新增近似化建物項目 */pushBuildingItem = (building) => {\r\n // 更新\r\n let newBuildingToolContext = this.state.buildingToolContext;\r\n newBuildingToolContext.buildingList.push(building);\r\n this.setState({\r\n buildingToolContext: newBuildingToolContext\r\n });\r\n }\r\n\r\n /* 移除近似化建物項目 */removeBuildingItem = (index) => {\r\n let newBuildingToolContext = this.state.buildingToolContext;\r\n let item = newBuildingToolContext.buildingList[index];\r\n\r\n window.gMainMap.TerrainView.removeLayer(item.layer);\r\n newBuildingToolContext.buildingList.splice(index, 1);\r\n this.setState({\r\n buildingToolContext: newBuildingToolContext\r\n });\r\n }\r\n\r\n /* 變更近似化建物項目透明度 */setBuildingItemOpacity = (index, value) => {\r\n // 更新\r\n let newBuildingToolContext = this.state.buildingToolContext;\r\n let item = newBuildingToolContext.buildingList[index];\r\n item.opacity = value;\r\n item.layer.setOpacity(value);\r\n this.setState({\r\n buildingToolContext: newBuildingToolContext\r\n });\r\n }\r\n\r\n /* 變更經濟工具資料 */updateSocioeconomicContext = (param) => {\r\n // 更新\r\n let newSocioeconomicContext = this.state.socioeconomicContext;\r\n\r\n if (param.isEmptyModule) {\r\n newSocioeconomicContext.layerModule = undefined;\r\n }\r\n else {\r\n newSocioeconomicContext.layerModule = param.layerModule || newSocioeconomicContext.layerModule;\r\n }\r\n newSocioeconomicContext.selectTown = param.selectTown || newSocioeconomicContext.selectTown;\r\n newSocioeconomicContext.showChart = param.showChart || newSocioeconomicContext.showChart;\r\n newSocioeconomicContext.labels = param.labels || newSocioeconomicContext.labels;\r\n newSocioeconomicContext.data = param.data || newSocioeconomicContext.data;\r\n newSocioeconomicContext.height = param.height || newSocioeconomicContext.height;\r\n newSocioeconomicContext.borderColorArray = param.borderColorArray || newSocioeconomicContext.borderColorArray;\r\n newSocioeconomicContext.backgroundColorArray = param.backgroundColorArray || newSocioeconomicContext.backgroundColorArray;\r\n this.setState({\r\n socioeconomicContext: newSocioeconomicContext\r\n });\r\n }\r\n\r\n /* 移除經濟工具資料 */removeSocioeconomicContext = () => {\r\n // 移除\r\n let newSocioeconomicContext = this.state.socioeconomicContext;\r\n\r\n newSocioeconomicContext.showChart = false;\r\n newSocioeconomicContext.selectTown = [\"南投市\", \"埔里鎮\", \"草屯鎮\", \"竹山鎮\", \"集集鎮\", \"名間鄉\", \"鹿谷鄉\", \"中寮鄉\", \"魚池鄉\", \"國姓鄉\", \"水里鄉\", \"信義鄉\", \"仁愛鄉\"];\r\n newSocioeconomicContext.labels = [];\r\n newSocioeconomicContext.data = [];\r\n newSocioeconomicContext.borderColorArray = [];\r\n newSocioeconomicContext.backgroundColorArray = [];\r\n newSocioeconomicContext.height = 200;\r\n this.setState({\r\n socioeconomicContext: newSocioeconomicContext\r\n });\r\n }\r\n\r\n /**變更旅行日記資料 */updateTravelDiaryToolContext = (param) => {\r\n // 更新\r\n let newTravelDiaryToolContext = this.state.travelDiaryToolContext;\r\n\r\n newTravelDiaryToolContext.token = param.token || newTravelDiaryToolContext.token;\r\n\r\n this.setState({\r\n travelDiaryToolContext: newTravelDiaryToolContext\r\n });\r\n }\r\n\r\n /**變更屬性視窗 */updateLayerAttrsRnd = (param) => {\r\n let newLayerAttrsRndContext = this.state.LayerAttrsRndContext;\r\n\r\n newLayerAttrsRndContext.layerModule = param.layerModule || newLayerAttrsRndContext.layerModule;\r\n newLayerAttrsRndContext.layerAttrsRndTitle = param.layerAttrsRndTitle || newLayerAttrsRndContext.layerAttrsRndTitle;\r\n newLayerAttrsRndContext.isShowLayerAttrsRnd = param.isShowLayerAttrsRnd !== undefined ? param.isShowLayerAttrsRnd : newLayerAttrsRndContext.isShowLayerAttrsRnd;\r\n newLayerAttrsRndContext.layerAttrsRnd = param.layerAttrsRnd || newLayerAttrsRndContext.layerAttrsRnd;\r\n newLayerAttrsRndContext.layerAttrsRndPosition = param.layerAttrsRndPosition || newLayerAttrsRndContext.layerAttrsRndPosition;\r\n this.setState({\r\n LayerAttrsRndContext: newLayerAttrsRndContext\r\n });\r\n }\r\n\r\n async Async_WaitMapInit() {\r\n if (window.gMainMap.IsReady) {\r\n return;\r\n }\r\n function Wait(time) {\r\n return new Promise((rs) => { setTimeout(rs, time ?? 100) })\r\n }\r\n while (!window.gMainMap.IsReady) {\r\n await Wait();\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n this.Async_WaitMapInit().then(() => {\r\n this.addInitLayer(\"/底圖\", \"正射影像\");\r\n this.addInitLayer(\"/三維圖資\", \"南投市近似化建物\");\r\n\r\n this.mapClickResetEvent = () => {\r\n if (this.state.LayerAttrsRndContext.isShowLayerAttrsRnd === true) {\r\n this.state.LayerAttrsRndContext.update({ isShowLayerAttrsRnd: false });\r\n }\r\n };\r\n\r\n let updateOpacity = () => {\r\n this.seeOpacity();\r\n };\r\n this.updateOpacityIntervalId = setInterval(updateOpacity, 1000);\r\n\r\n window.gMainMap.TerrainView.addEventListener(\"MouseDown\", this.mapClickResetEvent.bind(this));\r\n });\r\n\r\n // const { current } = this.ref;\r\n // this.setState({\r\n // width: current.offsetWidth,\r\n // height: current.offsetHeight\r\n // })\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n
\r\n
{ window.gMainMap.Close(); this.props.changePage(1); }}>\r\n
\r\n {/*
*/}\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n { //圖資庫移動視窗\r\n this.handleDraggableWindowDisplay(\"layersMap\") ?\r\n
{ this.handleDraggableWindowMinimize(\"layersMap\"); }}\r\n handleCancel={() => { this.handleDraggableWindowCancel(\"layersMap\"); }}\r\n isShow={!this.isDraggableWindowMinimize(\"layersMap\")} />\r\n : null\r\n }\r\n { //測量工具移動視窗\r\n this.handleDraggableWindowDisplay(\"measureTool\") ?\r\n { this.handleDraggableWindowMinimize(\"measureTool\"); }}\r\n handleCancel={() => { this.handleDraggableWindowCancel(\"measureTool\"); }}\r\n isShow={!this.isDraggableWindowMinimize(\"measureTool\")} />\r\n : null\r\n }\r\n { //標註功能移動視窗\r\n this.handleDraggableWindowDisplay(\"markFunction\") ?\r\n { this.handleDraggableWindowMinimize(\"markFunction\"); }}\r\n handleCancel={() => { this.handleDraggableWindowCancel(\"markFunction\"); }}\r\n isShow={!this.isDraggableWindowMinimize(\"markFunction\")} />\r\n : null\r\n }\r\n { //列印功能移動視窗\r\n this.handleDraggableWindowDisplay(\"printFunction\") ?\r\n { this.handleDraggableWindowMinimize(\"printFunction\"); }}\r\n handleCancel={() => { this.handleDraggableWindowCancel(\"printFunction\"); }}\r\n isShow={!this.isDraggableWindowMinimize(\"printFunction\")} />\r\n : null\r\n }\r\n { //kml上傳功能移動視窗\r\n this.handleDraggableWindowDisplay(\"kmlUploadTool\") ?\r\n { this.handleDraggableWindowMinimize(\"kmlUploadTool\"); }}\r\n handleCancel={() => { this.handleDraggableWindowCancel(\"kmlUploadTool\"); }}\r\n isShow={!this.isDraggableWindowMinimize(\"kmlUploadTool\")} />\r\n : null\r\n }\r\n { //既有成屋功能移動視窗\r\n this.handleDraggableWindowDisplay(\"readilyAvailableHouseTool\") ?\r\n { this.handleDraggableWindowMinimize(\"readilyAvailableHouseTool\"); }}\r\n handleCancel={() => { this.handleDraggableWindowCancel(\"readilyAvailableHouseTool\"); }}\r\n isShow={!this.isDraggableWindowMinimize(\"readilyAvailableHouseTool\")} />\r\n : null\r\n }\r\n { //定位功能移動視窗\r\n this.handleDraggableWindowDisplay(\"locateTool\") ?\r\n { this.handleDraggableWindowMinimize(\"locateTool\"); }}\r\n handleCancel={() => { this.handleDraggableWindowCancel(\"locateTool\"); }}\r\n isShow={!this.isDraggableWindowMinimize(\"locateTool\")} />\r\n : null\r\n }\r\n { //旅行日記功能移動視窗\r\n this.handleDraggableWindowDisplay(\"travelDiaryTool\") ?\r\n { this.handleDraggableWindowMinimize(\"travelDiaryTool\"); }}\r\n handleCancel={() => { this.handleDraggableWindowCancel(\"travelDiaryTool\"); }}\r\n isShow={!this.isDraggableWindowMinimize(\"travelDiaryTool\")} />\r\n : null\r\n }\r\n { //介接3D模型功能移動視窗\r\n this.handleDraggableWindowDisplay(\"threeDBuildingTool\") ?\r\n { this.handleDraggableWindowMinimize(\"threeDBuildingTool\"); }}\r\n handleCancel={() => { this.handleDraggableWindowCancel(\"threeDBuildingTool\"); }}\r\n isShow={!this.isDraggableWindowMinimize(\"threeDBuildingTool\")} />\r\n : null\r\n }\r\n { //社會經濟資料功能移動視窗\r\n this.handleDraggableWindowDisplay(\"socioeconomic\") ?\r\n { this.handleDraggableWindowMinimize(\"socioeconomic\"); }}\r\n handleCancel={() => { this.handleDraggableWindowCancel(\"socioeconomic\"); }}\r\n isShow={!this.isDraggableWindowMinimize(\"socioeconomic\")} />\r\n : null\r\n }\r\n {\r\n this.handleAttributesModalDisplay() ?\r\n \r\n 不透明度:{this.state.opacityValue}% \r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n );\r\n }\r\n\r\n opacityOnChange(e) {\r\n this.setState({ opacityValue: e.target.value });\r\n window.gMainMap.TerrainView.terrainAlpha = parseFloat(e.target.value) / 100.0;\r\n }\r\n\r\n seeOpacity() {\r\n let opacity = window.gMainMap.TerrainView.terrainAlpha;\r\n if (opacity * 100 !== this.state.opacityValue) {\r\n this.setState({ opacityValue: parseInt(opacity * 100) });\r\n let opacityInput = document.getElementById(\"opacityInputTerrain\");\r\n opacityInput.value = opacity * 100;\r\n }\r\n }\r\n\r\n handleDraggableWindowDisplay = (key) => {\r\n let state = this.state.draggableWindowContext[key];\r\n return state.isOpened;\r\n }\r\n\r\n isDraggableWindowMinimize = (key) => {\r\n let state = this.state.draggableWindowContext[key];\r\n return state.isMinimized;\r\n }\r\n\r\n handleDraggableWindowMinimize = (key) => {\r\n this.state\r\n .draggableWindowContext[key]\r\n .update({\r\n isOpened: true,\r\n isMinimized: true\r\n });\r\n }\r\n\r\n handleDraggableWindowCancel = (key) => {\r\n console.log(\"關閉\");\r\n this.state\r\n .draggableWindowContext[key]\r\n .update({\r\n isOpened: false,\r\n });\r\n }\r\n\r\n handleAttributesModalDisplay = () => {\r\n return this.state\r\n .attributesModalContext\r\n .isOpened;\r\n }\r\n\r\n handleAttributesModalContent = () => {\r\n return this.state\r\n .attributesModalContext\r\n .content;\r\n }\r\n\r\n handleAttributesModalPosition = () => {\r\n return this.state\r\n .attributesModalContext\r\n .position;\r\n }\r\n}","import React, { Component } from 'react';\r\nimport { Home } from './Home/Home';\r\nimport { Layout } from './Map/Layout';\r\n\r\nexport class System extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n page: 1,\r\n };\r\n this.changePage = this.changePage.bind(this);\r\n }\r\n\r\n changePage(page) {\r\n this.setState({ page: page });\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n {\r\n this.state.page === 1 ?
\r\n );\r\n }\r\n}","import React, { Component } from 'react';\r\nimport { Route } from 'react-router';\r\n//import { Layout } from './components/Layout';\r\n//import { Home } from './components/Home';\r\n//import { FetchData } from './components/FetchData';\r\n//import { Counter } from './components/Counter';\r\n// import { Layout } from './components/Map/Layout';\r\nimport { System } from './components/System';\r\n\r\nimport './custom.css'\r\nexport default class App extends Component {\r\n static displayName = App.name;\r\n\r\n render () {\r\n return ( \r\n \r\n
\r\n );\r\n }\r\n}","// In production, we register a service worker to serve assets from local cache.\r\n\r\n// This lets the app load faster on subsequent visits in production, and gives\r\n// it offline capabilities. However, it also means that developers (and users)\r\n// will only see deployed updates on the \"N+1\" visit to a page, since previously\r\n// cached resources are updated in the background.\r\n\r\n// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.\r\n// This link also includes instructions on opting out of this behavior.\r\n\r\nconst isLocalhost = Boolean(\r\n window.location.hostname === 'localhost' ||\r\n // [::1] is the IPv6 localhost address.\r\n window.location.hostname === '[::1]' ||\r\n // 127.0.0.1/8 is considered localhost for IPv4.\r\n window.location.hostname.match(\r\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\r\n )\r\n);\r\n\r\nexport default function register () {\r\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\r\n // The URL constructor is available in all browsers that support SW.\r\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location);\r\n if (publicUrl.origin !== window.location.origin) {\r\n // Our service worker won't work if PUBLIC_URL is on a different origin\r\n // from what our page is served on. This might happen if a CDN is used to\r\n // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374\r\n return;\r\n }\r\n\r\n window.addEventListener('load', () => {\r\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\r\n\r\n if (isLocalhost) {\r\n // This is running on localhost. Lets check if a service worker still exists or not.\r\n checkValidServiceWorker(swUrl);\r\n } else {\r\n // Is not local host. Just register service worker\r\n registerValidSW(swUrl);\r\n }\r\n });\r\n }\r\n}\r\n\r\nfunction registerValidSW (swUrl) {\r\n navigator.serviceWorker\r\n .register(swUrl)\r\n .then(registration => {\r\n registration.onupdatefound = () => {\r\n const installingWorker = registration.installing;\r\n installingWorker.onstatechange = () => {\r\n if (installingWorker.state === 'installed') {\r\n if (navigator.serviceWorker.controller) {\r\n // At this point, the old content will have been purged and\r\n // the fresh content will have been added to the cache.\r\n // It's the perfect time to display a \"New content is\r\n // available; please refresh.\" message in your web app.\r\n console.log('New content is available; please refresh.');\r\n } else {\r\n // At this point, everything has been precached.\r\n // It's the perfect time to display a\r\n // \"Content is cached for offline use.\" message.\r\n console.log('Content is cached for offline use.');\r\n }\r\n }\r\n };\r\n };\r\n })\r\n .catch(error => {\r\n console.error('Error during service worker registration:', error);\r\n });\r\n}\r\n\r\nfunction checkValidServiceWorker (swUrl) {\r\n // Check if the service worker can be found. If it can't reload the page.\r\n fetch(swUrl)\r\n .then(response => {\r\n // Ensure service worker exists, and that we really are getting a JS file.\r\n if (\r\n response.status === 404 ||\r\n response.headers.get('content-type').indexOf('javascript') === -1\r\n ) {\r\n // No service worker found. Probably a different app. Reload the page.\r\n navigator.serviceWorker.ready.then(registration => {\r\n registration.unregister().then(() => {\r\n window.location.reload();\r\n });\r\n });\r\n } else {\r\n // Service worker found. Proceed as normal.\r\n registerValidSW(swUrl);\r\n }\r\n })\r\n .catch(() => {\r\n console.log(\r\n 'No internet connection found. App is running in offline mode.'\r\n );\r\n });\r\n}\r\n\r\nexport function unregister () {\r\n if ('serviceWorker' in navigator) {\r\n navigator.serviceWorker.ready.then(registration => {\r\n registration.unregister();\r\n });\r\n }\r\n}\r\n","import 'bootstrap/dist/css/bootstrap.css';\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { BrowserRouter } from 'react-router-dom';\r\nimport App from './App';\r\nimport { unregister } from './registerServiceWorker';\r\n\r\nconst baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');\r\nconst rootElement = document.getElementById('root');\r\n\r\nReactDOM.render(\r\n \r\n ,\r\n rootElement);\r\n\r\nunregister();\r\n//registerServiceWorker()"],"sourceRoot":""} 
\r\n 
\r\n 
\r\n