今年的公需课在哪个网站做报告格式

今年的公需课在哪个网站做,报告格式,做的网站怎么打开是白板,石家庄seo外包服务get 是 Mapbox GL JS 表达式系统中最基础、最常用的核心表达式之一#xff0c;其核心作用是安全地获取属性值——既可以从地图要素#xff08;Feature#xff09;的 properties 字段取值#xff0c;也可以从自定义对象取值#xff1b;若目标属性不存在#xff0c;会返回 …get是 Mapbox GL JS 表达式系统中最基础、最常用的核心表达式之一其核心作用是安全地获取属性值——既可以从地图要素Feature的properties字段取值也可以从自定义对象取值若目标属性不存在会返回null避免样式崩溃。本文将从语法、基础用法、进阶场景到完整实战带你彻底掌握get表达式。一、前置准备1.1 环境依赖首先需要引入 Mapbox GL JS 的 CDN 资源并获取你的 Mapbox Access Token从 Mapbox 官网 免费申请。1.2 基础地图模板创建最简化的 Mapbox 地图页面后续所有示例都基于此模板扩展!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8titleMapbox get 表达式教程/titlemetanameviewportcontentwidthdevice-width, initial-scale1.0!-- 引入 Mapbox GL JS 核心资源 --scriptsrchttps://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;}/style/headbodydividmap/divscript// 替换为你的 Mapbox Access Tokenmapboxgl.accessTokenYOUR_MAPBOX_TOKEN;// 初始化地图constmapnewmapboxgl.Map({container:map,style:mapbox://styles/mapbox/light-v11,// 浅色基础样式center:[116.4074,39.9042],// 北京经纬度zoom:11// 初始缩放级别});/script/body/html二、get表达式语法详解get有两种核心语法格式覆盖「要素属性取值」和「自定义对象取值」两大场景2.1 语法1从当前要素的properties取值格式[get, 属性名]作用获取当前渲染要素的properties中指定名称的属性值。示例[get,name]// 获取要素 properties 中的 name 字段值[get,population]// 获取要素 properties 中的 population 字段值2.2 语法2从自定义对象取值格式[get, 属性名, 目标对象]作用从指定的自定义对象中获取属性值非要素属性。示例// 从颜色映射对象中获取「地标」对应的颜色值[get,地标,{地标:#ff6b6b,商圈:#4ecdc4,景区:#feca57}]// 返回结果#ff6b6b核心特性安全兜底若属性不存在返回null而非报错类型兼容支持字符串、数字、布尔值等所有基础数据类型可嵌套可作为其他表达式的子表达式如结合case/match。三、基础用法获取要素属性实现动态样式3.1 场景1文本标签——显示要素名称加载自定义 GeoJSON 数据源包含北京3个POI通过get获取name属性作为地图文本标签// 地图加载完成后执行map.on(load,(){// 1. 添加自定义 GeoJSON 数据源map.addSource(beijing-poi,{type:geojson,data:{type:FeatureCollection,features:[{type:Feature,geometry:{type:Point,coordinates:[116.4074,39.9042]},// 天安门properties:{name:天安门,type:地标,population:0}},{type:Feature,geometry:{type:Point,coordinates:[116.4187,39.9175]},// 王府井properties:{name:王府井,type:商圈,population:50000}},{type:Feature,geometry:{type:Point,coordinates:[116.3972,39.9299]},// 什刹海properties:{name:什刹海,type:景区,population:30000}}]}});// 2. 添加点图层可视化POI位置map.addLayer({id:poi-point,type:circle,source:beijing-poi,paint:{circle-radius:8,circle-color:#3887be}});// 3. 添加文本图层用 get 获取 name 作为标签map.addLayer({id:poi-label,type:symbol,source:beijing-poi,layout:{text-field:[get,name],// 核心获取要素名称text-font:[Microsoft YaHei,Arial Unicode MS Bold],// 适配中文字体text-size:12,text-offset:[0,0.8]// 文本在点下方},paint:{text-color:#333}});});3.2 场景2视觉样式——根据数值属性动态调整大小修改上述poi-point图层的circle-radius通过get获取population人口/人流作为圆的半径paint:{circle-radius:[get,population],// 人流数决定圆大小circle-color:#3887be,circle-opacity:0.8}注天安门的population为 0圆会消失后续进阶用法会解决此问题。四、进阶用法结合其他表达式增强能力4.1 场景1条件分档——结合case实现多规则样式通过case表达式对population分档同时根据type区分颜色解决「值为0时圆消失」的问题paint:{circle-radius:[case,// 条件表达式满足条件返回对应值否则返回默认值[,[get,population],40000],20,// 人流4万 → 半径20[,[get,population],20000],15,// 人流2万 → 半径158// 其他情况含0→ 半径8],circle-color:[case,[,[get,type],地标],#ff6b6b,// 地标 → 红色[,[get,type],商圈],#4ecdc4,// 商圈 → 青色[,[get,type],景区],#feca57,// 景区 → 黄色#3887be// 默认颜色],circle-opacity:0.8}4.2 场景2映射取值——从自定义对象中动态取颜色定义颜色映射表通过嵌套get实现「要素类型 → 颜色」的动态映射// 定义类型-颜色映射表consttypeColorMap{地标:#ff6b6b,商圈:#4ecdc4,景区:#feca57};// 修改 circle-color 配置circle-color:[get,// 从 typeColorMap 中取值[get,type],// 先获取要素的 type 值如「地标」typeColorMap// 再从映射表中取对应颜色]4.3 场景3嵌套属性——获取多层级属性值若要素属性是嵌套对象如address: {city: 北京, district: 东城区}需嵌套get取值不能直接用address.district// 给要素添加嵌套属性features:[{type:Feature,geometry:{type:Point,coordinates:[116.4074,39.9042]},properties:{name:天安门,type:地标,population:0,address:{city:北京,district:东城区}// 嵌套属性}}]// 文本标签拼接「名称 行政区」text-field:[concat,// 文本拼接表达式[get,name], (,[get,district,[get,address]],// 嵌套 get先取 address再取 district)]// 最终显示天安门 (东城区)五、完整实战案例整合所有进阶用法实现「动态大小 分类颜色 嵌套属性标签」的完整效果!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8titleMapbox get 表达式实战/titlemetanameviewportcontentwidthdevice-width, initial-scale1.0scriptsrchttps://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;}/style/headbodydividmap/divscriptmapboxgl.accessTokenYOUR_MAPBOX_TOKEN;constmapnewmapboxgl.Map({container:map,style:mapbox://styles/mapbox/light-v11,center:[116.4074,39.9042],zoom:11});// 类型-颜色映射表consttypeColorMap{地标:#ff6b6b,商圈:#4ecdc4,景区:#feca57};map.on(load,(){// 添加POI数据源map.addSource(beijing-poi,{type:geojson,data:{type:FeatureCollection,features:[{type:Feature,geometry:{type:Point,coordinates:[116.4074,39.9042]},properties:{name:天安门,type:地标,population:0,address:{city:北京,district:东城区}}},{type:Feature,geometry:{type:Point,coordinates:[116.4187,39.9175]},properties:{name:王府井,type:商圈,population:50000,address:{city:北京,district:东城区}}},{type:Feature,geometry:{type:Point,coordinates:[116.3972,39.9299]},properties:{name:什刹海,type:景区,population:30000,address:{city:北京,district:西城区}}}]}});// 点图层动态大小 分类颜色map.addLayer({id:poi-point,type:circle,source:beijing-poi,paint:{circle-radius:[case,[,[get,population],40000],20,[,[get,population],20000],15,8],circle-color:[get,[get,type],typeColorMap],circle-opacity:0.8}});// 文本图层名称 行政区map.addLayer({id:poi-label,type:symbol,source:beijing-poi,layout:{text-field:[concat,[get,name], (,[get,district,[get,address]],)],text-font:[Microsoft YaHei,Arial Unicode MS Bold],text-size:12,text-offset:[0,0.8]},paint:{text-color:#333}});});/script/body/html六、注意事项属性名大小写敏感[get, Name]和[get, name]是两个不同的属性若要素中是小写name用大写会返回null缺失属性兜底可用default表达式处理null值例如[default,[get,population],10]// 若 population 缺失返回 10嵌套属性限制不能直接用[get, address.district]必须嵌套get性能优化get本身轻量但大量嵌套或结合复杂表达式时建议简化逻辑如提前定义映射表避免性能损耗。七、总结get是 Mapbox 动态样式的「基石」几乎所有基于属性的可视化需求如分类着色、数值映射、文本标签都离不开它。掌握get的基础语法并结合case/match/concat/default等表达式就能实现从简单到复杂的地图样式定制。