commit

04.系统编码/App/App.csproj

@@ -164,6 +164,7 @@
     <Content Include="Content\images\edit-hover.png" />
     <Content Include="Content\images\edit.png" />
     <Content Include="Content\images\icon-calc.png" />
+    <Content Include="Content\images\icon-copy.png" />
     <Content Include="Content\images\icon-dangerous.png" />
     <Content Include="Content\images\icon-forecast.png" />
     <Content Include="Content\images\icon-monitor.png" />
@@ -203,6 +204,7 @@
     <Content Include="Content\images\toggle-right.png" />
     <Content Include="Content\images\user-icon.png" />
     <Content Include="Content\scripts\beijing\info-point.js" />
+    <Content Include="Content\scripts\beijing\select-point.js" />
     <Content Include="Content\scripts\config.js" />
     <Content Include="Content\scripts\menggu\app.js" />
     <Content Include="Content\scripts\menggu\history-panel.js" />

04.系统编码/App/Content/scripts/beijing/map.js

@@ -55,6 +55,7 @@ var Map = function (parent) {
     this.CompareLayers = false;
     this.layers = false;
     this.isMark = false;
+    this.isSelected = false;
 
     this.ForecastPoints = null;
     this.ForecastBackwardPoints = null;
@@ -66,6 +67,7 @@ var Map = function (parent) {
     this.centerPointTime = null;
 
     this.InfoPoint = new InfoPoint(this);
+    this.SelectPoint = new SelectPoint(this);
 
     this.Startup = function () {
         this.CreateMap();
@@ -73,7 +75,9 @@ var Map = function (parent) {
         this.LoadWindTemplate();
         this.LoadInfoPoint();
         this.InfoPoint.Startup();
+        this.SelectPoint.Startup();
 
+        $('#select-point-button').on('click', this.onSelectPointClick.bind(this));
         $('#mark-button').on('click', this.onMarkClick.bind(this));
         $('#draw-button').on('click', this.OnDrawButtonClick.bind(this));
         $('#clear-button').on('click', this.OnClearButtonClick.bind(this));
@@ -656,6 +660,22 @@ var Map = function (parent) {
         });
     };
 
+    this.onSelectPointClick = function () {
+        this.isSelected = true;
+
+        $('#map').css('cursor', 'crosshair');
+        this.SelectPiontInfo();
+    };
+
+    this.SelectPiontInfo = function () {
+        this.map.on('click', function (e) {
+            if (this.isSelected)
+                this.SelectPoint.ShowDialog(e.latlng);
+            else
+                return;
+        }.bind(this));
+    };
+
     this.onMarkClick = function () {
         this.isMark = true;
 

04.系统编码/App/Content/scripts/beijing/select-point.js

@@ -0,0 +1,56 @@
+var SelectPoint = function (parent) {
+    this.Parent = parent;
+
+    this.Startup = function () {
+        $('#copy-longitude').on('click', this.OnClickLngClick.bind(this));
+        $('#copy-latitude').on('click', this.onCopyLatClick.bind(this));
+        $('#close-select-point-dialog').on('click', this.HideDialog.bind(this));
+        $('#dialog-select-point-cancel').on('click', this.HideDialog.bind(this));
+    };
+
+    this.ShowDialog = function (point) {
+        $('#dialog-select-point').show();
+        $("#lng").val(this.getLatLng(point.lng));
+        $("#lat").val(this.getLatLng(point.lat));
+    };
+
+    this.HideDialog = function () {
+        $('#dialog-select-point').hide();
+        $('#map').css('cursor', 'grab');
+
+        this.Parent.isSelected = false;
+    };
+
+    this.getLatLng = function (value) {
+        value = value.toString()
+        let index = value.indexOf('.')
+        if (index !== -1) {
+            value = value.substring(0, 6 + index + 1)
+        } else {
+            value = value.substring(0)
+        }
+        return parseFloat(value).toFixed(6)
+    }
+
+    this.OnClickLngClick = function () {
+        if ($("#lng").val().trim() === '') {
+            alert('请输入经度');
+            return;
+        } else {
+            var selected = document.querySelector('#lng');
+            selected.select();
+            document.execCommand('Copy');
+        }
+    };
+
+    this.onCopyLatClick = function () {
+        if ($("#lat").val().trim() === '') {
+            alert('请输入纬度');
+            return;
+        } else {
+            var selected = document.querySelector('#lat');
+            selected.select();
+            document.execCommand('Copy');
+        }
+    }
+}

04.系统编码/App/Content/styles/index.css

@@ -565,10 +565,29 @@
     color: #faa71b;
 }
 
-.export,
-.draw,
-.clear-btn,
-.info-mark {
+.control-btns {
+    display: flex;
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    z-index: 2000;
+    color: #ffffff;
+}
+
+.control-btns .btn {
+    padding: 0 10px;
+    margin-left: 10px;
+    color: #ffffff;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+    background: -webkit-linear-gradient(#febc50, #faa71c);
+    background: -o-linear-gradient(#febc50, #faa71c);
+    background: -moz-linear-gradient(#febc50, #faa71c);
+    background: linear-gradient(#febc50, #faa71c);
+}
+
+.export {
     /*width: 50px;*/
     height: 25px;
     line-height: 25px;
@@ -973,7 +992,8 @@
     transform: translateY(-50%);
 }
 
-.dialog-info-point .dialog-title h2 {
+.dialog-info-point .dialog-title h2,
+.dialog-select-point .dialog-title h2 {
     padding: 0;
     background: none;
 }
@@ -982,7 +1002,8 @@
     margin: 10px;
 }
 
-.dialog-info-point .item label {
+.dialog-info-point .item label,
+.dialog-select-point .item label{
     margin-bottom: 6px;
     display: block;
 }
@@ -1018,13 +1039,51 @@
     border-color: #faa920;
 }
 
-.dialog-info-point .line {
+.dialog-info-point .line,
+.dialog-select-point .line{
     height: 1px;
     margin-top: 10px;
     background-color: #dddddd;
     border: 0;
 }
 
+.dialog-select-point .dialog-content {
+    width: 382px;
+    margin-top: 0;
+    margin-left: -196px;
+    transform: translateY(-50%);
+}
+
+.dialog-select-point .item {
+    padding: 10px 10px 0 10px;
+    display: flex;
+    justify-content: space-between;
+}
+
+.dialog-select-point .item .col {
+    position: relative;
+}
+
+.dialog-select-point .item .col input{
+   width: 140px;
+    padding: 0 5px;
+    border-radius: 3px;
+    border: 1px solid #dddddd;
+    line-height: 28px;
+}
+
+.dialog-select-point .item .col .copy-btn {
+    display: inline-block;
+    width: 30px;
+    height: 30px;
+    border-radius: 3px;
+    border: 1px solid #dddddd;
+    cursor: pointer;
+    background: url("../images/icon-copy.png") no-repeat #ffffff;
+    background-size: 20px 20px;
+    background-position: 4px 4px;
+}
+
 .textbox .textbox-text {
     width: 100% !important;
     padding: 0 10px;

04.系统编码/App/Views/Beijing/Index.cshtml

@@ -13,12 +13,15 @@
     @*<div class="switch particle-switch" id="particle-switch">
             风场粒子<a href="javascript:;"></a>
         </div>*@
+    <div class="control-btns">
+        <a id="select-point-button" class="select-point btn">鼠标选点...</a>
+        <a id="mark-button" class="info-mark btn">信息点标绘...</a>
+        <a id="draw-button" class="draw btn">画线...</a>
+        <a id="clear-button" class="clear-btn btn">清除...</a>
+    </div>
     <div class="switch switch-on label-switch" id="label-switch">
         时间标签<a href="javascript:;"></a>
     </div>
-    <a id="mark-button" class="info-mark btn">信息点标绘...</a>
-    <a id="draw-button" class="draw btn">画线...</a>
-    <a id="clear-button" class="clear-btn btn">清除...</a>
     <a id="capture-button" class="export btn">导出图片...</a>
     <a id="download-button" href="~/Content/thirds/niuniu-capture/CaptureInstall.exe" class="export btn" style="display:none;" title="安装成功后，手动刷新本页面">安装插件...</a>
     <span class="latlng"></span>
@@ -41,6 +44,31 @@
 
 <div class="bg"></div>
 
+<div class="dialog dialog-select-point" id="dialog-select-point">
+    <div class="dialog-content">
+        <div class="dialog-title">
+            <h2>鼠标点选</h2>
+        </div>
+        <a href="javascript:;" class="close-dialog" id="close-select-point-dialog"></a>
+        <div class="item">
+            <div class="col">
+                <label>经度:</label>
+                <input type="text" id="lng" placeholder="请输入经度" />
+                <span class="copy-btn" id="copy-longitude"></span>
+            </div>
+            <div class="col">
+                <label>纬度:</label>
+                <input type="text" id="lat" placeholder="请输入纬度" />
+                <span class="copy-btn" id="copy-latitude"></span>
+            </div>
+        </div>
+        <div class="line"></div>
+        <div class="dialog-btn-group fr">
+            <button class="btn dialog-btn" id="dialog-select-point-cancel">关闭</button>
+        </div>
+    </div>
+</div>
+
 <div class="dialog dialog-info-point" id="dialog-info-point">
     <div class="dialog-content">
         <div class="dialog-title">
@@ -145,6 +173,7 @@
     <script src="~/Content/scripts/beijing/realtime-panel.js"></script>
     <script src="~/Content/scripts/beijing/result-list.js"></script>
     <script src="~/Content/scripts/beijing/info-point.js"></script>
+    <script src="~/Content/scripts/beijing/select-point.js"></script>
     <script src="~/Content/scripts/beijing/map.js"></script>
     <script src="~/Content/scripts/beijing/app.js"></script>
 }