POST
|
@ken Buja thanks for reply this example is use csvLayerView but i am using FeatureLayer. so anyone know how to implemented with FeatureLayer. and also when i use my FeatureLayer url that it show me error message query failed: {…} details: undefined message: "Invalid query" name: "esri.layers.graphics.QueryEngine" AND when i use featureLayerView.queryFeatures(query).then(function(graphics) Error is message: "Unsupported polygon intersection" name: "feature-store:unsupported-query" AND when i use featureLayer.queryFeatures(query).then(function(graphics) Error is TypeError: graphics.map is not a function Stack trace: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <title>Highlight features by geometry - 4.7</title> <script> var dojoConfig = { has: { "esri-featurelayer-webgl": 1 } }; </script> <link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css"> <script src="https://js.arcgis.com/4.7/"></script> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; overflow: hidden; } #info, #gridDisplay { position: absolute; bottom: 0; left: 0; height: 35%; background-color: white; border-color: grey; width: 100%; font-family: "Avenir Next W00", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; } #gridDisplay { z-index: 80; } #info { z-index: 90; font-size: 16px; padding-left: 20px; } #info * { padding-right: 20px; } .info { line-height: 20px; padding-left: 5px ! important; } .dgrid-header, .dgrid-header-row { background-color: #eee; color: #57585A; } .dgrid-row-even { background-color: #F7F8F8; } .dgrid-row-odd { background-color: #EFEFEF; } .dgrid-selected { background: #B4DAF5; } .dgrid-row { border: none } </style> <script> require([ "esri/Map", "esri/WebMap", "esri/views/MapView", "esri/layers/CSVLayer", "esri/layers/FeatureLayer", "esri/layers/GraphicsLayer", "esri/widgets/Sketch/SketchViewModel", "esri/Graphic", "esri/config", "esri/widgets/Legend", "esri/widgets/Expand", "dgrid/OnDemandGrid", "dgrid/extensions/ColumnHider", "dojo/store/Memory", "dstore/legacy/StoreAdapter", "dgrid/Selection", "dojo/_base/declare", "dojo/domReady!" ], function( Map, WebMap, MapView, CSVLayer, FeatureLayer,GraphicsLayer, SketchViewModel, Graphic, esriConfig, Legend, Expand, OnDemandGrid, ColumnHider, Memory, StoreAdapter, Selection, declare ) { let map, view, csvLayer, csvLayerView, sketchViewModel, highlight, grid,featureLayer,featureLayerView,graphics; const gridDiv = document.getElementById("grid"); const infoDiv = document.getElementById("info"); // create new map, view and csvlayer // setupTheView(); const popupTemplate = { // autocasts as new PopupTemplate() title: "Marriage in NY, Zip Code: {ZIP}", content: [{ type: "fields", fieldInfos: [{ fieldName: "MARRIEDRATE", label: "% Married", format: { places: 0, digitSeparator: true } }, { fieldName: "MARRIED_CY", label: "Total Married", format: { places: 0, digitSeparator: true } }, { fieldName: "NEVMARR_CY", label: "Never Married", format: { places: 0, digitSeparator: true } }, { fieldName: "DIVORCD_CY", label: "Total Divorced", format: { places: 0, digitSeparator: true } }] }] }; // Create the FeatureLayer using the popupTemplate featureLayer = new FeatureLayer({ url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/NYCDemographics1/FeatureServer/0", outFields: ["*"], popupTemplate: popupTemplate }); //bhumin code start map = new Map({ basemap: "dark-gray", layers: [featureLayer] }); view = new MapView({ container: "viewDiv", map: map, zoom:13, center: [-73.950, 40.702], highlightOptions: { color: "#2B65EC", fillOpacity: 0.4 }, padding: { bottom: infoDiv.clientHeight // Same value as the #infoDiv height in CSS } }); // Create the PopupTemplate //bhumin code end const legendExpand = new Expand({ view: view, content: new Legend({ view: view, style: "card" }) }); view.ui.add(legendExpand, "top-left"); view.popup.watch("visible", function(newValue) { if (newValue) { clearUpSelection(); } }); // create a new sketchviewmodel, setup it properties // set up the click event for the select by polygon button setUpSketchViewModel(); sketchViewModel.on("draw-complete", function(evt) { console.log('drow cmplt'); // this polygon will be used to query features that intersect it selectFeatures(evt.geometry); }); const gridFields = ["ZIP", "MARRIEDRATE", "MARRIED_CY" ]; // create a new datastore for the on demandgrid // will be used to display attributes of selected features const dataStore = new StoreAdapter({ objectStore: new Memory({ idProperty: "ZIP" }) }); // create a grid with given columns once the csvlayer is loaded featureLayer.when(function() { // create a grid with columns specified in gridFields variable createGrid(featureLayer.fields); // get a reference the csvlayerview when it is ready. It will used to do // client side queries when user draws polygon to select features view.whenLayerView(featureLayer).then(function(layerView) { featureLayerView = layerView; }); }) .catch(errorCallback); /**************************************************** * Selects features from the csv layer that intersect * a polygon that user drew using sketch view model ****************************************************/ function selectFeatures(geometry) { console.log('ftgm',geometry); view.graphics.removeAll(); if (featureLayerView) { // create a query and set its geometry parameter to the // polygon that was drawn on the view var query = { geometry: geometry, outFields: ["*"] }; console.log('query',query); // query graphics from the csv layer view. Geometry set for the query // can be polygon for point features and only intersecting geometries are returned featureLayer.queryFeatures(query).then(function(graphics) { // if the grid div is displayed while query results does not // return graphics then hide the grid div and show the instructions div if (graphics.length > 0) { // zoom to the extent of the polygon with factor 2 view.goTo(geometry.extent.expand(2)); gridDiv.style.zIndex = 90; infoDiv.style.zIndex = 80; document.getElementById("featureCount").innerHTML = "<b>Showing attributes for " + graphics.length.toString() + " features </b>" } else { gridDiv.style.zIndex = 80; infoDiv.style.zIndex = 90; } // remove existing highlighted features if (highlight) { highlight.remove(); } // highlight query results highlight = featureLayerView.highlight(graphics); console.log('highlight',highlight); // get the attributes to display in the grid var data = graphics.map(function(feature, i) { return Object.keys(feature.attributes) .filter(function(key) { // get fields that exist in the grid return (gridFields.indexOf(key) !== -1); }) // need to create key value pairs from the feature // attributes so that info can be displayed in the grid .reduce((obj, key) => { obj[key] = feature.attributes[key]; return obj; }, {}); }); // set the datastore for the grid using the // attributes we got for the query results dataStore.objectStore.data = data; grid.set("collection", dataStore); }) .catch(errorCallback); } } /************************************************ * fires when user clicks a row in the grid * get the corresponding graphic and select it *************************************************/ function selectFeatureFromGrid(event) { // close view popup if it is open view.popup.close(); // get the ObjectID value from the clicked row var row = event.rows[0] var id = row.data.__OBJECTID; // setup a query by specifying objectIds var query = { objectIds: [parseInt(id)], outFields: ["*"], returnGeometry: true }; // query the csvLayerView using the query set above featureLayerView.queryFeatures(query).then(function(graphics) { // remove all graphics to make sure no selected graphics view.graphics.removeAll(); // create a new selected graphic var selectedGraphic = new Graphic({ geometry: graphics[0].geometry, symbol: { type: "simple-marker", style: "circle", color: "orange", size: "12px", // pixels outline: { // autocasts as new SimpleLineSymbol() color: [255, 255, 0], width: 2 // points } } }); // add the selected graphic to the view // this graphic corresponds to the row that was clicked view.graphics.add(selectedGraphic); }) .catch(errorCallback); } /************************************************ * Creates a new grid. Loops through poverty * csvLayer's fields and creates grid columns * Grid with selection and columnhider extensions *************************************************/ function createGrid(fields) { var columns = fields.filter(function(field, i) { if (gridFields.indexOf(field.name) !== -1) { return field; } }).map(function(field) { if (field.name === "ZIP") { return { field: field.name, label: field.name, sortable: true, hidden: true }; } else { return { field: field.name, label: field.alias, sortable: true }; } }); // create a new onDemandGrid with its selection and columnhider // extensions. Set the columns of the grid to display attributes // the hurricanes cvslayer grid = new(declare([OnDemandGrid, Selection, ColumnHider]))({ columns: columns }, "grid"); // add a row-click listener on the grid. This will be used // to highlight the corresponding feature on the view grid.on('dgrid-select', selectFeatureFromGrid); } /************************************************************************ * Sets up the sketchViewModel. When user clicks on the select by polygon * button sketchViewModel.create() method is called with polygon param. ************************************************************************/ function setUpSketchViewModel() { // polygonGraphicsLayer will be used by the sketchviewmodel // show the polygon being drawn on the view var polygonGraphicsLayer = new GraphicsLayer(); map.add(polygonGraphicsLayer); // add the select by polygon button the view view.ui.add("select-by-polygon", "top-left"); var selectButton = document.getElementById("select-by-polygon"); // click event for the button selectButton.addEventListener("click", function() { clearUpSelection(); view.popup.close(); // ready to draw a polygon sketchViewModel.create("polygon"); }); // create a new sketch view model set its layer sketchViewModel = new SketchViewModel({ view: view, layer: polygonGraphicsLayer, pointSymbol: { type: "simple-marker", color: [255, 255, 255, 0], size: "1px", outline: { color: "gray", width: 0 } } }); } function clearUpSelection() { view.graphics.removeAll(); grid.clearSelection(); } /****************************************************** * Sets up the view. WebMap with winkel III projection * basemap and hurricanes CsvLayer is added to the view. ******************************************************/ function setupTheView() { } /********************************************************* * Used to create uniques values for the csvlayer renderer *********************************************************/ function errorCallback(error) { console.log("error:", error) } }); </script> </head> <body> <div id="viewDiv"> <div id="select-by-polygon" class="esri-widget-button esri-widget esri-interactive" title="Select features by polygon"> <span class="esri-icon-checkbox-unchecked"></span> </div> <div id="info"> <span class="info"> <b>Instructions</b> </span> <br/> <ul> <li> Select features using select by polygon tool. Attributes of selected features will be displayed here.</li> <br/> <li> Click on a row to select a feature associated with it or click on a feature to display its popup.</li> <ul> </div> <div id="gridDisplay"> <span class="info" id="featureCount"></span> <div id="grid"></div> </div> </div> </body> </html>
... View more
06-08-2018
03:27 AM
|
0
|
0
|
458
|
POST
|
i will take a look similar example in version 4.7 Query features from a FeatureLayerView - 4.7 but it's not working getting error in google chrome browser as well as safari browser getting warning : Crome error : query failed: h {name: "esri.layers.graphics.QueryEngine", message: "Invalid query", details: undefined} Safari error : [esri.core.workers] – "This browser doesn't support ArrayBuffer transfer." error in details: Error in details what exact i'm trying to : in 3 ver. work but v4.7 it's not v3 working example !important: i can use this example in ionic 3 is this possible and work?
... View more
06-07-2018
07:02 AM
|
0
|
2
|
804
|
POST
|
Thanks for your reply, i'll try and let you know our service team is not available so tomorrow sure i'll update you Thanks so much. i'm new in arc GIS
... View more
05-23-2018
06:07 AM
|
0
|
0
|
935
|
POST
|
Hello Robert, i am using ionic 3 mobile platform and i'm getting same error when click ERROR message {"error": {"code": 403,"details": ["Proxy has not been set up for this URL. Make sure there is a serverUrl in the configuration file that matches: https://route.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World/solve?f=json&returnDirections=false&returnRoutes=true&returnZ=true&returnStops=false&returnBarriers=false&returnPolygonBarriers=false&returnPolylineBarriers=false&outSR=3857&outputLines=esriNAOutputLineTrueShape&stops=%7B%22type%22%3A%22features%22%2C%22features%22%3A%5B%7B%22geometry%22%3A%7B%22spatialReference%22%3A%7B%22latestWkid%22%3A3857%2C%22wkid%22%3A102100%7D%2C%22x%22%3A8125891.5041974485%2C%22y%22%3A2163042.270023918%7D%2C%22attributes%22%3A%7B%7D%7D%2C%7B%22geometry%22%3A%7B%22spatialReference%22%3A%7B%22latestWkid%22%3A3857%2C%22wkid%22%3A102100%7D%2C%22x%22%3A8126497.812559034%2C%22y%22%3A2162430.1766333366%7D%2C%22attributes%22%3A%7B%7D%7D%2C%7B%22geometry%22%3A%7B%22spatialReference%22%3A%7B%22latestWkid%22%3A3857%2C%22wkid%22%3A102100%7D%2C%22x%22%3A8126476.023267714%2C%22y%22%3A2162869.0452701817%7D%2C%22attributes%22%3A%7B%7D%7D%5D%2C%22doNotLocateOnRestrictedElements%22%3Atrue%7D"], "message": "Proxy has not been set up for this URL."}} server http://xx.xx.113.xx:6880 server config <?xml version="1.0" encoding="utf-8" ?> <ProxyConfig allowedReferers="*" logFile="proxy_log.log" logLevel="INFO" mustMatch="true"> <serverUrls> <serverUrl url="http://services.arcgisonline.com" matchAll="true"/> <serverUrls> <serverUrl url="https://route.arcgis.com/arcgis/rest/info?f=json" username="xxxxxx" password="xxxxx" clientId="xxxxxxx" clientSecret="xxxxxxxx" rateLimit="600" rateLimitPeriod="60" accessToken="xxxxxxxxx" matchAll="true" /> </serverUrls> </ProxyConfig> javascript code . : urlUtils.addProxyRule({ urlPrefix: "route.arcgis.com", proxyUrl: "http://xx.xx.113.xx:6880/Java/proxy.jsp?" }); // Point the URL to a valid route service var routeTask = new RouteTask({ url: "https://route.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World" });
... View more
05-23-2018
02:38 AM
|
0
|
4
|
935
|
Online Status |
Offline
|
Date Last Visited |
11-11-2020
02:25 AM
|