rlayers/docs/4804.bundle.js

React Components for OpenLayers

"use strict";(self.webpackChunkrlayers=self.webpackChunkrlayers||[]).push([[4804],{4804:(n,s,a)=>{a.r(s),a.d(s,{default:()=>t});const t='<span class="token comment">/**\n * This example shows how to extend RLayers to include support for your custom component\n */</span>\n\n<span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token constant">JSX</span> <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> <span class="token punctuation">{</span> fromLonLat <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"ol/proj"</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> <span class="token punctuation">{</span> MapboxVectorLayer <span class="token keyword">as</span> VectorMapbox <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"ol-mapbox-style"</span><span class="token punctuation">;</span>\n\n<span class="token keyword">import</span> <span class="token punctuation">{</span> RMap<span class="token punctuation">,</span> RLayer<span class="token punctuation">,</span> RLayerProps <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"rlayers"</span><span class="token punctuation">;</span>\n\n<span class="token comment">/**\n * The properties interface definition\n */</span>\n<span class="token keyword">interface</span> <span class="token class-name">MyLayerMapboxProps</span> <span class="token keyword">extends</span> <span class="token class-name">RLayerProps</span> <span class="token punctuation">{</span>\n  styleUrl<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>\n  accessToken<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\n<span class="token comment">/**\n * A component wrapper for ol/layer/MapboxVector\n */</span>\n<span class="token keyword">class</span> <span class="token class-name">MyLayerMapbox</span> <span class="token keyword">extends</span> <span class="token class-name">RLayer<span class="token operator">&lt;</span>MyLayerMapboxProps<span class="token operator">></span></span> <span class="token punctuation">{</span>\n  ol<span class="token operator">:</span> VectorMapbox<span class="token punctuation">;</span>\n\n  <span class="token comment">// Tiled layers must extend RLayerRaster, non-tiled vector layers must extend RLayerVector</span>\n  <span class="token comment">// This allows you to have the same features as RLayers built-in components</span>\n  <span class="token comment">// Completely custom layers must extend RLayer</span>\n  <span class="token function">constructor</span><span class="token punctuation">(</span>props<span class="token operator">:</span> Readonly<span class="token operator">&lt;</span>MyLayerMapboxProps<span class="token operator">></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token comment">// You must call the parent constructor</span>\n    <span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n    <span class="token comment">// You must create the this.ol object which must be compatible with the this.ol of the parent</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span>ol <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">VectorMapbox</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      <span class="token operator">...</span>props<span class="token punctuation">,</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n    <span class="token comment">// You must enumerate all OpenLayers event sources here</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span>eventSources <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>ol<span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n    <span class="token comment">// And call this function for the event handlers to work</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">attachEventHandlers</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token comment">/**\n * Using your custom component\n */</span>\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">Addon</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token constant">JSX</span><span class="token punctuation">.</span>Element <span class="token punctuation">{</span>\n  <span class="token keyword">return</span> <span class="token punctuation">(</span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">RMap</span></span>\n      <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>example-map<span class="token punctuation">"</span></span>\n      <span class="token attr-name">initial</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> center<span class="token operator">:</span> <span class="token function">fromLonLat</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">2.364</span><span class="token punctuation">,</span> <span class="token number">48.82</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span> zoom<span class="token operator">:</span> <span class="token number">11</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>\n    <span class="token punctuation">></span></span><span class="token plain-text">\n      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MyLayerMapbox</span></span>\n        <span class="token attr-name">styleUrl</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token string">"mapbox://styles/mapbox/bright-v9"</span><span class="token punctuation">}</span></span>\n        <span class="token comment">// Be sure to get your own Mapbox token</span>\n        <span class="token comment">// (this won\'t work in CodePen)</span>\n        <span class="token attr-name">accessToken</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token constant">MAPBOX_TOKEN</span><span class="token punctuation">}</span></span>\n      <span class="token punctuation">/></span></span><span class="token plain-text">\n    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">RMap</span></span><span class="token punctuation">></span></span>\n  <span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n'}}]);