commit

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

@@ -205,6 +205,7 @@
     <Content Include="Content\scripts\config.js" />
     <Content Include="Content\scripts\menggu\app.js" />
     <Content Include="Content\scripts\menggu\history-panel.js" />
+    <Content Include="Content\scripts\menggu\info-point.js" />
     <Content Include="Content\scripts\menggu\map.js" />
     <Content Include="Content\scripts\menggu\realtime-panel.js" />
     <Content Include="Content\scripts\menggu\result-list.js" />

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

@@ -97,7 +97,9 @@ var Map = function (parent) {
         L.tileLayer.gaodeOther().addTo(this.map);
 
         $('.leaflet-control-attribution').hide();
-        this.map.on('mousemove', this.OnMapMove.bind(this))
+
+        $('.latlng').text('当前经纬度：{0}, {1}'.format(this.getLatLng(116.400000000), this.getLatLng(39.90000000)));
+        this.map.on('mousemove', this.OnMapMove.bind(this));
     };
 
     this.CenterMap = function (lat, lng) {

04.系统编码/App/Content/scripts/menggu/info-point.js

@@ -0,0 +1,60 @@
+var InfoPoint = function (parent) {
+    this.Parent = parent;
+    this.Point = null;
+
+    this.Startup = function () {
+        $('.icon-view .icon-col').on('click', this.OnColClick.bind(this));
+        $('#close-info-dialog').on('click', this.HideDialog.bind(this));
+        $('#dialog-info-point-sure').on('click', this.OnSureClick.bind(this));
+        $('#dialog-info-point-cancel').on('click', this.HideDialog.bind(this));
+    };
+
+    this.OnColClick = function (event) {
+        $('.icon-view .icon-col').removeClass("active");
+
+        var label = $(event.target).is('img') ? $(event.target).parent('div') : $(event.target);
+        label.addClass("active");
+    };
+
+    this.HideDialog = function () {
+        $('#dialog-info-point').hide();
+        $('#map').css('cursor', 'grab');
+        this.Parent.isMark = false;
+    };
+
+    this.ShowDialog = function (point) {
+        this.Point = point;
+        $('#dialog-info-point').show();
+        $("#title").textbox('setValue', '');
+
+        $('.icon-view .icon-col').removeClass("active");
+        $('.icon-view .icon-col').eq(0).addClass("active");
+    };
+
+    this.OnSureClick = function () {
+        this.validation();
+    }
+
+    this.validation = function () {
+        if ($("#title").textbox('getValue').trim() === '') {
+            alert('请输入标题');
+            return
+        } else {
+            $.ajax({
+                type: "POST",
+                dataType: 'text',
+                url: '/Point/Add',
+                data: {
+                    Title: $("#title").textbox('getValue'),
+                    Icon: $('.icon-view .active').attr('name'),
+                    Longitude: this.Point.lng,
+                    Latitude: this.Point.lat
+                },
+                success: function (result) {
+                    this.Parent.AddInfoPoint(this.Point, $("#title").textbox('getValue'), $('.icon-view .active').attr('name'), result);
+                    this.HideDialog();
+                }.bind(this)
+            });
+        }
+    }
+}

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

@@ -22,11 +22,20 @@ var Map = function (parent) {
     this.Parent = parent;
     this.WindTemplate = null;
     this.MultiLayers = false;
+    this.isMark = false;
+
+    this.InfoPoint = new InfoPoint(this);
 
     this.Startup = function () {
         this.CreateMap();
         this.InitCapture();
         this.LoadWindTemplate();
+        this.LoadInfoPoint();
+        this.InfoPoint.Startup();
+
+        $('#mark-button').on('click', this.onMarkClick.bind(this));
+        $('#draw-button').on('click', this.OnDrawButtonClick.bind(this));
+        $('#clear-button').on('click', this.OnClearButtonClick.bind(this));
         $('#particle-switch a').on('click', this.OnParticleButtonClick.bind(this));
         $('#label-switch a').on('click', this.OnRemoveMarkersButtonClick.bind(this));
     };
@@ -42,8 +51,30 @@ var Map = function (parent) {
         L.tileLayer.googleBase().addTo(this.map);
         L.tileLayer.googleDetail().addTo(this.map);
         $('.leaflet-control-attribution').hide();
+
+        $('.latlng').text('当前经纬度：{0}, {1}'.format(this.getLatLng(111.746303), this.getLatLng(40.854662)));
+        this.map.on('mousemove', this.OnMapMove.bind(this));
+    };
+
+    this.CenterMap = function (lat, lng) {
+        this.map.setView([lat, lng], 11);
+    };
+
+    this.OnMapMove = function (e) {
+        $('.latlng').text('当前经纬度：{0}, {1}'.format(this.getLatLng(e.latlng.lng), this.getLatLng(e.latlng.lat)))
     };
 
+    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.OnParticleButtonClick = function () {
         // Toggle switch on/off
         var parent = $(event.target).parent();
@@ -86,6 +117,67 @@ var Map = function (parent) {
         }
     };
 
+    this.OnDrawButtonClick = function () {
+        if (this.map.hasLayer(this.lineLayer))
+            this.map.removeLayer(this.lineLayer);
+
+        this.point = [];
+        this.lineLayer = new L.FeatureGroup();
+        this.map.addLayer(this.lineLayer);
+
+        this.map.on(L.Draw.Event.CREATED, function (e) {
+            this.lineLayer.addLayer(e.layer);
+            this.point.push([e.layer._latlngs[0].lng, e.layer._latlngs[0].lat], [e.layer._latlngs[1].lng, e.layer._latlngs[1].lat]);
+            this.AddPoints(this.lineLayer, this.point, 2, '#000000', '#ff0000');
+            this.SetDistance(e.layer._latlngs[0].lng, e.layer._latlngs[0].lat, e.layer._latlngs[1].lng, e.layer._latlngs[1].lat, this.lineLayer);
+        }.bind(this));
+
+        this.map.on(L.Draw.Event.DRAWVERTEX, function (e) {
+            var layerIds = Object.keys(e.layers._layers);
+            if (layerIds.length > 1) {
+                var secondVertex = e.layers._layers[layerIds[1]]._icon;
+                requestAnimationFrame(() => secondVertex.click());
+            }
+        }.bind(this));
+
+        var drawer = new L.Draw.Polyline(this.map, {});
+        drawer.enable();
+    };
+
+    this.OnClearButtonClick = function () {
+        if (this.map.hasLayer(this.lineLayer))
+            this.map.removeLayer(this.lineLayer);
+    };
+
+    this.SetDistance = function (fromLon, fromLat, toLon, toLat, features) {
+        var lon = (fromLon + toLon) / 2;
+        var lat = (fromLat + toLat) / 2;
+        var from = L.latLng(fromLat, fromLon);
+        var to = L.latLng(toLat, toLon);
+        var bounds = from.distanceTo(to);
+
+        L.marker([lat, lon], {
+            icon: L.divIcon({
+                className: 'distance',
+                html: '<span>两点之间距离为：{0}公里</span>'.format(Math.round((bounds / 1000) * 100) / 100)
+            })
+        }).addTo(features);
+    };
+
+    this.AddPoints = function (features, points, weight, color, fillColor) {
+        $(points).each(function (index, point) {
+            L.circleMarker([point[1], point[0]], {
+                opacity: 1,
+                weight: weight,
+                color: color,
+                fillColor: fillColor,
+                fillOpacity: 1,
+                radius: 4,
+                className: 'point point{0}'.format(point[1].toString().split(".").join(""))
+            }).addTo(features);
+        }.bind(this));
+    };
+
     this.GetWindFileName = function () {
         var value = $('#release-date').datebox('getValue');
         var time = moment(value, 'YYYY/MM/DD HH:mm');
@@ -294,4 +386,65 @@ var Map = function (parent) {
         if (value <= 1000)
             return 'rgb(192, 28, 36)';
     };
+
+    this.LoadInfoPoint = function () {
+        $.ajax({
+            type: "POST",
+            dataType: 'text',
+            url: '/Point/Query',
+            success: function (result) {
+                var data = JSON.parse(result);
+                data.forEach(function (item, index) {
+                    var point = {
+                        lat: item.Latitude,
+                        lng: item.Longitude
+                    };
+                    this.AddInfoPoint(point, item.Title, item.Icon, item.Id)
+                }.bind(this))
+            }.bind(this)
+        });
+    };
+
+    this.onMarkClick = function () {
+        this.isMark = true;
+
+        $('#map').css('cursor', 'crosshair');
+        this.DrewInfoPoint();
+    };
+
+    this.DrewInfoPoint = function () {
+        this.map.on('click', function (e) {
+            if (this.isMark)
+                this.InfoPoint.ShowDialog(e.latlng);
+            else
+                return;
+        }.bind(this))
+    };
+
+    this.AddInfoPoint = function (point, title, icon, id) {
+        let label = '<div class="info-point-block info-point{0}"><div class="info-point-top"><p>{1}</p><div class="remove-info-point""><span class="remove-info-point-btn" id="close-btn{2}"></span></div></div><div class="icon icon{3}"/></div></div>'.format(id, title, id, icon.slice(0, 1));
+        L.marker([point.lat, point.lng], {
+            icon: L.divIcon({
+                className: 'info-point-content',
+                html: label
+            })
+        }).addTo(this.map);
+
+        var button = $('#close-btn{0}'.format(id));
+        button.on('click', this.RemoveInfoPoint.bind(this, id));
+    };
+
+    this.RemoveInfoPoint = function (id, event) {
+        $.ajax({
+            type: "POST",
+            dataType: 'text',
+            url: '/Point/Delete',
+            data: {
+                id: id,
+            },
+            success: function () {
+                $('.info-point{0}'.format(id)).hide();
+            }.bind(this)
+        });
+    }
 };

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

@@ -4,6 +4,7 @@
 
 @section styles {
     <link href="~/Content/thirds/leaflet-velocity/leaflet-velocity.min.css" rel="stylesheet" />
+    <link href="~/Content/thirds/leaflet.draw-0.4.14/leaflet.draw.css" rel="stylesheet" />
 }
 
 <div class="main">
@@ -14,8 +15,12 @@
     <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>
 </div>
 
 <div class="right">
@@ -35,6 +40,50 @@
 
 <div class="bg"></div>
 
+<div class="dialog dialog-info-point" id="dialog-info-point">
+    <div class="dialog-content">
+        <div class="dialog-title">
+            <h2>添加信息点</h2>
+        </div>
+        <a href="javascript:;" class="close-dialog" id="close-info-dialog"></a>
+        <div class="item">
+            <label>标题:</label>
+            <input type="text" id="title" class="easyui-textbox" prompt="请输入标题" />
+        </div>
+        <div class="icon-view clearfix">
+            <div class="icon-col active fl" name="1.png">
+                <img src="~/Content/images/markers/1.png" />
+            </div>
+            <div class="icon-col fl" name="2.png">
+                <img src="~/Content/images/markers/2.png" />
+            </div>
+            <div class="icon-col fl" name="3.png">
+                <img src="~/Content/images/markers/3.png" />
+            </div>
+            <div class="icon-col fl" name="4.png">
+                <img src="~/Content/images/markers/4.png" />
+            </div>
+            <div class="icon-col fl" name="5.png">
+                <img src="~/Content/images/markers/5.png" />
+            </div>
+            <div class="icon-col fl" name="6.png">
+                <img src="~/Content/images/markers/6.png" />
+            </div>
+            <div class="icon-col fl" name="7.png">
+                <img src="~/Content/images/markers/7.png" />
+            </div>
+            <div class="icon-col fl" name="8.png">
+                <img src="~/Content/images/markers/8.png" />
+            </div>
+        </div>
+        <div class="line"></div>
+        <div class="dialog-btn-group fr">
+            <button class="btn dialog-btn dialog-sure-btn" id="dialog-info-point-sure">确定</button>
+            <button class="btn dialog-btn" id="dialog-info-point-cancel">取消</button>
+        </div>
+    </div>
+</div>
+
 <div class="dialog dialog-manage">
     <div class="dialog-content">
         <div class="dialog-title">
@@ -84,6 +133,7 @@
 
 @section scripts {
     <script src="~/Content/thirds/leaflet-velocity/leaflet-velocity.min.js"></script>
+    <script src="~/Content/thirds/leaflet.draw-0.4.14/leaflet.draw.js"></script>
     <script src="~/Content/thirds/niuniu-capture/niuniucapture.js"></script>
     <script src="~/Content/thirds/niuniu-capture/capturewrapper.js"></script>
     <script src="~/Content/thirds/niuniu-capture/jquery.json-2.3.min.js"></script>
@@ -91,6 +141,7 @@
     <script src="~/Content/scripts/menggu/history-panel.js"></script>
     <script src="~/Content/scripts/menggu/realtime-panel.js"></script>
     <script src="~/Content/scripts/menggu/result-list.js"></script>
+    <script src="~/Content/scripts/beijing/info-point.js"></script>
     <script src="~/Content/scripts/menggu/map.js"></script>
     <script src="~/Content/scripts/menggu/app.js"></script>
 }