flash网站与html5合肥做网站的

flash网站与html5,合肥做网站的,在税局网站上如何做进项税转出,网站维护更新费用in 是 Mapbox GL JS 表达式系统中高频使用的包含关系判断工具#xff0c;核心作用是#xff1a;判断一个值是否存在于数组中#xff08;数组包含#xff09;#xff0c;或一个子字符串是否存在于目标字符串中#xff08;字符串包含#xff09;。相比 多条件组合#x…in是 Mapbox GL JS 表达式系统中高频使用的包含关系判断工具核心作用是判断一个值是否存在于数组中数组包含或一个子字符串是否存在于目标字符串中字符串包含。相比多条件组合如any 多个 in能大幅简化代码同时需注意字符串字面量的literal包裹规则避免类型解析错误。本文将从核心概念、语法、实战场景、进阶用法到常见误区全面讲解in表达式的使用。一、in表达式核心概念1.1 核心定义in表达式支持两种核心判断场景返回值均为布尔值true/false数组包含判断第一个参数关键词是否是第二个参数数组的元素支持布尔值、字符串、数字类型需类型完全匹配字符串包含判断第一个参数子字符串是否是第二个参数目标字符串的子串区分大小写、重音需注意字面量包裹规则。1.2 语法格式官方定义的语法简洁需严格区分参数类型// 场景1数组包含input 为数组[in,keyword:InputType,input:arrayInputType]:boolean// 场景2字符串包含input 为字符串[in,keyword:string,input:string]:boolean关键说明InputType支持布尔值true/false、字符串string、数字number关键词与数组元素/目标字符串类型必须一致字面量包裹规则当第二个参数input和第三个参数实际应为第二个参数语法中 input 是第二个参数均为字符串字面量时至少一个需用[literal, 值]包裹避免 Mapbox 类型系统误解为其他逻辑短路求值数组包含判断中找到匹配元素后立即终止遍历字符串包含判断基于底层字符串查找逻辑效率高于手动遍历。1.3 与any 的对比数组包含场景中in是any 多个 的简化版两者逻辑等价但in更简洁高效// 冗余写法any 多个 [any,[,[get,type],restaurant],[,[get,type],coffee]]// 简洁写法in 数组[in,[get,type],[literal,[restaurant,coffee]]]二、前置准备所有示例需先初始化 Mapbox 地图替换为自己的 Access Token从 Mapbox 官网 注册获取!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8titleMapbox in 表达式示例/titlescriptsrchttps://api.mapbox.com/mapbox-gl-js/v3.4.0/mapbox-gl.js/scriptlinkhrefhttps://api.mapbox.com/mapbox-gl-js/v3.4.0/mapbox-gl.cssrelstylesheetstylebody{margin:0;padding:0;}#map{width:100vw;height:100vh;}.controls{position:absolute;top:20px;left:20px;background:#fff;padding:12px;border-radius:8px;box-shadow:0 2px 8pxrgba(0,0,0,0.1);}button{margin:5px;padding:6px 12px;cursor:pointer;}/style/headbodydividmap/divdivclasscontrolsbuttonidfilterType筛选餐饮类数组包含/buttonbuttonidfilterName筛选名称含北京字符串包含/buttonbuttonidreset重置/button/divscriptmapboxgl.accessToken你的 Mapbox Access Token;// 替换为自己的 Tokenconstmapnewmapboxgl.Map({container:map,style:mapbox://styles/mapbox/streets-v12,center:[116.4074,39.9042],// 北京坐标zoom:14});/script/body/html三、基础使用场景3.1 场景1数组包含——批量筛选要素类型in最常用的场景是批量判断要素属性是否属于目标集合如筛选餐饮类 POI、特定行政区划等替代冗余的any 多个 。示例筛选类型为restaurant餐厅、coffee咖啡、grocery便利店的 POImap.on(load,(){// 模拟多类型 POI 数据constpoiData{type:FeatureCollection,features:[{type:Feature,geometry:{type:Point,coordinates:[116.4074,39.9042]},properties:{type:restaurant,name:北京饭店}},{type:Feature,geometry:{type:Point,coordinates:[116.4084,39.9052]},properties:{type:coffee,name:星巴克}},{type:Feature,geometry:{type:Point,coordinates:[116.4094,39.9062]},properties:{type:grocery,name:7-11}},{type:Feature,geometry:{type:Point,coordinates:[116.4104,39.9072]},properties:{type:park,name:城市公园}},{type:Feature,geometry:{type:Point,coordinates:[116.4114,39.9082]},properties:{type:hotel,name:快捷酒店}}]};// 添加数据源map.addSource(poi-source,{type:geojson,data:poiData});// 添加图层默认显示所有 POImap.addLayer({id:poi-layer,type:circle,source:poi-source,paint:{circle-radius:8,circle-color:#999// 灰色默认样式},filter:[all]});// 按钮1数组包含判断——筛选餐饮类 POIdocument.getElementById(filterType).onclick(){map.setFilter(poi-layer,[in,// 核心表达式判断 type 是否在数组中[get,type],// 关键词要素的 type 属性[literal,[restaurant,coffee,grocery]]// 目标数组必须用 literal 包裹]);// 高亮筛选结果map.setPaintProperty(poi-layer,circle-color,#ff6347);map.setPaintProperty(poi-layer,circle-radius,12);};});关键说明目标数组[restaurant, coffee, grocery]必须用[literal, ...]包裹因为它是字符串字面量数组避免 Mapbox 误解析若要素type属于数组中的任意一个值即返回true实现批量筛选比any 三个 简洁得多。3.2 场景2字符串包含——关键词筛选要素名称in可判断要素属性字符串中是否包含目标子串如筛选名称含“北京”“公园”的要素适用于关键词搜索场景。示例筛选名称中包含“北京”或“公园”的要素// 延续上述示例添加按钮2的逻辑document.getElementById(filterName).onclick(){map.setFilter(poi-layer,[any,// 多个字符串包含判断满足其一即可[in,北京,// 子字符串关键词[get,name]// 目标字符串要素的 name 属性],[in,公园,// 子字符串关键词[get,name]// 目标字符串]]);// 高亮筛选结果map.setPaintProperty(poi-layer,circle-color,#4169e1);map.setPaintProperty(poi-layer,circle-radius,12);};// 重置按钮逻辑document.getElementById(reset).onclick(){map.setFilter(poi-layer,[all]);map.setPaintProperty(poi-layer,circle-color,#999);map.setPaintProperty(poi-layer,circle-radius,8);};关键说明此处无需用literal包裹因为目标字符串是[get, name]动态属性值而非字符串字面量字符串包含判断区分大小写和重音如“北京”≠“beijing”“café”≠“cafe”如需忽略需结合collator表达式见进阶用法。四、进阶用法4.1 进阶1字符串包含 Collator 忽略大小写/重音默认字符串包含判断是严格匹配结合collator可实现本地化适配如忽略大小写、重音需将关键词或目标字符串用[to-string, ...]转换后配合使用。示例忽略大小写筛选名称含“beijing”的要素匹配“北京饭店”“Beijing Hotel”map.on(load,(){// 模拟含大小写的名称数据constnameData{type:FeatureCollection,features:[{type:Feature,geometry:{type:Point,coordinates:[116.4074,39.9042]},properties:{name:北京饭店}},{type:Feature,geometry:{type:Point,coordinates:[116.4084,39.9052]},properties:{name:Beijing Hotel}},{type:Feature,geometry:{type:Point,coordinates:[116.4094,39.9062]},properties:{name:上海大厦}}]};map.addSource(name-source,{type:geojson,data:nameData});map.addLayer({id:name-layer,type:circle,source:name-source,paint:{circle-radius:10,circle-color:#999},filter:[all]});// 忽略大小写筛选map.setFilter(name-layer,[in,[to-string,[literal,beijing]],// 关键词转字符串[to-string,[get,name]],// 目标字符串转字符串{locale:en-US,case-sensitive:false}// 忽略大小写]);map.setPaintProperty(name-layer,circle-color,#32cd32);});4.2 进阶2incase实现多条件样式控制结合case表达式可根据要素属性是否属于不同数组/包含不同子串动态设置样式。示例餐饮类 POI 用红色公园类用绿色名称含“酒店”的用蓝色map.addLayer({id:style-layer,type:circle,source:poi-source,paint:{circle-radius:10,circle-color:[case,// 条件1餐饮类in 数组判断[in,[get,type],[literal,[restaurant,coffee,grocery]]],#ff6347,// 条件2公园类in 数组判断[in,[get,type],[literal,[park,greenbelt]]],#32cd32,// 条件3名称含“酒店”in 字符串判断[in,酒店,[get,name]],#4169e1,// 默认颜色#999]}});4.3 进阶3动态数组/字符串判断结合用户输入in支持动态参数可结合用户输入如搜索框关键词生成目标数组/子串实现交互性筛选。示例用户输入关键词后筛选名称包含关键词的 POI!-- 添加搜索框到 controls 中 --divclasscontrolsinputtypetextidsearchInputplaceholder输入名称关键词buttonidsearchBtn搜索/button/divscript// 搜索按钮逻辑document.getElementById(searchBtn).onclick(){constkeyworddocument.getElementById(searchInput).value.trim();if(!keyword)return;map.setFilter(poi-layer,[in,keyword,// 动态关键词用户输入[get,name]]);map.setPaintProperty(poi-layer,circle-color,#ff4500);};/script五、常见误区与注意事项5.1 字符串字面量未用literal包裹致命错误当第二个和第三个参数均为字符串字面量时必须至少一个用[literal, ...]包裹否则 Mapbox 类型系统会误解导致解析错误// 错误两个均为字符串字面量未用 literal 包裹[in,a,ab]// 正确至少一个用 literal 包裹[in,[literal,a],ab][in,a,[literal,ab]][in,[literal,a],[literal,ab]]5.2 数组元素类型与关键词类型不匹配in是严格类型判断数组元素类型与关键词类型必须一致否则返回false// 错误关键词是数字 123数组元素是字符串 123[in,123,[literal,[123,456]]]// 正确类型一致均为数字或均为字符串[in,123,[literal,[123,456]]][in,[to-string,123],[literal,[123,456]]]// 数字转字符串5.3 混淆数组包含与字符串包含的参数顺序in的参数顺序是「关键词在前目标在后」与 JavaScript 的Array.includes()一致但与字符串String.includes()相反需注意// Mapbox in关键词子串在前目标数组/字符串在后[in,a,[literal,[a,b]]]// 数组包含正确[in,a,[literal,ab]]// 字符串包含正确// 错误参数顺序颠倒返回 false[in,[literal,[a,b]],a]5.4 空数组/空字符串的判断结果空数组[in, 任意值, [literal, []]]始终返回false空字符串[in, 任意非空字符串, [literal, ]]始终返回false[in, , [literal, ab]]返回true空字符串是任何字符串的子串。5.5 用in替代any 多个 时的性能优势当需要判断一个属性是否属于多个固定值时in的性能远高于any 多个 尤其是数组元素较多时如 10 个以上因为in是单次遍历判断而any需多次表达式求值。六、完整实战示例多场景包含判断交互整合数组包含、字符串包含、动态搜索功能实现“餐饮类筛选 名称关键词搜索 忽略大小写匹配”的完整交互!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8titleMapbox in 表达式完整实战/titlescriptsrchttps://api.mapbox.com/mapbox-gl-js/v3.4.0/mapbox-gl.js/scriptlinkhrefhttps://api.mapbox.com/mapbox-gl-js/v3.4.0/mapbox-gl.cssrelstylesheetstylebody{margin:0;padding:0;}#map{width:100vw;height:100vh;}.controls{position:absolute;top:20px;left:20px;background:#fff;padding:15px;border-radius:8px;box-shadow:0 2px 10pxrgba(0,0,0,0.1);}h4{margin:0 0 10px 0;}input{margin:5px 0;padding:6px;width:200px;}button{margin:5px;padding:6px 12px;cursor:pointer;}/style/headbodydividmap/divdivclasscontrolsh4POI 筛选工具/h4inputtypetextidsearchInputplaceholder输入名称关键词支持忽略大小写buttonidsearchBtn关键词搜索/buttonbrbuttonidfilterFood筛选餐饮类餐厅/咖啡/便利店/buttonbuttonidfilterPark筛选公园类公园/绿地/buttonbrbuttonidreset重置/button/divscriptmapboxgl.accessToken你的 Mapbox Access Token;constmapnewmapboxgl.Map({container:map,style:mapbox://styles/mapbox/streets-v12,center:[116.4074,39.9042],zoom:14});map.on(load,(){// 1. 模拟综合 POI 数据constpoiData{type:FeatureCollection,features:[{type:Feature,geometry:{type:Point,coordinates:[116.4074,39.9042]},properties:{type:restaurant,name:北京饭店}},{type:Feature,geometry:{type:Point,coordinates:[116.4080,39.9050]},properties:{type:coffee,name:Starbucks 星巴克}},{type:Feature,geometry:{type:Point,coordinates:[116.4090,39.9060]},properties:{type:grocery,name:7-11 便利店}},{type:Feature,geometry:{type:Point,coordinates:[116.4100,39.9070]},properties:{type:park,name:城市公园}},{type:Feature,geometry:{type:Point,coordinates:[116.4110,39.9080]},properties:{type:greenbelt,name:街边绿地}},{type:Feature,geometry:{type:Point,coordinates:[116.4120,39.9090]},properties:{type:hotel,name:Beijing 快捷酒店}}]};// 2. 添加数据源map.addSource(poi-source,{type:geojson,data:poiData});// 3. 添加图层动态样式map.addLayer({id:poi-layer,type:circle,source:poi-source,paint:{circle-radius:10,circle-color:#999,circle-stroke-width:2,circle-stroke-color:#fff},filter:[all]});// 4. 关键词搜索忽略大小写document.getElementById(searchBtn).onclick(){constkeyworddocument.getElementById(searchInput).value.trim().toLowerCase();if(!keyword)return;map.setFilter(poi-layer,[in,[to-string,[literal,keyword]],[to-string,[get,name]],{locale:en-US,case-sensitive:false}]);map.setPaintProperty(poi-layer,circle-color,#ff4500);};// 5. 筛选餐饮类数组包含document.getElementById(filterFood).onclick(){map.setFilter(poi-layer,[in,[get,type],[literal,[restaurant,coffee,grocery]]]);map.setPaintProperty(poi-layer,circle-color,#ff6347);};// 6. 筛选公园类数组包含document.getElementById(filterPark).onclick(){map.setFilter(poi-layer,[in,[get,type],[literal,[park,greenbelt]]]);map.setPaintProperty(poi-layer,circle-color,#32cd32);};// 7. 重置document.getElementById(reset).onclick(){map.setFilter(poi-layer,[all]);map.setPaintProperty(poi-layer,circle-color,#999);document.getElementById(searchInput).value;};});/script/body/html七、总结in表达式是 Mapbox 实现批量筛选、关键词搜索的核心工具核心价值体现在简洁性替代any 多个 大幅简化数组包含判断代码高效性底层优化的查找逻辑性能优于手动遍历判断多功能性同时支持数组包含和字符串包含覆盖多场景需求扩展性可结合collator/case/动态参数实现本地化适配、样式控制、交互搜索。使用时需重点注意字符串字面量数组必须用[literal, ...]包裹避免解析错误关键词与目标数组/字符串的类型必须一致否则返回false字符串包含默认区分大小写/重音需忽略时结合collator表达式动态场景如用户输入中直接传入变量作为关键词/目标无需literal包裹。掌握in表达式后可大幅提升 Mapbox 地图的筛选效率和交互体验尤其适合 POI 分类筛选、关键词搜索等高频场景。结合之前学习的/all/any表达式可实现更复杂的复合逻辑如[all, [in, A, B], [any, C, D]]。