diff --git a/04.系统编码/.vs/BeijingSafeguard/v15/.suo b/04.系统编码/.vs/BeijingSafeguard/v15/.suo index d00f436..f9b5085 100644 Binary files a/04.系统编码/.vs/BeijingSafeguard/v15/.suo and b/04.系统编码/.vs/BeijingSafeguard/v15/.suo differ diff --git a/04.系统编码/.vs/BeijingSafeguard/v15/Server/sqlite3/storage.ide-wal b/04.系统编码/.vs/BeijingSafeguard/v15/Server/sqlite3/storage.ide-wal index 2071b1e..08ca39b 100644 Binary files a/04.系统编码/.vs/BeijingSafeguard/v15/Server/sqlite3/storage.ide-wal and b/04.系统编码/.vs/BeijingSafeguard/v15/Server/sqlite3/storage.ide-wal differ diff --git a/04.系统编码/App/App.csproj b/04.系统编码/App/App.csproj index 1f640a6..4396783 100644 --- a/04.系统编码/App/App.csproj +++ b/04.系统编码/App/App.csproj @@ -205,6 +205,7 @@ + diff --git a/04.系统编码/App/Content/scripts/beijing/map.js b/04.系统编码/App/Content/scripts/beijing/map.js index ee64c45..3a356ef 100644 --- a/04.系统编码/App/Content/scripts/beijing/map.js +++ b/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) { diff --git a/04.系统编码/App/Content/scripts/menggu/info-point.js b/04.系统编码/App/Content/scripts/menggu/info-point.js new file mode 100644 index 0000000..8e1f137 --- /dev/null +++ b/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) + }); + } + } +} \ No newline at end of file diff --git a/04.系统编码/App/Content/scripts/menggu/map.js b/04.系统编码/App/Content/scripts/menggu/map.js index f70ab01..10cb35d 100644 --- a/04.系统编码/App/Content/scripts/menggu/map.js +++ b/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: '两点之间距离为：{0}公里'.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 = '

{1}

'.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) + }); + } }; \ No newline at end of file diff --git a/04.系统编码/App/Views/Menggu/Index.cshtml b/04.系统编码/App/Views/Menggu/Index.cshtml index 567036c..6838103 100644 --- a/04.系统编码/App/Views/Menggu/Index.cshtml +++ b/04.系统编码/App/Views/Menggu/Index.cshtml @@ -4,6 +4,7 @@ @section styles { + }
@@ -14,8 +15,12 @@
时间标签
+ 信息点标绘... + 画线... + 清除... 导出图片... +
@@ -35,6 +40,50 @@
+
+
+
+

添加信息点

+
+ +
+ + +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ + +
+
+
+
@@ -84,6 +133,7 @@ @section scripts { + @@ -91,6 +141,7 @@ + } \ No newline at end of file