网站建设 概念股,推广网站哪个好,用网站做淘宝客怎么样,可以做行程的网站Mapbox致力于打造全球最漂亮的个性化地图。 中文官网经常打不开所以做下记录#xff0c;方便查阅。 Web 端 API Mapbox GL JS 的地图样式规范 Style 的各个配置项#xff1a; #xff08;必填项会加上 * #xff0c;方便根据目录进行查看#xff09; 配置项#xff1a;1.…Mapbox致力于打造全球最漂亮的个性化地图。 中文官网经常打不开所以做下记录方便查阅。 Web 端 API Mapbox GL JS 的地图样式规范 Style 的各个配置项 必填项会加上 * 方便根据目录进行查看 配置项1. version *2. name3. metadata4. center5. zoom6. bearing7. pitch8. sprite9. glyphs10. transition11. light12. sources *(1) vector(2) raster(3) raster-dem(4) geojson(5) image(6) video13. layers *(1) fill(2) line(3) circle(4) symbol(5) background(6) raster(7) heatmap(8) hillshade(9) fill-extrusion14. Expressions(1) Data expressions(2) Camera expressions15. Expression reference(1) Types(2) Feature data(3) Lookup(4) Decision(5) Ramps, scales, curves(6) Variable binding(7) String(8) Color(9) Math(10) Zoom(11) Heatmap16. Functions(1) Zoom functions(2) Property functions(3) Zoom-and-property functions1. version *
version版本号必填且值必须为 8
version: 82. name
name名称可选用于给 style 取名方便阅读
name: demo3. metadata
metadata元数据可选用于给 style 附加一些任意属性。为避免冲突为避免冲突建议添加前缀如 mapbox:
metadata: {mapbox:name:demo
}4. center
center地图的默认中心点可选由 经度 和 纬度 构成
center: [106.66339, 30.42628]5. zoom
zoom地图的默认缩放层级可选值越大越靠近地表。mapbox 采用的是无极缩放范围一般为 0 ~ 24
zoom: 86. bearing
bearing地图的默认方位角可选表示 地图视口正上方中心点 在地图上 北偏东 的角度。默认值为 0
bearing: 07. pitch
pitch地图的默认倾斜角度可选默认值为 0范围为 0 ~ 60
pitch: 08. sprite
sprite雪碧图可选用来指定获取雪碧图及其元数据的 URL
sprite 的音译是 雪碧直译是 精灵表示不受地图旋转缩放影响的图标等类似精灵漂浮在空中。
当有 layer 使用了 background-pattern、fill-pattern、line-pattern、fill-extrusion-pattern、icon-image 等属性时sprite 必填。
sprite: mapbox://sprites/mapbox/bright-v8当指定了 sprite 后mapbox 会自动生成雪碧图的完整请求地址分别如下
${sprite}.png
${sprite}.json如果浏览器进行了缩放则会加上缩放 DPI 因子 2x如下
${sprite}2x.png
${sprite}2x.json9. glyphs
glyphs字形符号可选用来指定加载以 PBF 格式设置的 有向距离场 字形的 URL 模板
URL 模板必须带有占位符 {fontstack} 和 {range}。
当有 layer 使用了 text-field 属性时glyphs 必填。
glyphs: mapbox://fonts/mapbox/{fontstack}/{range}.pbf10. transition
transition全局的过渡动画属性可选用来作为所有过渡动画属性的默认值
transition: {duration: 300, // 过渡的持续时间可选单位毫秒默认值为 300delay: 0 // 延迟多久开始过渡可选单位毫秒默认值为 0
}11. light
light全局的光源可选
light: {anchor: viewport, // 锚点指定作用的目标可选可选值 map、viewport默认值为 viewportposition: [1.15,210,30], // 位置可选默认值为 [1.15,210,30]color: white, // 颜色可选默认值为 #ffffffintensity: 0.5 // 强度可选取值范围为 0 ~ 1默认值为 0.5
}12. sources *
sources数据源集合必填用于包含一系列数据源 source这些数据源提供了在地图上显示的数据
sources 是对象 {} 的形式其属性名就是 数据源的名称或者说 数据源的 id这样可以根据 数据源的名称或者说 数据源的 id快速获取数据源的信息。
sources: {}每个数据源 source 都有一个 type 属性用于指定其具体的类型
vector矢量raster栅格raster-dem栅格化的数字高程模型geojsonGeoJSON 数据源image图片video视频
(1) vector
vector矢量切片数据源
sources:{vector-source: {type: vector, // 类型必填url: mapbox://mapbox.mapbox-streets-v6 // TileJSON 的请求地址可选tiles: [ // 用于指定一个或多个切片数据源的请求地址可选和 TileJSON 中的 tiles 属性一致http://a.example.com/tiles/{z}/{x}/{y}.pbf,http://b.example.com/tiles/{z}/{x}/{y}.pbf],bounds: [-180,-85.051129,180,85.051129], // 边界坐标点可选用于限定切片的显示范围默认值为 [-180,-85.051129,180,85.051129]scheme:xyz, // 切片坐标系方案可选可选值为 xyz、tms默认值为 xyzminzoom: 0, // 最小层级可选默认值为 0maxzoom: 22, // 最大层级可选默认值为 22attribution: // 属性信息可选用于地图展示时给用户看的一些信息}
}(2) raster
raster栅格切片数据源相比 vector 多了一个属性 tileSize
sources:{raster-source: {type: raster, // 类型必填url: mapbox://mapbox.satellite // TileJSON 的请求地址可选tiles: [ // 用于指定一个或多个切片数据源的请求地址可选和 TileJSON 中的 tiles 属性一致http://a.example.com/tiles/{z}/{x}/{y}.pbf,http://b.example.com/tiles/{z}/{x}/{y}.pbf],bounds: [-180,-85.051129,180,85.051129], // 边界坐标点可选用于限定切片的显示范围默认值为 [-180,-85.051129,180,85.051129]scheme:xyz, // 切片坐标系方案可选可选值为 xyz、tms默认值为 xyzminzoom: 0, // 最小层级可选默认值为 0maxzoom: 22, // 最大层级可选默认值为 22attribution: , // 属性信息可选用于地图展示时给用户看的一些信息tileSize: 256 // 切片的最小展示尺寸可选单位像素默认值为 512即 1024/2}
}(3) raster-dem
raster-dem栅格化的数字高程模型相比 raster 多了一个属性 encoding
sources:{raster-dem-source: {type: raster-dem, // 类型必填url: mapbox://mapbox.terrain-rgb // TileJSON 的请求地址可选tiles: [ // 用于指定一个或多个切片数据源的请求地址可选和 TileJSON 中的 tiles 属性一致http://a.example.com/tiles/{z}/{x}/{y}.pbf,http://b.example.com/tiles/{z}/{x}/{y}.pbf],bounds: [-180,-85.051129,180,85.051129], // 边界坐标点可选用于限定切片的显示范围默认值为 [-180,-85.051129,180,85.051129]scheme:xyz, // 切片坐标系方案可选可选值为 xyz、tms默认值为 xyzminzoom: 0, // 最小层级可选默认值为 0maxzoom: 22, // 最大层级可选默认值为 22attribution: , // 属性信息可选用于地图展示时给用户看的一些信息tileSize: 256, // 切片的最小展示尺寸可选单位像素默认值为 512即 1024/2encoding: mapbox // 编码可选可选值为 terrarium、mapbox默认值为 mapbox}
}(4) geojson
geojsonGeoJSON 数据源数据必须通过 data 属性指定data 属性值就是一个 GeoJSON 或者 GeoJSON 的请求地址
sources: {geojson-source: {type: geojson, // 类型必填data: { // 数据可选值必须为一个 GeoJSON 或者 GeoJSON 的请求地址type: Feature,geometry: {type: Point,coordinates: [-77.0323, 38.9131]},properties: {title: Mapbox DC,marker-symbol: monument}},// data: ./lines.geojson,maxzoom: 22, // 最大层级可选默认值为 22attribution: , // 属性信息可选用于地图展示时给用户看的一些信息buffer: 128, // 切片缓存区大小可选取值范围为 0 ~ 512默认值为 128如果取值为 512 则代表和切片大小一样tolerance: 0.375, // 简化力度可选值越大简化力度越强几何顶点越少加载速度越快默认值为 0.375cluster: false, // 是否开启聚类可选用于将多个点聚类到一个个的群组默认值为 falseclusterRadius: 50, // 每个群组的的半径可选默认值为 50clusterMaxZoom: 12, // 每个群组的最大层级大于指定的层级将不显示聚类的群组lineMetrics: false, // 是否计算线的距离度量额有点不能理解需要 layer 指定 line-gradientgenerateId: false // 是否自动生成每个要素生成属性 id 的值}
}(5) image
image图片数据源
sources: {image-source: {type: image, // 类型必填url: https://docs.mapbox.com/mapbox-gl-js/assets/radar.gif, // 图片的请求地址必填coordinates: [ // 坐标点集合必填指定要显示图片的坐标点[-80.425, 46.437],[-71.516, 46.437],[-71.516, 37.936],[-80.425, 37.936]]}
}(6) video
video视频数据源
sources: {video-source: {type: image, // 类型必填urls: [ // 一个或多个视频的请求地址必填指定多个是为了支持多种视频格式按优先顺序排序https://static-assets.mapbox.com/mapbox-gl-js/drone.mp4,https://static-assets.mapbox.com/mapbox-gl-js/drone.webm], coordinates: [ // 坐标点集合必填指定要显示视频的坐标点[-80.425, 46.437],[-71.516, 46.437],[-71.516, 37.936],[-80.425, 37.936]]}
}13. layers *
layers图层集合必填包含了一系列图层 layer这些图层指定了如何渲染数据源提供的数据
layers: []每个图层 layer 都有 id具有唯一性和 type 属性其中 type 属性指定了其具体的渲染类型
fill填充line线circle圆点symbol符号background背景raster栅格heatmap热力图hillshade坡面阴影fill-extrusion三维填充
(1) fill
fill填充用于给多边形 polygon 进行填充和描边
layers: [{id: fill-id, // 唯一 id 必填type: fill, // 类型必填metadata: { // 元数据可选用于为 layer 附加任意的属性。为避免冲突建议添加前缀如 mapbox:mapbox:name: test},source: source-name, // 数据源的名称除了 layer 的 type 为 background 外source 必填 source-layer: source-layer-name, // 数据源的图层只有数据源 source 的 type 为 vector 时才能设置 source-layer其他类型的不可以设置minzoom: 0, // 最小层级可选取值范围为 0 ~ 24。当 style 的 zoom 小于此 minzoom 时layer 将被隐藏maxzoom: 24, // 最大层级可选取值范围为 0 ~ 24。当 style 的 zoom 大于此 maxzoom 时layer 将被隐藏filter: [], // 过滤可选用特定的表达式过滤指定的数据源的要素。具体的表达式详见 expressionlayout: { // 布局类属性visibility: visible, // 可见性可选可选值为 none、visible默认值为 visible},paint: { // 绘制类属性fill-antialias: true, // 填充时是否反锯齿可选默认值为 truefill-opacity: 1, // 填充的不透明度可选取值范围为 0 ~ 1默认值为 1fill-pattern: , // 填充用的图案可选这里填写在 sprite 雪碧图中图标名称。为了图案能无缝填充图标的高宽需要是 2 的倍数fill-color: #000000, // 填充的颜色可选默认值为 #000000。如果设置了 fill-pattern则 fill-color 将无效fill-outline-color: #000000, // 描边的颜色可选默认和 fill-color 一致。如果设置了 fill-pattern则 fill-outline-color 将无效。为了使用此属性还需要设置 fill-antialias 为 truefill-translate: [0, 0], // 填充的平移可选通过平移 [x, y] 达到一定的偏移量。默认值为 [0, 0]单位像素。fill-translate-anchor: map // 平移的锚点即相对的参考物可选可选值为 map、viewport默认为 map}}
](2) line
line线用于绘制成一条条线
layers: [{id: line-id, // 唯一 id 必填type: line, // 类型必填metadata: { // 元数据可选用于为 layer 附加任意的属性。为避免冲突建议添加前缀如 mapbox:mapbox:name: test},source: source-name, // 数据源的名称除了 layer 的 type 为 background 外source 必填 source-layer: source-layer-name, // 数据源的图层只有数据源 source 的 type 为 vector 时才能设置 source-layer其他类型的不可以设置minzoom: 0, // 最小层级可选取值范围为 0 ~ 24。当 style 的 zoom 小于此 minzoom 时layer 将被隐藏maxzoom: 24, // 最大层级可选取值范围为 0 ~ 24。当 style 的 zoom 大于此 maxzoom 时layer 将被隐藏filter: [], // 过滤可选用特定的表达式过滤指定的数据源的要素。具体的表达式详见 expressionlayout: { // 布局类属性visibility: visible, // 可见性可选可选值为 none、visible默认值为 visibleline-cap: butt, // 线末端的显示样式可选可选值为 butt、round、square默认值为 butt// --- butt方型末端仅绘制到线的端点// --- round圆型末端以线宽的 1/2 为半径以线的端点为圆心绘制圆型端点会超出线的端点// --- square方型末端以线宽的 1/2 长度超出线的端点line-join: miter, // 线交叉时的显示样式可选可选值为 bevel、round、miter默认值为 miter// --- bevel方型交点以线宽的 1/2 长度超出线的交点// --- round圆型交点以线宽的 1/2 为半径以线的交点为圆心绘制圆型交点会超出线的交点// --- miter尖型交点以两线段的外沿相交超出交点绘制line-miter-limit: 2, // 最大斜接长度可选用来将 miter 尖型交点自动转为 bevel 方型交点默认值为 2。只有 line-join 为 miter 时才需要设置此属性line-round-limit: 1.05, // 最小圆角半径可选用来将 round 圆型交点自动转为 miter 尖型交点默认值为 1.05。只有 line-join 为 round 时才需要设置此属性},paint: { // 绘制类属性line-opacity: 1, // 线的不透明度可选取值范围为 0 ~ 1默认值为 1line-pattern: , // 线用的图案可选这里填写在 sprite 雪碧图中图标名称。为了图案能无缝填充图标的高宽需要是 2 的倍数line-color: #000000, // 线的颜色可选默认值为 #000000。如果设置了 line-pattern则 line-color 将无效line-translate: [0, 0], // 线的平移可选通过平移 [x, y] 达到一定的偏移量。默认值为 [0, 0]单位像素。line-translate-anchor: map, // 线的平移锚点即相对的参考物可选可选值为 map、viewport默认为 mapline-width: 1, // 线的宽度可选值 0默认值为 1单位像素line-gap-width: 0, // 线的外部间距宽度可选值 0默认值为 0单位像素。用来在线的外部再绘制一部分此值表示内间距line-offset: 0, // 线的偏移可选默认值为 0单位像素。对于单线则是向右的偏移量对于多边形正值为内缩 inset负值为外突 outsetline-blur: 0, // 线的模糊度可选值 0默认值为 0单位像素line-dasharray: [0, 0], // 虚线的破折号部分和间隔的长度可选默认值为 [0, 0]。如果设置了 line-pattern则 line-dasharray 将无效line-gradient: #000000, // 线的渐变色可选。如果设置了 line-pattern 或 line-dasharray则 line-gradient 将无效。只有数据源 source 的 type 为 geojson 且 source 的 lineMetrics 为 true 时line-gradient 才有效}}
](3) circle
circle圆点用于绘制成一个个圆点
layers: [{id: circle-id, // 唯一 id 必填type: circle, // 类型必填metadata: { // 元数据可选用于为 layer 附加任意的属性。为避免冲突建议添加前缀如 mapbox:mapbox:name: test},source: source-name, // 数据源的名称除了 layer 的 type 为 background 外source 必填 source-layer: source-layer-name, // 数据源的图层只有数据源 source 的 type 为 vector 时才能设置 source-layer其他类型的不可以设置minzoom: 0, // 最小层级可选取值范围为 0 ~ 24。当 style 的 zoom 小于此 minzoom 时layer 将被隐藏maxzoom: 24, // 最大层级可选取值范围为 0 ~ 24。当 style 的 zoom 大于此 maxzoom 时layer 将被隐藏filter: [], // 过滤可选用特定的表达式过滤指定的数据源的要素。具体的表达式详见 expressionlayout: { // 布局类属性visibility: visible, // 可见性可选可选值为 none、visible默认值为 visible},paint: { // 绘制类属性circle-opacity: 1, // 圆点的不透明度可选取值范围为 0 ~ 1默认值为 1circle-radius: 5, // 圆点的半径可选值 0默认值为 5单位像素circle-color: #000000, // 圆点的颜色可选默认值为 #000000circle-blur: 0, // 圆点的虚化可选默认值为 0。当值为 1 时表示把圆虚化到只有圆心是不透明的circle-translate: [0, 0], // 圆点的平移可选通过平移 [x, y] 达到一定的偏移量。默认值为 [0, 0]单位像素。circle-translate-anchor: map, // 圆点的平移锚点即相对的参考物可选可选值为 map、viewport默认为 mapcircle-pitch-scale: map, // 地图倾斜时圆点的缩放可选可选值为 map、viewport默认为 map。值为 viewport 时圆点不会缩放circle-pitch-alignment: map, // 地图倾斜时圆点的对齐方式可选可选值为 map、viewport默认为 mapcircle-stroke-width: 0, // 圆点的描边宽度可选值 0默认值为 0单位像素circle-stroke-color: #000000, // 圆点的描边颜色可选默认值为 #000000circle-stroke-opacity: 1 // 圆点的描边不透明度可选取值范围为 0 ~ 1默认值为 1}}
](4) symbol
symbol符号用于绘制成一个个图标或者文本标签等
layers: [{id: symbol-id, // 唯一 id 必填type: symbol, // 类型必填metadata: { // 元数据可选用于为 layer 附加任意的属性。为避免冲突建议添加前缀如 mapbox:mapbox:name: test},source: source-name, // 数据源的名称除了 layer 的 type 为 background 外source 必填 source-layer: source-layer-name, // 数据源的图层只有数据源 source 的 type 为 vector 时才能设置 source-layer其他类型的不可以设置minzoom: 0, // 最小层级可选取值范围为 0 ~ 24。当 style 的 zoom 小于此 minzoom 时layer 将被隐藏maxzoom: 24, // 最大层级可选取值范围为 0 ~ 24。当 style 的 zoom 大于此 maxzoom 时layer 将被隐藏filter: [], // 过滤可选用特定的表达式过滤指定的数据源的要素。具体的表达式详见 expressionlayout: { // 布局类属性visibility: visible, // 可见性可选可选值为 none、visible默认值为 visiblesymbol-placement: point, // 符号的位置可选可选值为 point、line、line-center默认值为 point// --- point符号在几何形状的点上// --- line符号在几何形状的线上几何形状只能为 LineString 或 Polygon// --- line-center符号在几何形状的线的中心点上几何形状只能为 LineString 或 Polygonsymbol-spacing: 250, // 符号之间的距离可选值 1默认值为 250单位像素。只有 symbol-placement 为 line 时才有效symbol-avoid-edges: false, // 是否避免边缘冲突可选默认值为 false。当为 true 时符号不会超过切片的边缘symbol-sort-key: 1, // 排序的参考值可选无默认值。值越大越在上方 symbol-z-order: auto, // z 轴上的顺序控制可选可选值为 auto、viewport-y、source默认值为 auto// 图标类属性需要设置 icon-imageicon-image: , // 图标的图片可选这里填写在 sprite 雪碧图中图标名称icon-size: 1, // 图标的大小可选值 0默认值为 1。这里实际上是图标对应的原始图片的大小的缩放比例。值为 1 表示图标大小为原始图片的大小icon-padding: 2, // 图标的外边距可选值 0默认值为 2。可用于碰撞检测icon-offset: [0, 0], // 图标的偏移量可选默认值为 [0, 0]icon-anchor: center, // 图标与锚点的位置关系可选可选值为 center、left、right、top、bottom、top-left、top-right、bottom-left、bottom-right默认值为 centericon-rotation: 0, // 图标的顺时针旋转角度可选默认值为 0单位角度icon-allow-overlap: false, // 是否允许图标重叠可选默认值为 false。当值为 true 时图标即使和其他符号触碰也会显示icon-ignore-placement: false, // 是否忽略图标位置可选默认值为 false。当值为 true 时其他符号即使与此图标触碰也会显示icon-optional: false, // 图标是否可不显示可选默认值为 false。当值为 true 时如果图标与文本标签碰撞则显示文本标签icon-text-fit: none, // 图标与文本的大小适应关系可选可选值为 none、width、height、both默认值为 none// --- none图标按其本身的比例显示// --- width图标在 x 轴上缩放以适应文本的宽度// --- height图标在 y 轴上缩放以适应文本的高度// --- both图标在 x 和 y 轴上缩放以适应文本的宽高icon-text-fit-padding: [0, 0, 0, 0], // 图标与文本的内边距可选默认值为 [0,0,0,0]单位像素icon-keep-upright: false, // 当 icon-rotation-alignment 为 map且 symbol-placement 为 line 或者 line-center 时设置为 true 的话可以避免图标上下颠倒icon-rotation-alignment: auto, // 地图旋转时图标的对齐方式可选可选值为 map、viewport、auto默认值为 auto// --- map当 symbol-placement 为 point 时图标与地图的东西方向对齐当 symbol-placement 为 line 时图标的 x 轴和线对齐// --- viewport图标的 x 轴和视口的 x 轴对齐// --- auto当 symbol-placement 为 point 时和 viewport 一致当 symbol-placement 为 line 时和 map 一致icon-pitch-alignment: auto, // 地图倾斜时图标的对齐方式可选可选值为 map、viewport、auto默认值为 auto// --- map图标的 x 轴与地图平面对齐// --- viewport图标的 x 轴和视口的 x 轴对齐// --- auto当 symbol-placement 为 point 时和 viewport 一致当 symbol-placement 为 line 时和 map 一致// 文本类属性需要指定 text-fieldtext-rotation-alignment: auto, // 与 icon-rotation-alignment 类似text-pitch-alignment: auto, // 与 icon-pitch-alignment 类似text-field: , // 文本所对应的字段可选默认值为 text-font: [Open Sans Regular,Arial Unicode MS Regular], // 文本的字体集合可选默认值为 [Open Sans Regular,Arial Unicode MS Regular]text-size: 16, // 文本的大小可选默认值为 16单位像素text-max-width: 10, // 文本的最大宽度超过则折行可选默认值为 10单位ems text-line-height: 1.2, // 文本的行高可选默认值为 1.2单位emstext-letter-spacing: 0, // 文本的字符间距可选默认值为 0单位emstext-justify: center, // 文本的水平对齐方式可选可选值为 auto、left、center、right。默认值为 centertext-anchor: center, // 文本与锚点的位置关系可选可选值为 center、left、right、top、bottom、top-left、top-right、bottom-left、bottom-right默认值为 centertext-variable-anchor: center, // 与 text-anchor优先级更高 类似有点不懂text-max-angle: 45, // 当 symbol-placement 为 line 或 line-center 时文本相邻字符的最大夹角默认 45 度text-rotate: 0, // 文本的顺时针旋转角度可选默认值为 0单位角度text-padding: 2, // 文本的外边距可选值 0默认值为 2。可用于碰撞检测text-keep-upright: false, // 当 icon-rotation-alignment 为 map且 symbol-placement 为 line 或者 line-center 时设置为 true 的话可以避免文本上下颠倒text-transform: none, // 文本大小写转换可选可选值为 none、uppercase、lowercase默认值为 nonetext-offset: [0, 0], // 图标的偏移量可选默认值为 [0, 0]text-radial-offset: 0, // 文本的径向偏移量优先级比 text-offset 高text-allow-overlap: false, // 是否允许文本重叠可选默认值为 false。当值为 true 时文本即使和其他符号触碰也会显示text-ignore-placement: false, // 是否忽略文本位置可选默认值为 false。当值为 true 时其他符号即使与此文本触碰也会显示text-optional: false // 文本是否可不显示可选默认值为 false。当值为 true 时如果文本与图标碰撞则显示图标},paint: { // 绘制类属性// 图标类属性需要设置 icon-imageicon-opacity: 1, // 图标的不透明度可选取值范围为 0 ~ 1默认值为 1icon-color: #000000, // 图标的颜色可选默认值为 #000000icon-halo-color: rgba(0,0,0,0), // 图标的光晕颜色可选默认值为 rgba(0,0,0,0)icon-halo-width: 0, // 图标的光晕宽度可选值 0默认值为 0单位像素icon-halo-blur: 0, // 图标的光晕模糊宽度可选值 0默认值为 0单位像素icon-translate: [0, 0], // 图标的平移可选通过平移 [x, y] 达到一定的偏移量。默认值为 [0, 0]单位像素。icon-translate-anchor: map, // 图标的平移锚点即相对的参考物可选可选值为 map、viewport默认为 map// 文本类属性需要设置 text-fieldtext-opacity: 1, // 文本的不透明度可选取值范围为 0 ~ 1默认值为 1text-color: #000000, // 文本的颜色可选默认值为 #000000text-halo-color: rgba(0,0,0,0), // 文本的光晕颜色可选默认值为 rgba(0,0,0,0)text-halo-width: 0, // 文本的光晕宽度可选值 0默认值为 0单位像素text-halo-blur: 0, // 文本的光晕模糊宽度可选值 0默认值为 0单位像素text-translate: [0, 0], // 文本的平移可选通过平移 [x, y] 达到一定的偏移量。默认值为 [0, 0]单位像素。text-translate-anchor: map, // 文本的平移锚点即相对的参考物可选可选值为 map、viewport默认为 map}}
](5) background
background背景用于绘制成整个地图的背景或者图案
layers: [{id: background-id, // 唯一 id 必填type: background, // 类型必填metadata: { // 元数据可选用于为 layer 附加任意的属性。为避免冲突建议添加前缀如 mapbox:mapbox:name: test},minzoom: 0, // 最小层级可选取值范围为 0 ~ 24。当 style 的 zoom 小于此 minzoom 时layer 将被隐藏maxzoom: 24, // 最大层级可选取值范围为 0 ~ 24。当 style 的 zoom 大于此 maxzoom 时layer 将被隐藏layout: { // 布局类属性visibility: visible, // 可见性可选可选值为 none、visible默认值为 visible},paint: { // 绘制类属性background-color: #000000, // 背景颜色可选默认值为 #000000。如果设置了 background-pattern则 background-color 将无效background-pattern: , // 背景图案可选这里填写在 sprite 雪碧图中图标名称。为了背景图案能无缝填充图标的高宽需要是 2 的倍数background-opacity: 1 // 背景不透明度可选取值范围为 0 ~ 1默认值为 1 }}
](6) raster
raster栅格用于绘制栅格地图比如卫星影像
layers: [{id: raster-id, // 唯一 id 必填type: raster, // 类型必填metadata: { // 元数据可选用于为 layer 附加任意的属性。为避免冲突建议添加前缀如 mapbox:mapbox:name: test},source: source-name, // 数据源的名称除了 layer 的 type 为 background 外source 必填 source-layer: source-layer-name, // 数据源的图层只有数据源 source 的 type 为 vector 时才能设置 source-layer其他类型的不可以设置minzoom: 0, // 最小层级可选取值范围为 0 ~ 24。当 style 的 zoom 小于此 minzoom 时layer 将被隐藏maxzoom: 24, // 最大层级可选取值范围为 0 ~ 24。当 style 的 zoom 大于此 maxzoom 时layer 将被隐藏filter: [], // 过滤可选用特定的表达式过滤指定的数据源的要素。具体的表达式详见 expressionlayout: { // 布局类属性visibility: visible, // 可见性可选可选值为 none、visible默认值为 visible},paint: { // 绘制类属性raster-opacity: 1, // 图片的不透明度可选取值范围为 0 ~ 1默认值为 1raster-hue-rotate: 0, // 在色轮上旋转色相的角度可选默认值为 0单位角度raster-brightness-min: 0, // 图片的最小亮度可选取值范围为 0 ~ 1默认值为 0raster-brightness-max: 1, // 图片的最大亮度可选取值范围为 0 ~ 1默认值为 1raster-saturation: 0, // 图片的饱和度可选取值范围为 -1 ~ 1默认值为 0raster-contrast: 0, // 图片的对比度可选取值范围为 -1 ~ 1默认值为 0raster-resampling: linear, // 采样方式可选可选值为 linear、nearest默认值为 linear raster-fade-duration: 300 // 切换瓦片时的渐隐时间可选默认值为 300单位毫秒}}
](7) heatmap
heatmap热力图用于绘制成热力图的效果
layers: [{id: heatmap-id, // 唯一 id 必填type: heatmap, // 类型必填metadata: { // 元数据可选用于为 layer 附加任意的属性。为避免冲突建议添加前缀如 mapbox:mapbox:name: test},source: source-name, // 数据源的名称除了 layer 的 type 为 background 外source 必填 source-layer: source-layer-name, // 数据源的图层只有数据源 source 的 type 为 vector 时才能设置 source-layer其他类型的不可以设置minzoom: 0, // 最小层级可选取值范围为 0 ~ 24。当 style 的 zoom 小于此 minzoom 时layer 将被隐藏maxzoom: 24, // 最大层级可选取值范围为 0 ~ 24。当 style 的 zoom 大于此 maxzoom 时layer 将被隐藏filter: [], // 过滤可选用特定的表达式过滤指定的数据源的要素。具体的表达式详见 expressionlayout: { // 布局类属性visibility: visible, // 可见性可选可选值为 none、visible默认值为 visible},paint: { // 绘制类属性heatmap-opacity: 1, // 热力图的不透明度可选取值范围为 0 ~ 1默认值为 1heatmap-radius: 30, // 一个热力图点的影响半径可选值 1默认值为 30单位像素heatmap-weight: 1, // 一个热力图点的权重可选值 0默认值为 1heatmap-intensity: 1, // 热力图的强度控制了所有的热力图点可选值 0默认值为 1heatmap-color: [ // 热力图的颜色变化可选默认值如下interpolate, [linear], [heatmap-density],0, rgba(0, 0, 255, 0),0.1, royalblue,0.3, cyan,0.5, lime,0.7, yellow,1, red]}}
](8) hillshade
hillshade坡面阴影基于 DEM 数字高程模型进行坡面阴影的可视化渲染
layers: [{id: hillshade-id, // 唯一 id 必填type: hillshade, // 类型必填metadata: { // 元数据可选用于为 layer 附加任意的属性。为避免冲突建议添加前缀如 mapbox:mapbox:name: test},source: source-name, // 数据源的名称除了 layer 的 type 为 background 外source 必填 source-layer: source-layer-name, // 数据源的图层只有数据源 source 的 type 为 vector 时才能设置 source-layer其他类型的不可以设置minzoom: 0, // 最小层级可选取值范围为 0 ~ 24。当 style 的 zoom 小于此 minzoom 时layer 将被隐藏maxzoom: 24, // 最大层级可选取值范围为 0 ~ 24。当 style 的 zoom 大于此 maxzoom 时layer 将被隐藏filter: [], // 过滤可选用特定的表达式过滤指定的数据源的要素。具体的表达式详见 expressionlayout: { // 布局类属性visibility: visible, // 可见性可选可选值为 none、visible默认值为 visible},paint: { // 绘制类属性hillshade-illumination-direction: 335, // 光照的方向可选取值范围为 0 ~ 359默认值为 335单位角度hillshade-illumination-anchor: viewport, // 光照的锚点可选可选值为 map、viewport默认值为 viewporthillshade-exaggeration: 0.5, // 阴影的强度可选取值范围为 0 ~ 1默认值为 0.5hillshade-shadow-color: #000000, // 阴影的颜色可选默认值为 #000000hillshade-highlight-color: #ffffff, // 光照部分的颜色可选默认值为 #ffffffhillshade-accent-color: #000000 // 用于强调地形的颜色可选默认值为 #000000}}
](9) fill-extrusion
fill-extrusion三维填充用于给三维多边形进行填充和描边
layers: [{id: fill-extrusion-id, // 唯一 id 必填type: fill-extrusion, // 类型必填metadata: { // 元数据可选用于为 layer 附加任意的属性。为避免冲突建议添加前缀如 mapbox:mapbox:name: test},source: source-name, // 数据源的名称除了 layer 的 type 为 background 外source 必填 source-layer: source-layer-name, // 数据源的图层只有数据源 source 的 type 为 vector 时才能设置 source-layer其他类型的不可以设置minzoom: 0, // 最小层级可选取值范围为 0 ~ 24。当 style 的 zoom 小于此 minzoom 时layer 将被隐藏maxzoom: 24, // 最大层级可选取值范围为 0 ~ 24。当 style 的 zoom 大于此 maxzoom 时layer 将被隐藏filter: [], // 过滤可选用特定的表达式过滤指定的数据源的要素。具体的表达式详见 expressionlayout: { // 布局类属性visibility: visible, // 可见性可选可选值为 none、visible默认值为 visible},paint: { // 绘制类属性fill-extrusion-opacity: 1, // 三维填充的不透明度可选取值范围为 0 ~ 1默认值为 1fill-extrusion-pattern: , // 三维填充的图案可选这里填写在 sprite 雪碧图中图标名称。为了图案能无缝填充图标的高宽需要是 2 的倍数fill-extrusion-color: #000000, // 三维填充的颜色可选默认值为 #000000fill-extrusion-translate: [0, 0], // 三维填充的平移可选通过平移 [x, y] 达到一定的偏移量。默认值为 [0, 0]单位像素。fill-extrusion-translate-anchor: map, // 平移的锚点即相对的参考物可选可选值为 map、viewport默认为 mapfill-extrusion-height: 0, // 三维填充的高度可选值 0默认值为 0单位米fill-extrusion-base: 0, // 三维填充的底部高度可选值 0默认值为 0单位米。值必须小于等于 fill-extrusion-heightfill-extrusion-vertical-gradient: true, // 是否开启垂直渐变可选默认值为 true}}
]14. Expressions
Expressions表达式集合并非 style 的属性只是 layer 的任何 layout 布局属性和 paint 绘制属性以及 filter 属性等它们的值都可以指定成一个表达式 Expression
一个 Expression 定义了一个公式总体来说可以将公式中的操作符分为以下 5 种
Mathematical operators数学操作符用来对数值进行数学运算Logical operators逻辑操作符用来计算布尔值和条件控制String operators字符串操作符用来操作字符串Data operators数据操作符用来访问数据源中的要素 featureCamera operators照相机操作符用来访问当前地图视图的各个参数
Expressions 是 Expression 的集合。而 Expression 是以 JSON 数组的形式来表示的数组的第一个元素是 Expression 的操作符的名称后续的元素表示操作的参数也可以是一个 Expression。
[expression_name, argument_0, argument_1, expression_1, ...]由以上 5 种操作符相应地可以推出 5 种表达式集合 Expressions并且相互之间可以组合使用
Mathematical expressionsLogical expressionsString expressionsData expressionsCamera expressions
这里主要讲述 Data expressions 和 Camera expressions。
(1) Data expressions
一个 data expression 是可以访问要素数据的任何表达式。而这些表达式使用了以下至少一种数据操作符
get用于获取要素的属性值格式为 [“get”, “property_name”]余下具体的可以看 Expression referencehasidgeometry-typepropertiesfeature-state
通过 data expression 可以实现区分同一个图层中的不同要素并以不同的形式呈现。比如设置颜色 circle-color
{circle-color: [rgb, // rgb 操作符用于表达颜色rgb(red, green, blue)[get, temperature], // 获取属性 temperature 的值作为 rgb 中的 red 的值0, // rgb 中的 green 始终为 0[-, 100, [get, temperature]] // 用 100 减去属性 temperature 的值作为 rgb 中的 blue 的值]
}需要注意的是并非所有的 layout 布局类属性和 paint 绘制类属性都支持 data expression
具体可以看 SDK Support 中的 data-driven styling 那一行
而且使用了 feature-state 操作符的 data expression 仅在 paint 绘制类属性中可用。
以下是官网中记录的暂不支持数据表达式 data expression 的属性
[
fill-antialias,
fill-translate,
fill-translate-anchor,
line-cap,
line-miter-limit,
line-round-limit,
visibility,
line-translate,
line-translate-anchor,
line-dasharray,
line-gradient,
symbol-placement,
symbol-spacing,
symbol-avoid-edges,
symbol-z-order,
icon-allow-overlap,
icon-ignore-placement,
icon-optional,
icon-rotation-alignment,
icon-text-fit,
icon-text-fit-padding,
icon-padding,
icon-keep-upright,
icon-pitch-alignment,
text-pitch-alignment,
text-rotation-alignment,
text-line-height,
text-variable-anchor,
text-max-angle,
text-padding,
text-keep-upright,
text-allow-overlap,
text-ignore-placement,
text-optional,
icon-translate,
icon-translate-anchor,
text-translate,
text-translate-anchor,
raster-opacity,
raster-hue-rotate,
raster-brightness-min,
raster-brightness-max,
raster-saturation,
raster-contrast,
raster-resampling,
raster-fade-duration,
circle-translate,
circle-translate-anchor,
circle-pitch-scale,
circle-pitch-alignment,
fill-extrusion-translate,
fill-extrusion-translate-anchor,
heatmap-intensity,
heatmap-color,
heatmap-opacity,
hillshade-illumination-direction,
hillshade-illumination-anchor,
hillshade-exaggeration,
hillshade-shadow-color,
hillshade-highlight-color,
hillshade-accent-color
](2) Camera expressions
一个 camera expression 是使用了 zoom 操作符的任何表达式。
通过 camera expression 可以实现图层 layer 根据地图的缩放层级 zoom 有不同的表现。 比如设置半径 circle-radius
{circle-radius: [interpolate, [linear], [zoom], // 通过 interpolate 操作符为 circle-radius 和 zoom 之间定义一种线性关系 linear5, 1, // 当 zoom 5 时circle-radius 为 1单位px// 当 5 zoom 10 时circle-radius 的值在 1 ~ 5 之间线性分布10, 5 // 当 zoom 10 时circle-radius 为 5单位px]
}所有可以使用 Expression 的属性都支持 camera expression。不过当用于 layout 布局类属性和 paint 绘制类属性时必须是以下几种格式
[ interpolate, interpolation, [zoom], ... ]
或[ step, [zoom], ... ]
或[let,... variable bindings...,[ interpolate, interpolation, [zoom], ... ]
]
或[let,... variable bindings...,[ step, [zoom], ... ]
]为什么呢因为 [“zoom”] 在 layout 布局类属性和 paint 绘制类属性中仅作为 interpolate 或 step 操作的输入参数。
需要注意layout 布局类属性和 paint 绘制类属性有一个很重要的区别
layout 布局类属性中使用的 camera expression 只有在 zoom 的值是 整数变化 时才会重新计算。 paint 绘制类型属性中使用的 camera expression 在 zoom 的值是 小数变化 时也会重新计算。比如 zoom 从 4.1 变为 4.6。
15. Expression reference
前面介绍了表达式集合 Expressions简单地讲述了其中的 Data expressions 和 Camera expressions而这些表达式里涉及和很多的操作符这里就对每个操作符进行分类介绍作为表达式的参考 Expression reference。
主要分为以下几类操作符
TypesFeature dataLookupDecisionDecisionVariable bindingStringColorMathZoomHeatmap
(1) Types
Types这类操作符用于 断言 和 转换 数据的类型包含的操作符如下
// (1) string 用于断言输入值是字符串。其对应的表达式有两种形式
[string, value]: string
[string, value, fallback: value, fallback: value, ...]: string// (2) boolean 用于断言输入的值是布尔值如果不是则会报错。其对应的表达式有两种形式
[boolean, value]: boolean
[boolean, value, fallback: value, fallback: value, ...]: boolean// (3) number 用于断言输入值是数值如果不是则会报错。其对应的表达式有两种形式
[number, value]: number
[number, value, fallback: value, fallback: value, ...]: number// (4) number-format 用于将数值转换为指定格式的字符串
[number-format,input: number,options: { locale: string, currency: string, min-fraction-digits: number, max-fraction-digits: number }
]: string// (5) object 用于断言输入值是对象。其对应的表达式有两种形式
[object, value]: object
[object, value, fallback: value, fallback: value, ...]: object// (6) array 用于断言输入的值是数组如果不是则会被终止。其对应的表达式有三种形式
[array, value]: array
[array, type: string | number | boolean, value]: arraytype
[array, type: string | number | boolean, N: number (literal), value]: arraytype, N// (7) literal 用于提供数组或对象的字面量
[literal, [...] (JSON array literal)]: arrayT, N
[literal, {...} (JSON object literal)]: Object// (8) collator 通过设定本地 IETF 语言标记校对比较符
[collator, { case-sensitive: boolean, diacritic-sensitive: boolean, locale: string }]: collator// (9) format 用于格式化特定文本的大小和字体等。常见于对同个属性字段 text-field 的不同值的处理
[format,input_1: string, options_1: { font-scale: number, text-font: arraystring },...,input_n: string, options_n: { font-scale: number, text-font: arraystring }
]: formatted// (10) to-string 用于转换输入值为字符串
[to-string, value]: string// (11) to-boolean 用于转换输入值为布尔值
[to-boolean, value]: boolean// (12) to-number 用于转换输入值为数值
[to-number, value, fallback: value, fallback: value, ...]: number// (13) to-color 用于转换输入值为颜色
[to-color, value, fallback: value, fallback: value, ...]: color// (14) typeof 用于得到输入值的类型
[typeof, value]: string(2) Feature data
Feature data这类操作符用于操作要素的数据。
// (1) accumulated 获取一个群组的累计值。只限于 geojson 类型的数据源并且设置了 cluster
[accumulated]: value// (2) feature-state 从当前的要素状态获取属性值。要素状态不是数据源里自带的只能通过编程设置
[feature-state, string]: value// (3) geometry-type 获取要素的几何类型。如 Point、MultiPoint、LineString、MultiLineString、Polygon、MultiPolygon
[geometry-type]: string// (4) id 获取要素的 id 属性值
[id]: value// (5) line-progress 获取渐变线的进度。只能用于设置了 line-gradient 的
[line-progress]: number// (6) properties 获取要素的属性对象。直接用表达式 [get, property_name] 效率更高
[properties]: object(3) Lookup
Lookup这类操作符用于查找并获取值
// (1) at 根据指定的索引获取数组中的元素
[at, number, array]: ItemType// (2) get 根据指定的属性名从当前要素或者指定的对象中获取属性值。其对应的表达式有两种形式
[get, string]: value
[get, string, object]: value// (3) has 用于检测指定的属性在当前要素或者指定的对象中是否存在。其对应的表达式有两种形式
[has, string]: value
[has, string, object]: value// (4) length 获取指定的数组、字符串的长度
[length, string | array | value]: number(4) Decision
Decision这类操作符用于条件判断
// (1) ! 取反
[!, boolean]: boolean// (2) ! 判断两数是否相等
[!, value, value]: boolean
[!, value, value, collator]: boolean// (3) 判断第一个数是否小于第二个数
[, value, value]: boolean
[, value, value, collator]: boolean// (4) 判断第一个数是否小于等于第二个数
[, value, value]: boolean
[, value, value, collator]: boolean// (5) 判断第一个数是否等于第二个数
[, value, value]: boolean
[, value, value, collator]: boolean// (6) 判断第一个数是否大于第二个数
[, value, value]: boolean
[, value, value, collator]: boolean// (7) 判断第一个数是否大于等于第二个数
[, value, value]: boolean
[, value, value, collator]: boolean// (8) all 判断是否所有的都为 true
[all, boolean, boolean]: boolean
[all, boolean, boolean, ...]: boolean// (9) any 判断是否有为 true 的
[any, boolean, boolean]: boolean
[any, boolean, boolean, ...]: boolean// (10) case 满足指定条件则返回指定的数据
[case,condition: boolean, output: OutputType,condition: boolean, output: OutputType,...,fallback: OutputType
]: OutputType// (11) coalesce 计算每个的值直到获取到非空值然后返回那个值
[coalesce, OutputType, OutputType, ...]: OutputType// (12) match 当输入值比如从属性中获取 [get, property_name] 与指定的值匹配时返回相应的值。
[match,input: InputType (number or string),label: InputType | [InputType, InputType, ...], output: OutputType,label: InputType | [InputType, InputType, ...], output: OutputType,...,fallback: OutputType
]: OutputType(5) Ramps, scales, curves
Ramps, scales, curves这类操作符用于渐变、缩放、曲线等特殊效果的设置。
// (1) interpolate 通过在输入值和输出值之间进行插值来生成持续、平滑的数据。输入值必须是数字并且各个断点的值按升序排序输出值可能是数字、数组或者颜色
[interpolate,interpolation: [linear] | [exponential, base] | [cubic-bezier, x1, y1, x2, y2 ],input: number,stop_input_1: number, stop_output_1: OutputType,stop_input_n: number, stop_output_n: OutputType, ...
]: OutputType (number, arraynumber, or Color)// (2) interpolate-hcl 类似 interpolate不过输出值必须是颜色并且插值属于 Hue-Chroma-Luminance 颜色空间
[interpolate-hcl,interpolation: [linear] | [exponential, base] | [cubic-bezier, x1, y1, x2, y2 ],input: number,stop_input_1: number, stop_output_1: Color,stop_input_n: number, stop_output_n: Color, ...
]: Color// (3) interpolate-lab 类似 interpolate不过输出值必须是颜色并且插值属于 CIELAB 颜色空间
[interpolate-lab,interpolation: [linear] | [exponential, base] | [cubic-bezier, x1, y1, x2, y2 ],input: number,stop_input_1: number, stop_output_1: Color,stop_input_n: number, stop_output_n: Color, ...
]: Color// (4) step 通过分段函数来生成离散的、逐步的数据。
[step,input: number,stop_output_0: OutputType,stop_input_1: number, stop_output_1: OutputType,stop_input_n: number, stop_output_n: OutputType, ...
]: OutputType(6) Variable binding
Variable binding这类操作符用于变量绑定。
// (1) let 绑定表达式给指定的变量
[let,string (alphanumeric literal), any, string (alphanumeric literal), any, ...,OutputType
]: OutputType// (2) var 使用通过 let 绑定的变量
[var, previously bound variable name]: the type of the bound expression(7) String
String这类操作符用于操作字符串。
// (1) concat 用于连接各个输入的字符串得到连接后的字符串
[concat, value, value, ...]: string// (2) downcase 将字符串转为小写
[downcase, string]: string// (3) upcase 将字符串转为大写
[upcase, string]: string// (4) resolved-locale 获取通过 collator 设置的 IETF 语言标记
[resolved-locale, collator]: string// (5) is-supported-script 判断输入的字符串是否清晰额...有点没明白
[is-supported-script, string]: boolean(8) Color
Color这类操作符用于操作颜色。
// (1) rgb 创建由 red、green、blue 组成的 rgb 颜色。每个值的取值范围为 0 ~ 255
[rgb, number, number, number]: color// (2) rgba 创建由 red、green、blue、alpha 组成的 rgba 颜色。除了 alpha 取值范围为 0 ~ 1 外其他值的取值范围为 0 ~ 255
[rgba, number, number, number, number]: color// (3) to-rgba 转换颜色为 rgba 颜色对应的数组 [red, green, blue, alpha]
[to-rgba, color]: arraynumber, 4(9) Math
Math这类操作符用于数学运算。
// (1) 取输入值的总和
[, number, number, ...]: number// (2) - 对于两个数返回第一个数减去第二个数的结果对于一个数则返回 0 减去这个数的结果相当于取相反数
[-, number, number]: number
[-, number]: number// (3) * 取输入值的乘积
[*, number, number, ...]: number// (4) / 返回第一个数除以第二个数的结果包含小数
[/, number, number]: number// (5) % 返回第一个数除以第二个数的余数
[%, number, number]: number// (6) ^ 返回第一个数的第二个数次方
[^, number, number]: number// (7) abs 取绝对值
[abs, number]: number// (8) acos 取反余弦值
[acos, number]: number// (9) asin 取反正弦值
[asin, number]: number// (10) atan 取反正切值
[atan, number]: number// (11) ceil 取大于等于输入值的最大整数
[ceil, number]: number// (12) cos 取余弦值
[cos, number]: number// (13) e 取数学常数 e
[e]: number// (14) floor 取小于等于输入值的最大整数
[floor, number]: number// (15) ln 取输入值的自然对数
[ln, number]: number// (16) ln2 取数学常数 ln(2)
[ln2]: number// (17) log10 取输入值以 10 为底的对数
[log10, number]: number// (18) log2 取输入值以 2 为底的对数
[log2, number]: number// (19) max 取输入值中的最大值
[max, number, number, ...]: number// (20) min 取输入值中的最小值
[min, number, number, ...]: number// (21) pi 取圆周率 pi
[pi]: number// (22) round 取输入值四舍五入后的值
[round, number]: number// (23) sin 取正弦值
[sin, number]: number// (24) sqrt 取平方根
[sqrt, number]: number// (25) tan 取正切值
[tan, number]: number(10) Zoom
Zoom这类操作符只包含一个操作符 zoom用于获取当前地图的缩放层级。
[zoom]: number(11) Heatmap
Heatmap这类操作符只包含一个操作符 heatmap-density用于获取热力图的密度特定像素内有多少个数据点只能在 heatmap-color 中使用。
[heatmap-density]: number16. Functions
之前介绍了表达式集合 Expressions我们知道了 layout 布局类属性和 paint 绘制类属性的值都可以设为一个表达式 Expression。
同样地函数 Function 也可以作为其 layout 布局类属性和 paint 绘制类属性的属性值。
需要注意的是在使用 Function 作为属性值时实际上是一个对象 {}。
ps不晓得 Function 翻译成 “函数” 对不对还是说翻译成 “功能”…
Functions 是 Function 的集合。Function 可以用来根据 地图缩放层级 和 地图要素的属性 来控制地图要素的呈现。所以可以分为三类
Zoom functionsProperty functionsZoom-and-property functions
(1) Zoom functions
一个 zoom function 允许地图的呈现根据 地图的缩放层级 而改变。
{circle-radius: {stops: [ // 断点除了 type 为 identity 外必填由输入值和输出值为一组作为数组的元素[5, 1], // zoom 为 5 时circle-radius 为 1 单位px[10, 2] // zoom 为 10 时circle-radius 为 2 单位px],base: 1, // 插值计算的基数可选默认值为 1type: interval, // 类型可选可选值为 identity、exponential、interval、categorical默认值为 interval// --- identity一致型将输入值作为输出值// --- exponential指数连续型在断点之间生成插值// --- interval间隔型输出值刚好小于输入值的一系列输出呈阶梯状// --- categorical分类型将和输入值一致的输出defaul: 1, // 默认值colorSpace: rgb, // 色彩空间可选可选值为 rgb、lab、hcl}
}(2) Property functions
一个 property function 允许地图的呈现根据 地图要素的属性 而改变。
{circle-color: {property: temperature, // 属性名填写后 stops 的输入值就是对应的属性值stops: [ // 断点除了 type 为 identity 外必填由输入值和输出值为一组作为数组的元素[0, blue], // 属性 temperature 的值为 0 时circle-color 为 blue 蓝色[100, red] // 属性 temperature 的值为 100 时circle-color 为 red 红色],base: 1, // 插值计算的基数可选默认值为 1type: interval, // 类型可选可选值为 identity、exponential、interval、categorical默认值为 interval// --- identity一致型将输入值作为输出值// --- exponential指数连续型在断点之间生成插值// --- interval间隔型输出值刚好小于输入值的一系列输出呈阶梯状// --- categorical分类型将和输入值一致的输出defaul: #000000, // 默认值colorSpace: rgb, // 色彩空间可选可选值为 rgb、lab、hcl}
}(3) Zoom-and-property functions
一个 zoom-property function 允许地图的呈现根据 地图的缩放层级 和 地图要素的属性 而改变。
{circle-radius: {property: rating,stops: [[{zoom: 0, value: 0}, 0], // 当 zoom 为 0且属性 rating 值为 0 时circle-radius 为 0依次类推[{zoom: 0, value: 5}, 5],[{zoom: 20, value: 0}, 0],[{zoom: 20, value: 5}, 20]],base: 1, // 插值计算的基数可选默认值为 1type: interval, // 类型可选可选值为 identity、exponential、interval、categorical默认值为 interval// --- identity一致型将输入值作为输出值// --- exponential指数连续型在断点之间生成插值// --- interval间隔型输出值刚好小于输入值的一系列输出呈阶梯状// --- categorical分类型将和输入值一致的输出defaul: #000000, // 默认值colorSpace: rgb, // 色彩空间可选可选值为 rgb、lab、hcl}
}
文章转载自： http://www.morning.knmp.cn.gov.cn.knmp.cn http://www.morning.wlqll.cn.gov.cn.wlqll.cn http://www.morning.fglth.cn.gov.cn.fglth.cn http://www.morning.csxlm.cn.gov.cn.csxlm.cn http://www.morning.sqhtg.cn.gov.cn.sqhtg.cn http://www.morning.nwcgj.cn.gov.cn.nwcgj.cn http://www.morning.srkzd.cn.gov.cn.srkzd.cn http://www.morning.qnhpq.cn.gov.cn.qnhpq.cn http://www.morning.tqpr.cn.gov.cn.tqpr.cn http://www.morning.yswxq.cn.gov.cn.yswxq.cn http://www.morning.qnhpq.cn.gov.cn.qnhpq.cn http://www.morning.llcsd.cn.gov.cn.llcsd.cn http://www.morning.fhqsm.cn.gov.cn.fhqsm.cn http://www.morning.ypdhl.cn.gov.cn.ypdhl.cn http://www.morning.wrbf.cn.gov.cn.wrbf.cn http://www.morning.yllym.cn.gov.cn.yllym.cn http://www.morning.csznh.cn.gov.cn.csznh.cn http://www.morning.bbgn.cn.gov.cn.bbgn.cn http://www.morning.qsy39.cn.gov.cn.qsy39.cn http://www.morning.bmfqg.cn.gov.cn.bmfqg.cn http://www.morning.xtrnx.cn.gov.cn.xtrnx.cn http://www.morning.pcrzf.cn.gov.cn.pcrzf.cn http://www.morning.qpqb.cn.gov.cn.qpqb.cn http://www.morning.klwxh.cn.gov.cn.klwxh.cn http://www.morning.gidmag.com.gov.cn.gidmag.com http://www.morning.rbbgh.cn.gov.cn.rbbgh.cn http://www.morning.flxqm.cn.gov.cn.flxqm.cn http://www.morning.grryh.cn.gov.cn.grryh.cn http://www.morning.qdcpn.cn.gov.cn.qdcpn.cn http://www.morning.mnnxt.cn.gov.cn.mnnxt.cn http://www.morning.ysfj.cn.gov.cn.ysfj.cn http://www.morning.bpkqd.cn.gov.cn.bpkqd.cn http://www.morning.xnyfn.cn.gov.cn.xnyfn.cn http://www.morning.ylpl.cn.gov.cn.ylpl.cn http://www.morning.pqppj.cn.gov.cn.pqppj.cn http://www.morning.rtjhw.cn.gov.cn.rtjhw.cn http://www.morning.dpdns.cn.gov.cn.dpdns.cn http://www.morning.jhxtm.cn.gov.cn.jhxtm.cn http://www.morning.jhwqp.cn.gov.cn.jhwqp.cn http://www.morning.trkl.cn.gov.cn.trkl.cn http://www.morning.kbgzj.cn.gov.cn.kbgzj.cn http://www.morning.guanszz.com.gov.cn.guanszz.com http://www.morning.wqbhx.cn.gov.cn.wqbhx.cn http://www.morning.xwgbr.cn.gov.cn.xwgbr.cn http://www.morning.xesrd.com.gov.cn.xesrd.com http://www.morning.lsmnn.cn.gov.cn.lsmnn.cn http://www.morning.lbhck.cn.gov.cn.lbhck.cn http://www.morning.ynbyk.cn.gov.cn.ynbyk.cn http://www.morning.lrflh.cn.gov.cn.lrflh.cn http://www.morning.jqllx.cn.gov.cn.jqllx.cn http://www.morning.zgdnd.cn.gov.cn.zgdnd.cn http://www.morning.zcwtl.cn.gov.cn.zcwtl.cn http://www.morning.dskzr.cn.gov.cn.dskzr.cn http://www.morning.dndk.cn.gov.cn.dndk.cn http://www.morning.wiitw.com.gov.cn.wiitw.com http://www.morning.sxfnf.cn.gov.cn.sxfnf.cn http://www.morning.lwjlj.cn.gov.cn.lwjlj.cn http://www.morning.pzbjy.cn.gov.cn.pzbjy.cn http://www.morning.stcds.cn.gov.cn.stcds.cn http://www.morning.kpnpd.cn.gov.cn.kpnpd.cn http://www.morning.fynkt.cn.gov.cn.fynkt.cn http://www.morning.fyzsq.cn.gov.cn.fyzsq.cn http://www.morning.rxtxf.cn.gov.cn.rxtxf.cn http://www.morning.nfpct.cn.gov.cn.nfpct.cn http://www.morning.dqpd.cn.gov.cn.dqpd.cn http://www.morning.ybnzn.cn.gov.cn.ybnzn.cn http://www.morning.jgcyn.cn.gov.cn.jgcyn.cn http://www.morning.jfxdy.cn.gov.cn.jfxdy.cn http://www.morning.npcxk.cn.gov.cn.npcxk.cn http://www.morning.sxwfx.cn.gov.cn.sxwfx.cn http://www.morning.monstercide.com.gov.cn.monstercide.com http://www.morning.hhzdj.cn.gov.cn.hhzdj.cn http://www.morning.rkjz.cn.gov.cn.rkjz.cn http://www.morning.qsswb.cn.gov.cn.qsswb.cn http://www.morning.nmlpp.cn.gov.cn.nmlpp.cn http://www.morning.pdgqf.cn.gov.cn.pdgqf.cn http://www.morning.ckctj.cn.gov.cn.ckctj.cn http://www.morning.mbmh.cn.gov.cn.mbmh.cn http://www.morning.cjmmn.cn.gov.cn.cjmmn.cn http://www.morning.jqmmf.cn.gov.cn.jqmmf.cn
