JavaScript If语句和组合框功能

时间:2018-09-19 20:54:33

标签: javascript html if-statement combobox

我有两个组合框独立工作。我想让他们一起工作。我要么查询州名,要么查询农田。我不能让它们都一起过滤。

查询得克萨斯州和4英亩。获取德克萨斯州的所有4英亩县。现在,它会给我全德克萨斯州或美国的所有4英亩县。

if语句位于“ app”对象中。

<!DOCTYPE html>    
<html>    
  
<head>    
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />    
  <title>Drop Down Test</title>    
  <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css">       
  <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">    
  <style>    
    html,    
    body,    
    #mainWindow {    
      height: 100%;    
      width: 100%;    
      margin: 0;    
      padding: 0;    
    }    
    body {    
      background-color: #FFF;    
      overflow: hidden;    
      font-family: "Trebuchet MS";    
    }    
    #header {    
      height: 3%;    
      overflow: auto;    
    }    
  </style>    
  <script>    
    var dojoConfig = {    
      parseOnLoad: true    
    };    
  </script>    
  <script src="http://js.arcgis.com/3.10/"></script>    
  <script>    
    var map;    
    require([    
      "esri/map",    
      "dojo/on",    
      "esri/tasks/query",    
      "esri/layers/FeatureLayer",    
      "dojo/store/Memory",    
      "dojo/_base/array",    
      "dojo/_base/lang",    
      "esri/request",    
      "dojo/json",    
      "dijit/layout/BorderContainer",    
      "dijit/layout/ContentPane",    
      "dijit/form/Button",    
      "dijit/form/ComboBox",    
      "dojo/domReady!"    
    ], function(    
      Map, on, Query, FeatureLayer, Memory, array, lang, esriRequest, json    
    ) {    
      map = new Map("map", {    
        basemap: "topo",    
        center: [-98.579729, 39.828366],    
        zoom: 5    
      });    
  
      var crops = new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/USA_County_Crops_2007/FeatureServer/0", {    
        mode: FeatureLayer.MODE_SELECTION,    
        outFields: ["*"]    
      });    
  
      map.addLayers([crops]);    
      map.on("layers-add-result", lang.hitch(this, function(){    
        var url = "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/USA_County_Crops_2007/FeatureServer/0/generateRenderer";    
        var classificationDef = {"type":"uniqueValueDef","uniqueValueFields":["STATE"]};  
        var classificationDef2 = {"type":"uniqueValueDef","uniqueValueFields":["TotalFarmedAcres"]};  
        var str = json.stringify(classificationDef);  
        var str2 = json.stringify(classificationDef2);  
        esriRequest({    
          url:url,    
          content:{    
            classificationDef:str,    
            f:'json'    
          },    
          handleAs:'json',    
          callbackParamName:'callback',    
          timeout:15000    
        }).then(lang.hitch(this,function(response){    
          var uniqueValueInfos = response && response.uniqueValueInfos;    
          if(uniqueValueInfos){    
            var store2 = new Memory({data:[]});    
            dijit.byId("uniqueValuesSelect").set('store',store2);    
            var data = array.map(uniqueValueInfos,lang.hitch(this,function(info,index){    
              var value = info.value;    
              //value = parseFloat(value);    
              var dataItem = {    
                id:index,    
                name:value    
              };    
              return dataItem;    
            }));    
            store2 = new Memory({data:data});    
            dijit.byId("uniqueValuesSelect").set('store',store2);    
          }    
        }),lang.hitch(this,function(error){    
          console.error(error);    
        }));  
        esriRequest({    
          url:url,    
          content:{    
            classificationDef:str2,    
            f:'json'    
          },    
          handleAs:'json',    
          callbackParamName:'callback',    
          timeout:15000    
        }).then(lang.hitch(this,function(response){    
          var uniqueValueInfos2 = response && response.uniqueValueInfos;    
          if(uniqueValueInfos2){    
            var store3 = new Memory({data:[]});    
            dijit.byId("uniqueValuesSelect2").set('store',store3);    
            var data2 = array.map(uniqueValueInfos2,lang.hitch(this,function(info,index){    
              var value2 = info.value;    
              //value2 = parseFloat(value2);    
              var dataItem2 = {    
                id:index,    
                name:value2    
              };    
              return dataItem2;    
            }));    
            store3 = new Memory({data:data2});    
            dijit.byId("uniqueValuesSelect2").set('store',store3);    
          }    
        }),lang.hitch(this,function(error){    
          console.error(error);    
        }));  
      }));    
  
      app = {    
        zoomRow: function(id, which){     
          crops.clearSelection();    
          var query = new Query();  
          if(which == "statename"){  
            query.where = "STATE='" + (id).toString() + "'";   
          }if(which == "FarmedAcres"){  
            query.where = "TotalFarmedAcres='" + (id).toString() + "'";   
          }  
          console.info(query.where);  
          query.returnGeometry = true;    
          crops.selectFeatures(query, FeatureLayer.SELECTION_NEW, function (features) {    
            //var thePoly = features[0].geometry;    
            //var theExtent = thePoly.getExtent().expand(2); //Zoom out slightly from the polygon's extent     
            //map.setExtent(theExtent);    
          });    
        }    
      };    
  
    });    
  </script>    
