From f718fb9c06fa75b65870a3f5ef2fea10054009aa Mon Sep 17 00:00:00 2001 From: 于紫祥_1901 <email@yuzixiang_1910> Date: Wed, 12 Aug 2020 09:31:26 +0800 Subject: [PATCH] 风场图 --- src/main/webapp/page/scheme-helper.html | 138 ++++++++++++++++++++++++++++++++++++++------- 1 files changed, 115 insertions(+), 23 deletions(-) diff --git a/src/main/webapp/page/scheme-helper.html b/src/main/webapp/page/scheme-helper.html index ab8a551..4dfb0f0 100644 --- a/src/main/webapp/page/scheme-helper.html +++ b/src/main/webapp/page/scheme-helper.html @@ -30,13 +30,20 @@ padding: 14px 10px 0px; text-align: center; width: 280px; - height: 110px; + height: 150px; } .search-box { width: 220px; } - + .city-box { + width: 80px; + } + .set-city-box { + display: inline-block; + position: relative; + bottom: -2px; + } .anchorBL { display: none; } @@ -63,6 +70,15 @@ </tr> </table> <table> + <tr> + <td colspan="5" class="click-handle-title"> + ��������������� + <span id="city-name" style="width: 60px;height:20px;border-bottom:solid #1b1b1b 1px;display:inline-block"> + + </span> + <div class="set-city-box"><input class="city-box" type="input" /> <a id="setCityBtn" style=" text-decoration:underline; color:#00F;cursor:pointer;">������</a></div> + </td> + </tr> <tr> <td> <input id="clickHandle_0" type="radio" name="mapClickHandle" checked value="0" /> @@ -121,9 +137,14 @@ var baiduMap; var markerManager = { data: { + mpoint:[], + star:[], _regionName:null, _boundary:[], _boundaryState:false + }, + menuItems:{ + boundaryMenuItem:null }, bind: {} }; @@ -142,8 +163,8 @@ } } } - markerManager.setRegionName = function (regionName){ - this.data._regionName = regionName; + markerManager.setRegionName = function (regionName,successCallBack,errorCallBack){ + var thatData = this.data; function getBoundary(regionName){ var bdary = new BMap.Boundary(); var map = baiduMap; @@ -151,9 +172,16 @@ map.clearOverlays(); //��������������������� var count = rs.boundaries.length; //������������������������������ if (count === 0) { - alert('������������������������������������'); + // alert('������������������������������������'); + if(!!errorCallBack&&errorCallBack instanceof Function){ + errorCallBack(regionName); + } return ; } + //������������������ + $('#city-name').html(regionName); + $('.city-box').val(''); + map.setCurrentCity(regionName); // ��������������������������� ������������������������ // var pointArray = []; var polygonArray = []; for (var i = 0; i < count; i++) { @@ -164,22 +192,29 @@ } // map.setViewport(pointArray); //������������ //addlabel(); - //������������ + + markerManager.reloadCustomOverlays(); + //������������������������������������������������ + if(markerManager.isBoundaryState()){ + switchBoundary.apply(markerManager.menuItems.boundaryMenuItem); + } + thatData._regionName = regionName; markerManager.data._boundary = polygonArray; + if(!!successCallBack && successCallBack instanceof Function){ + successCallBack(regionName); + } }); } getBoundary(regionName); } markerManager.openBoundary = function(){ - debugger; - console.log(this.data._boundary); + // console.log(this.data._boundary); if(!!this.data._boundary&&this.data._boundary.length>0){ for(var n =0 ;n< this.data._boundary.length;n++){ baiduMap.addOverlay(this.data._boundary[n]); } this.data._boundaryState = true; } - } markerManager.closeBoundary = function(){ for(var n =0 ;n< this.data._boundary.length;n++){ @@ -250,7 +285,32 @@ } } } + markerManager.addOverlaysToBmap = function (overlays) { + if(!!overlays && overlays instanceof Object){ + for(var n in overlays){ + var overlay = overlays[n]; + baiduMap.addOverlay(overlay); + } + }else { + throw new Error("in addOverlaysToBmap overlays is not list"); + } + } + markerManager.reloadCustomOverlays = function() { + if(!!markerManager.data['mpoint']){ + markerManager.addOverlaysToBmap(markerManager.data['mpoint']); + } + if(!!markerManager.data['star']){ + markerManager.addOverlaysToBmap(markerManager.data['star']); + } + if(markerManager.isBoundaryState()){ + markerManager.openBoundary(); + } + } + function clearBaiduOverlays() { + baiduMap.clearOverlays();//������������������������ + markerManager.reloadCustomOverlays(); + } function clearOverlays() { for (var key in markerManager.data) { markerManager.data[key] = []; @@ -258,7 +318,6 @@ } baiduMap.clearOverlays(); } - function removeOverlay(key, marker) { baiduMap.removeOverlay(marker); markerManager.removeMarker(key, marker); @@ -306,7 +365,19 @@ // option.offset = new BMap.Size(0,-15); addMarker(point, option); } - + function switchBoundary() { + if(!markerManager.isBoundaryState()){ + markerManager.openBoundary(); + if(markerManager.isBoundaryState()){ + this.setText("������������"); + }else { + alert('���������������������'); + } + }else { + markerManager.closeBoundary(); + this.setText("������������"); + } + } function mapInit() { var map = new BMap.Map("mapCanvas"); this.baiduMap = map; @@ -366,19 +437,17 @@ } }, { + id: 'boundaryMenuItem', text: '������������', callback: function () { - if(!markerManager.isBoundaryState()){ - markerManager.openBoundary(); - if(markerManager.isBoundaryState()){ - this.setText("������������"); - }else{ - - } - }else { - markerManager.closeBoundary(); - this.setText("������������"); - } + var that = this; + switchBoundary.apply(this); + } + }, + { + text: '������������������', + callback: function (menuItem) { + clearBaiduOverlays(); } }, { @@ -405,6 +474,9 @@ width: 120, iconUrl: item.icon }); + if(item.id == "boundaryMenuItem"){ + markerManager.menuItems.boundaryMenuItem = menuItem; + } menu.addItem(menuItem); if (item.switch) { switchMenuItems[item.handleType] = menuItem; @@ -420,12 +492,32 @@ } (function ($) { var map = mapInit(); + var local = new BMap.LocalSearch(map, { + renderOptions:{map: map}, + onMarkersSet:function () { + markerManager.reloadCustomOverlays(); + } + }); + $('#setCityBtn').click(function () { + var cityName = $('.city-box').val(); + if(!!cityName){ + baiduMap.centerAndZoom(cityName); + markerManager.setRegionName(cityName,function () { + },function (value) { + alert('������������������'+value+'������������'); + }) + } + }); // ������������ $('.search-btn').on('click', function (args) { var searchValue = $('.search-box').val(); if (!!searchValue) { baiduMap.centerAndZoom(searchValue); - markerManager.setRegionName(searchValue); + markerManager.setRegionName(searchValue, + function (searchValue) { + },function (searchValue) { + local.search(searchValue); + }); } }); markerManager.bindSelect("mpoint", "#mpointCount"); -- Gitblit v1.8.0