背景
目前有一个区的图斑数据需要分乡镇展示,所以采用FeatureLayer 的 definitionExpression 构造SQL语句进行过滤,官方提供的示例:
1 // Set definition expression in constructor to only display trees with scientific name Ulmus pumila 2 const layer = new FeatureLayer({ 3 url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Landscape_Trees/FeatureServer/0", 4 definitionExpression: "Sci_Name = 'Ulmus pumila'" 5 });
// Set the definition expression directly on layer instance to only display trees taller than 50ft layer.definitionExpression = "HEIGHT > 50";
这个问题出来后,直接让我懵逼了,总不能把十几个乡镇的图斑分别发布出来然后加载吧,这样子太麻烦了,当然这是最坏的打算。
“领导”的意思是让后端来封装一层,这个在其他纯前端项目还好,sql语句放到后端,返回个json就好了。但这毕竟是GIS项目,人家都封装好了,就需要个url,塞个json不合适吧....还说arcgis server发布的就只能做demo,搞得我有点怀疑人生了
环境
Vue3.0
@arcgis/core
问题
利用definitionExpression 虽然方便,但是处于安全考虑,在正式环境下会被拦截。现场给的回复是“URL(0141)::where=town%20%3D%20%27320509101000%27%20and%20xcdcqk%20%3C%3E%20%270%27”,被认定为sql注入攻击 拦截了
解决方案
其实这个只需要前端规避下在请求url里面不要携带‘where’即可,所以就不要想着直接在定义featurelayer时过滤了,这样子肯定还是会携带‘where’,所以考虑在featurelayer加载后再处理。
我的解决方案是利用layerview的filter来做筛选:
1 // display rain gauges where their water percent is over 30% 2 // and if the gauges are completely contained by the 10-mile 3 // buffer around the filter geometry 4 featureLayerView.filter = new FeatureFilter({ 5 where: "percentile >= 30", 6 geometry: filterPolygon, 7 spatialRelationship: "contains", 8 distance: 10, 9 units: "miles" 10 });
对比
项目原代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 let definitionExpression 2 if (townCode) { 3 definitionExpression = `town = '${townCode}' and xcdcqk <> '0'` 4 } else { 5 definitionExpression = "xcdcqk <> '0'" 6 } 7 const pathchRender = { 8 type: 'unique-value', 9 field: 'needCheck', 10 defaultSymbol: { 11 type: 'simple-fill', // autocasts as new SimpleFillSymbol() 12 color: [227, 139, 79, 0], 13 outline: { 14 // autocasts as new SimpleLineSymbol() 15 16 color: [0, 245, 255], 17 width: 2.5 18 } 19 }, 20 uniqueValueInfos: [ 21 { 22 // All features with value of "East" will be green 23 value: 1, 24 symbol: { 25 type: 'simple-fill', // autocasts as new SimpleFillSymbol() 26 color: [227, 139, 79, 0], 27 outline: { 28 // autocasts as new SimpleLineSymbol() 29 color: [0, 245, 255], 30 width: 2.5 31 } 32 } 33 }, 34 { 35 // All features with value of "East" will be green 36 value: 0, 37 symbol: { 38 type: 'simple-fill', // autocasts as new SimpleFillSymbol() 39 color: [227, 139, 79, 0], 40 outline: { 41 // autocasts as new SimpleLineSymbol() 42 43 color: [150, 150, 150], 44 width: 2.5 45 } 46 } 47 } 48 ] 49 } 50 51 const patchesLayer = new FeatureLayer({ 52 id: 'patchesLayer', 53 title: '图斑', 54 url: patchesLayerUrl, 55 definitionExpression: definitionExpression, 56 outFields: [ 57 'objectid_1', 58 'fwbh', 59 'lon', 60 'lat', 61 'needCheck', 62 'fwlb', 63 'fwmj', 64 'flloors', 65 'height' 66 ], 67 objectIdField: 'objectid_1', 68 editingEnabled: true, 69 renderer: pathchRender 70 }) 71 map.layers.add(patchesLayer)View Code
请求效果图,能看到查询的url里面携带‘where’:
改良后的项目代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 let definitionExpression 2 if (townCode) { 3 definitionExpression = `town = '${townCode}' and xcdcqk <> '0'` 4 } else { 5 definitionExpression = "xcdcqk <> '0'" 6 } 7 const pathchRender = { 8 type: 'unique-value', 9 field: 'needCheck', 10 defaultSymbol: { 11 type: 'simple-fill', // autocasts as new SimpleFillSymbol() 12 color: [227, 139, 79, 0], 13 outline: { 14 // autocasts as new SimpleLineSymbol() 15 16 color: [0, 245, 255], 17 width: 2.5 18 } 19 }, 20 uniqueValueInfos: [ 21 { 22 // All features with value of "East" will be green 23 value: 1, 24 symbol: { 25 type: 'simple-fill', // autocasts as new SimpleFillSymbol() 26 color: [227, 139, 79, 0], 27 outline: { 28 // autocasts as new SimpleLineSymbol() 29 color: [0, 245, 255], 30 width: 2.5 31 } 32 } 33 }, 34 { 35 // All features with value of "East" will be green 36 value: 0, 37 symbol: { 38 type: 'simple-fill', // autocasts as new SimpleFillSymbol() 39 color: [227, 139, 79, 0], 40 outline: { 41 // autocasts as new SimpleLineSymbol() 42 43 color: [150, 150, 150], 44 width: 2.5 45 } 46 } 47 } 48 ] 49 } 50 51 const patchesLayer = new FeatureLayer({ 52 id: 'patchesLayer', 53 title: '图斑', 54 url: patchesLayerUrl, 55 // definitionExpression: definitionExpression, 56 outFields: [ 57 'objectid_1', 58 'fwbh', 59 'lon', 60 'lat', 61 'needCheck', 62 'fwlb', 63 'fwmj', 64 'flloors', 65 'height' 66 ], 67 objectIdField: 'objectid_1', 68 editingEnabled: true, 69 renderer: pathchRender 70 }) 71 map.layers.add(patchesLayer) 72 view.whenLayerView(patchesLayer).then((layerView) => { 73 patchLayerView = layerView 74 patchLayerView.filter = { 75 where: definitionExpression 76 } 77 })View Code
请求效果图,可以看到请求的url中已经不再携带‘where’:
标签:autocasts,color,definitionExpression,JavaScript,FeatureLayer,value,new,where From: https://www.cnblogs.com/youzi-xuchongyou/p/16615838.html