POST
|
I am trying to implement the setRenderer method of the WFS Layer object using a simple renderer with a color ramp using the setColorInfo method of the SimpleRenderer class. This works fine if I use a feature layer derived from and ArcServer instance, as in this example: Color ramp with rotation and proportional symbols | ArcGIS API for JavaScript 3.17 but does not work for my WFS. Oddly, if I use a class breaks renderer to achieve a similar effect, it works fine. I have found nothing in the docs to suggest that only some renderers work with a WFS. I have isolated the problem with the following code: <!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>Class breaks with rotation and proportional symbols</title> <link rel="stylesheet" href="https://js.arcgis.com/3.17/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css"> <style> html, body, #border-container { height: 100%; margin: 0; } </style> <script src="https://js.arcgis.com/3.17/"></script> <script> require([ "esri/map", "esri/layers/FeatureLayer", "esri/dijit/Legend", "esri/renderers/SimpleRenderer", "esri/symbols/SimpleMarkerSymbol", "esri/Color", "dojo/_base/array", "dojo/parser", "esri/InfoTemplate", "esri/renderers/ClassBreaksRenderer", "esri/layers/WFSLayer", "esri/layers/LabelLayer", "esri/symbols/TextSymbol", "esri/symbols/Font", "esri/symbols/SimpleLineSymbol", "esri/config", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!" ], function( Map, FeatureLayer, Legend, SimpleRenderer, SimpleMarkerSymbol, Color, arrayUtils, parser, InfoTemplate, ClassBreaksRenderer, WFSLayer, LabelLayer, TextSymbol, Font, SimpleLineSymbol, esriConfig ) { parser.parse(); esriConfig.defaults.io.corsEnabledServers.push("data.conryservices.com:8080"); var map = new Map("map", { basemap: "gray", center: [-122.836, 42.346], zoom: 13 }); var infoTemplate = new InfoTemplate("Attributes", "${*}"); // initializing layer in this way does not use renderer properly var layer = new WFSLayer(); var opts = { "url": "http://data.conryservices.com:8080/geoserver/wfs", "version": "1.0.0", "name": "zip_centroids", "wkid": 4326, "maxFeatures": 100, "mode": "snapshot" }; layer.fromJson(opts); layer.setInfoTemplate(infoTemplate); /* // initializing layer as below works var layer = new FeatureLayer("https://tmservices1.esri.com/arcgis/rest/services/LiveFeeds/NOAA_METAR_current_wind_speed_direction/MapServer/0", { mode: FeatureLayer.MODE_ONDEMAND, outFields:["*"], infoTemplate: infoTemplate }); */ map.addLayers([layer]); var marker = new SimpleMarkerSymbol(); var renderer = new SimpleRenderer(marker); renderer.setColorInfo({ field: "temp", minDataValue: -20, maxDataValue: 296000, colors: [ new Color([0,104,214]), new Color([20,120,220]), new Color([39,136,226]), new Color([59,152,232]), new Color([78,169,237]), new Color([98,185,243]), new Color([131,197,181]), new Color([164,210,120]), new Color([197,222,58]), new Color([205,188,80]), new Color([212,155,102]), new Color([220,121,124]), new Color([216,87,115]), new Color([211,53,106]), new Color([206,19,97]) ] }); layer.setRenderer(renderer); }); </script> </head> <body class="claro"> <div id="border-container" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false"> <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'" style="width: 200px;"><div id="legend"></div></div> <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="padding: 0;"></div> </div> </body> </html> In addition I have attached screenshot of the two use cases. If there is any further information I can provide please let me know. Have been working on this for some time and it's quite frustrating.
... View more
08-10-2016
12:58 PM
|
0
|
0
|
1208
|
Online Status |
Offline
|
Date Last Visited |
11-11-2020
02:24 AM
|