@arcgis/core/views/2d/engine/vectorTiles/style/StyleLayer.js

ArcGIS Maps SDK for JavaScript: A complete 2D and 3D mapping and data visualization API

/* COPYRIGHT Esri - https://js.arcgis.com/5.0.19/LICENSE.txt */
import{fromValues as t}from"../../../../../geometry/support/aaBoundingRect.js";import{tilePixelRatio as i}from"../constants.js";import{translateAnchor as e,offsetLine as a,distanceFromToPolylineWithinThreshold as o,pointInPolygon as r}from"../GeometryUtils.js";import{VTLBackgroundMaterial as n}from"../shaders/VTLBackgroundMaterial.js";import{VTLCircleMaterial as s}from"../shaders/VTLCircleMaterial.js";import{VTLFillMaterial as l,VTLOutlineMaterial as h}from"../shaders/VTLFillMaterial.js";import{VTLLineMaterial as u}from"../shaders/VTLLineMaterial.js";import{VTLIconMaterial as p,VTLTextMaterial as g}from"../shaders/VTLSymbolMaterial.js";import c from"./Filter.js";import{StyleDefinition as y}from"./StyleDefinition.js";import P from"./StyleProperty.js";import{thinLineHalfWidthThreshold as f}from"../../webgl/definitions.js";class D{constructor(t,i,e,a,o,r){this.layer=t,this.feature=i,this.bounds=e,this.normalizationRatio=a,this.normalizationOffsetX=o,this.normalizationOffsetY=r}}class m{constructor(t,i,e,a){switch(this.type=t,this.typeName=i.type,this.id=i.id,this.source=i.source,this.sourceLayer=i["source-layer"],this.minzoom=i.minzoom,this.maxzoom=i.maxzoom,this.filter=i.filter,this.layout=i.layout,this.paint=i.paint,this.z=e,this.uid=a,t){case 0:this._layoutDefinition=y.backgroundLayoutDefinition,this._paintDefinition=y.backgroundPaintDefinition;break;case 1:this._layoutDefinition=y.fillLayoutDefinition,this._paintDefinition=y.fillPaintDefinition;break;case 2:this._layoutDefinition=y.lineLayoutDefinition,this._paintDefinition=y.linePaintDefinition;break;case 3:this._layoutDefinition=y.symbolLayoutDefinition,this._paintDefinition=y.symbolPaintDefinition;break;case 4:this._layoutDefinition=y.circleLayoutDefinition,this._paintDefinition=y.circlePaintDefinition}this._layoutProperties=this._parseLayout(this.layout),this._paintProperties=this._parsePaint(this.paint)}getFeatureFilter(){return void 0!==this._featureFilter?this._featureFilter:this._featureFilter=c.createFilter(this.filter)}getLayoutProperty(t){return this._layoutProperties[t]}getPaintProperty(t){return this._paintProperties[t]}getLayoutValue(t,i,e){let a;const o=this._layoutProperties[t];return o&&(a=o.getValue(i,e)),void 0===a&&(a=this._layoutDefinition[t].default),a}getPaintValue(t,i,e){let a;const o=this._paintProperties[t];return o&&(a=o.getValue(i,e)),void 0===a&&(a=this._paintDefinition[t].default),a}isPainterDataDriven(){const t=this._paintProperties;if(t)for(const i in t)if(t[i].isDataDriven)return!0;return!1}isIntersectingFeature(t,i,e,a,o,r,n){return!1}getFeatureInflatedBounds(t,i,e,a){return null}_parseLayout(t){const i={};for(const e in t){const a=this._layoutDefinition[e];a&&(i[e]=new P(a,t[e]))}return i}_parsePaint(t){const i={};for(const e in t){const a=this._paintDefinition[e];a&&(i[e]=new P(a,t[e]))}return i}computeAttributesKey(t,i,e,a){let o=0,r=0;for(const n of i){let t=3;if(n&&n!==a){const i=e[n],{isLayout:a,isOptional:o}=i,r=a?this.getLayoutProperty(n):this.getPaintProperty(n);t=r?.interpolator?2:r?.isDataDriven?1:o&&!r?3:0}r|=t<<o,o+=2}return r<<3|t}}class d extends m{constructor(t,i,e,a){super(t,i,e,a),this.backgroundMaterial=new n(this.computeAttributesKey(0,n.ATTRIBUTES,n.ATTRIBUTES_INFO))}}class _ extends m{constructor(t,i,e,a){super(t,i,e,a);const o=this.getPaintProperty("fill-color"),r=this.getPaintProperty("fill-opacity"),n=this.getPaintProperty("fill-pattern");this.hasDataDrivenColor=o?.isDataDriven,this.hasDataDrivenOpacity=r?.isDataDriven,this.hasDataDrivenFill=this.hasDataDrivenColor||this.hasDataDrivenOpacity||n?.isDataDriven;const s=this.getPaintProperty("fill-outline-color");this.outlineUsesFillColor=!s,this.hasDataDrivenOutlineColor=s?.isDataDriven,this.hasDataDrivenOutline=s?s.isDataDriven:!!o&&o.isDataDriven,this.hasDataDrivenOutline=(s?this.hasDataDrivenOutlineColor:this.hasDataDrivenColor)||this.hasDataDrivenOpacity,this.fillMaterial=new l(this.computeAttributesKey(1,l.ATTRIBUTES,l.ATTRIBUTES_INFO)),this.outlineMaterial=new h(this.computeAttributesKey(2,this.outlineUsesFillColor?h.ATTRIBUTES_FILL:h.ATTRIBUTES_OUTLINE,this.outlineUsesFillColor?h.ATTRIBUTES_INFO_FILL:h.ATTRIBUTES_INFO_OUTLINE),this.outlineUsesFillColor)}getFeatureInflatedBounds(t,i,e,a){const o=z(t);if(!o)return null;const r=this.getPaintValue("fill-translate",i,t),n=a*Math.max(r[0],r[1]);return o[0]-=n,o[2]-=n,o[1]+=n,o[3]+=n,o}isIntersectingFeature(t,a,n,s,l,h,u){const p=s.getGeometry();if(!p)return!1;const g=i/u.normalizationRatio;t=t/u.normalizationRatio+u.normalizationOffsetX,a=a/u.normalizationRatio+u.normalizationOffsetY;const c=e(this.getPaintValue("fill-translate",l,s),this.getPaintValue("fill-translate-anchor",l,s),h,i);t-=g*c.x,a-=g*c.y;return!!r(t,a,p)||o(t,a,p,n)}}class L extends m{constructor(t,i,e,a){super(t,i,e,a);const o=this.getPaintProperty("line-pattern");if(this.lineMaterial=new u(this.computeAttributesKey(3,u.ATTRIBUTES,u.ATTRIBUTES_INFO,o?"line-dasharray":"")),this.hasDataDrivenLine=this.getPaintProperty("line-blur")?.isDataDriven||this.getPaintProperty("line-color")?.isDataDriven||this.getPaintProperty("line-gap-width")?.isDataDriven||this.getPaintProperty("line-offset")?.isDataDriven||this.getPaintProperty("line-opacity")?.isDataDriven||this.getPaintProperty("line-pattern")?.isDataDriven||this.getPaintProperty("line-dasharray")?.isDataDriven||this.getLayoutProperty("line-cap")?.isDataDriven||this.getPaintProperty("line-width")?.isDataDriven,this.canUseThinTessellation=!1,!this.hasDataDrivenLine){const t=this.getPaintProperty("line-width");if(!t||"number"==typeof t&&.5*t<f){const t=this.getPaintProperty("line-offset");(!t||"number"==typeof t&&0===t)&&(this.canUseThinTessellation=!0)}}}getDashKey(t,i){let e;switch(i){case 0:default:e="Butt";break;case 1:e="Round";break;case 2:e="Square"}return`dasharray-[${t.toString()}]-${e}`}getFeatureInflatedBounds(t,i,e,a){const o=z(t);if(!o)return null;const r=this.getPaintValue("line-translate",i,t),n=a*Math.max(r[0],r[1]);o[0]-=n,o[2]-=n,o[1]+=n,o[3]+=n;const s=a*Math.abs(this.getPaintValue("line-offset",i,t)||0),l=a*(this.getPaintValue("line-width",i,t)/2);return o[0]-=s+l,o[1]-=s+l,o[2]+=s+l,o[3]+=s+l,o}isIntersectingFeature(t,r,n,s,l,h,u){let p=s.getGeometry();if(!p)return!1;const g=i/u.normalizationRatio;t=t/u.normalizationRatio+u.normalizationOffsetX,r=r/u.normalizationRatio+u.normalizationOffsetY;const c=e(this.getPaintValue("line-translate",l,s),this.getPaintValue("line-translate-anchor",l,s),h,i);t-=g*c.x,r-=g*c.y;const y=g*this.getPaintValue("line-offset",l,s)||0;0!==y&&(p=a(p,-y));const P=g*(this.getPaintValue("line-width",l,s)/2),f=Math.max(1,n-P);return o(t,r,p,f)}}class x extends m{constructor(t,i,e,a){super(t,i,e,a),this.iconMaterial=new p(this.computeAttributesKey(4,p.ATTRIBUTES,p.ATTRIBUTES_INFO)),this.textMaterial=new g(this.computeAttributesKey(6,g.ATTRIBUTES,g.ATTRIBUTES_INFO)),this.hasDataDrivenIcon=this.getPaintProperty("icon-color")?.isDataDriven||this.getPaintProperty("icon-halo-blur")?.isDataDriven||this.getPaintProperty("icon-halo-color")?.isDataDriven||this.getPaintProperty("icon-halo-width")?.isDataDriven||this.getPaintProperty("icon-opacity")?.isDataDriven||this.getLayoutProperty("icon-size")?.isDataDriven,this.hasDataDrivenText=this.getPaintProperty("text-color")?.isDataDriven||this.getPaintProperty("text-halo-blur")?.isDataDriven||this.getPaintProperty("text-halo-color")?.isDataDriven||this.getPaintProperty("text-halo-width")?.isDataDriven||this.getPaintProperty("text-opacity")?.isDataDriven||this.getLayoutProperty("text-size")?.isDataDriven}}class v extends m{constructor(t,i,e,a){super(t,i,e,a),this.circleMaterial=new s(this.computeAttributesKey(5,s.ATTRIBUTES,s.ATTRIBUTES_INFO))}getFeatureInflatedBounds(t,e,a,o){const r=z(t);if(!r)return null;const n=this.getPaintValue("circle-translate",e,t),s=Math.max(n[0],n[1]);r[0]-=s,r[2]-=s,r[1]+=s,r[3]+=s;const l=o*(i*(this.getPaintValue("circle-radius",e,t)+this.getPaintValue("circle-stroke-width",e,t))/2);return r[0]-=l,r[1]-=l,r[2]+=l,r[3]+=l,r}isIntersectingFeature(t,a,o,r,n,s,l){const h=r.getGeometry();if(!h)return!1;const u=i/l.normalizationRatio;t=t/l.normalizationRatio+l.normalizationOffsetX,a=a/l.normalizationRatio+l.normalizationOffsetY;const p=e(this.getPaintValue("circle-translate",n,r),this.getPaintValue("circle-translate-anchor",n,r),s,u),g=u*(this.getPaintValue("circle-radius",n,r)+this.getPaintValue("circle-stroke-width",n,r));let c,y;for(const i of h)if(i)for(const e of i){c=e.x+p.x,y=e.y+p.y;if(Math.sqrt((t-c)*(t-c)+(a-y)*(a-y))-o<=g)return!0}return!1}}class V{constructor(t,i,e){let a;this.allowOverlap=t.getLayoutValue("icon-allow-overlap",i),this.ignorePlacement=t.getLayoutValue("icon-ignore-placement",i),this.keepUpright=t.getLayoutValue("icon-keep-upright",i),this.optional=t.getLayoutValue("icon-optional",i),this.rotationAlignment=t.getLayoutValue("icon-rotation-alignment",i),2===this.rotationAlignment&&(this.rotationAlignment=e?0:1),a=t.getLayoutProperty("icon-anchor"),a?.isDataDriven?this._anchorProp=a:this.anchor=t.getLayoutValue("icon-anchor",i),a=t.getLayoutProperty("icon-offset"),a?.isDataDriven?this._offsetProp=a:this.offset=t.getLayoutValue("icon-offset",i),a=t.getLayoutProperty("icon-padding"),a?.isDataDriven?this._paddingProp=a:this.padding=t.getLayoutValue("icon-padding",i),a=t.getLayoutProperty("icon-rotate"),a?.isDataDriven?this._rotateProp=a:this.rotate=t.getLayoutValue("icon-rotate",i),a=t.getLayoutProperty("icon-size"),a?.isDataDriven?this._sizeProp=a:this.size=t.getLayoutValue("icon-size",i)}update(t,i){this._anchorProp&&(this.anchor=this._anchorProp.getValue(t,i)),this._offsetProp&&(this.offset=this._offsetProp.getValue(t,i)),this._paddingProp&&(this.padding=this._paddingProp.getValue(t,i)),this._rotateProp&&(this.rotate=this._rotateProp.getValue(t,i)),this._sizeProp&&(this.size=this._sizeProp.getValue(t,i))}}class T{constructor(t,i,e){let a;this.allowOverlap=t.getLayoutValue("text-allow-overlap",i),this.ignorePlacement=t.getLayoutValue("text-ignore-placement",i),this.keepUpright=t.getLayoutValue("text-keep-upright",i),this.optional=t.getLayoutValue("text-optional",i),this.rotationAlignment=t.getLayoutValue("text-rotation-alignment",i),2===this.rotationAlignment&&(this.rotationAlignment=e?0:1),a=t.getLayoutProperty("text-anchor"),a?.isDataDriven?this._anchorProp=a:this.anchor=t.getLayoutValue("text-anchor",i),a=t.getLayoutProperty("text-justify"),a?.isDataDriven?this._justifyProp=a:this.justify=t.getLayoutValue("text-justify",i),a=t.getLayoutProperty("text-letter-spacing"),a?.isDataDriven?this._letterSpacingProp=a:this.letterSpacing=t.getLayoutValue("text-letter-spacing",i),a=t.getLayoutProperty("text-line-height"),a?.isDataDriven?this._lineHeightProp=a:this.lineHeight=t.getLayoutValue("text-line-height",i),a=t.getLayoutProperty("text-max-angle"),a?.isDataDriven?this._maxAngleProp=a:this.maxAngle=t.getLayoutValue("text-max-angle",i),a=t.getLayoutProperty("text-max-width"),a?.isDataDriven?this._maxWidthProp=a:this.maxWidth=t.getLayoutValue("text-max-width",i),a=t.getLayoutProperty("text-offset"),a?.isDataDriven?this._offsetProp=a:this.offset=t.getLayoutValue("text-offset",i),a=t.getLayoutProperty("text-padding"),a?.isDataDriven?this._paddingProp=a:this.padding=t.getLayoutValue("text-padding",i),a=t.getLayoutProperty("text-rotate"),a?.isDataDriven?this._rotateProp=a:this.rotate=t.getLayoutValue("text-rotate",i),a=t.getLayoutProperty("text-size"),a?.isDataDriven?this._sizeProp=a:this.size=t.getLayoutValue("text-size",i),a=t.getLayoutProperty("text-writing-mode"),a?.isDataDriven?this._writingModeProp=a:this.writingMode=t.getLayoutValue("text-writing-mode",i)}update(t,i){this._anchorProp&&(this.anchor=this._anchorProp.getValue(t,i)),this._justifyProp&&(this.justify=this._justifyProp.getValue(t,i)),this._letterSpacingProp&&(this.letterSpacing=this._letterSpacingProp.getValue(t,i)),this._lineHeightProp&&(this.lineHeight=this._lineHeightProp.getValue(t,i)),this._maxAngleProp&&(this.maxAngle=this._maxAngleProp.getValue(t,i)),this._maxWidthProp&&(this.maxWidth=this._maxWidthProp.getValue(t,i)),this._offsetProp&&(this.offset=this._offsetProp.getValue(t,i)),this._paddingProp&&(this.padding=this._paddingProp.getValue(t,i)),this._rotateProp&&(this.rotate=this._rotateProp.getValue(t,i)),this._sizeProp&&(this.size=this._sizeProp.getValue(t,i)),this._writingModeProp&&(this.writingMode=this._writingModeProp.getValue(t,i))}}function z(i){const e=i?.getGeometry();if(null==e)return null;let a=1/0,o=1/0,r=-1/0,n=-1/0;for(const t of e)if(t)for(const i of t)a=Math.min(a,i.x),o=Math.min(o,i.y),r=Math.max(r,i.x),n=Math.max(n,i.y);return t(a,o,r,n)}export{d as BackgroundStyleLayer,v as CircleStyleLayer,_ as FillStyleLayer,V as IconLayout,D as IndexItem,L as LineStyleLayer,m as StyleLayer,x as SymbolStyleLayer,T as TextLayout};