</head>    
  
<body class="claro">    
  <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="padding:0px;margin:0px;">    
    <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" style="overflow:hidden;border:none;border-bottom: 3px solid #CC9900;font-family: Windows;font-size:14pt; color: #FFFFFF;background: #000000; "> Select a State and total Acres farmed:      
      <input id="uniqueValuesSelect" data-dojo-type="dijit.form.ComboBox" value="statename" onchange="app.zoomRow(document.getElementById('uniqueValuesSelect').value, 'statename');" />  
      <input id="uniqueValuesSelect2" data-dojo-type="dijit.form.ComboBox" value="FarmedAcres" onchange="app.zoomRow(document.getElementById('uniqueValuesSelect2').value, 'FarmedAcres');" />  
    </div>    
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" style="width:100%;height:95%;border:none;padding:0px;margin:0px;"></div>    
  </div>    
</body>    
  
</html> 

1 个答案:

答案 0 :(得分:1)

您需要同时访问两个组合框,这样您才能执行以下操作:

import pandas as pd    
import numpy as np

new_dataframe = pd.read_hdf(r"C:\hd files of pa\datafile1")
dataframe_with_size = pd.read_hdf(r"Y:\forsiye\New Text Document.txt.hd5")
sizes = dataframe_with_size.loc[dataframe_with_size.loc[:, "size"] != 0, "size"].values


random = np.random.RandomState(seed=1)
new_dataframe['size'] = random.choice(
        sizes, 
        size=new_dataframe.shape[0], 
        replace=True
        )

new_dataframe1 = pd.read_hdf(r"C:\hd files of pa\datafile2")
dataframe_with_size1 = pd.read_hdf(r"Y:\forsiye\New Text Document.txt.hd5")
sizes = dataframe_with_size1.loc[dataframe_with_size1.loc[:, "size"] != 0, "size"].values
[![enter image description here][1]][1]

random = np.random.RandomState(seed=1)
new_dataframe1['size'] = random.choice(
        sizes, 
        size=new_dataframe1.shape[0], 
        replace=True
        )

new_dataframe['size'].hist(bins = 300)
new_dataframe1['size'].hist(bins = 300)

这意味着html应该是这样的

app = {    
    zoomRow: function(stateId, acresId){     
      crops.clearSelection();    
      var query = new Query(); 
      query.where = "STATE='" + (stateId).toString() + "' AND TotalFarmedAcres='" + (acresId).toString() + "'";   
      console.info(query.where);  
      query.returnGeometry = true;    
      crops.selectFeatures(query, FeatureLayer.SELECTION_NEW, function (features) {    
        //var thePoly = features[0].geometry;    
        //var theExtent = thePoly.getExtent().expand(2); //Zoom out slightly from the polygon's extent     
        //map.setExtent(theExtent);    
      });    
    }    
  }; 

向stateId,acresId添加相应的验证,以避免出现空值或未定义的值