同僚の小さな leaflet アプリケーションを手伝っています。 'L.tiledMapLayer' メソッドを使って独自のベースマップサービスを追加しようとすると問題が発生しています。問題は私たちのマップサービスにあると思われますが、このサービスは複数のカスタム javascript アプリケーションや他の ESRI および GeoCortex アプリケーションで正常に使用しています。 ESRI のベースマップ URL を使用すると、問題なく動作するようです: L.esri.tiledMapLayer({ url: " http:\/\/services.arcgisonline.com\/arcgis\/rest\/services\/World_Topo_Map\/MapServer " }).addTo(map); しかし、ESRI の URL を独自の（非セキュアで公開アクセス可能な）タイルサービスに置き換えると、ベースマップがレンダリングされず、開発者ツールにはタイルの 404 Not found エラーが多数表示されます。 L.esri.tiledMapLayer({ url: " https:\/\/maps2.tucsonaz.gov\/arcgis\/rest\/services\/BaseMaps\/gisBaseMap_Topo\/MapServer " }).addTo(map); これは私たちのサービス内の設定によるもので、現在の構成では Leaflet で動作しないのでしょうか？ありがとうございます - Allen

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Leaflet ベースマップの問題

AllenScully

同僚の小さな leaflet アプリケーションを手伝っています。 'L.tiledMapLayer' メソッドを使って独自のベースマップサービスを追加しようとすると問題が発生しています。問題は私たちのマップサービスにあると思われますが、このサービスは複数のカスタム javascript アプリケーションや他の ESRI および GeoCortex アプリケーションで正常に使用しています。 <\/P>

ESRI のベースマップ URL を使用すると、問題なく動作するようです:<\/P>

<\/P>

L.esri.tiledMapLayer({
url: "<\/SPAN>http:\/\/services.arcgisonline.com\/arcgis\/rest\/services\/World_Topo_Map\/MapServer<\/A>"<\/SPAN>
}).addTo(map);<\/P>
<\/P>
しかし、ESRI の URL を独自の（非セキュアで公開アクセス可能な）タイルサービスに置き換えると、ベースマップがレンダリングされず、開発者ツールにはタイルの 404 Not found エラーが多数表示されます。<\/P>
<\/P>
L.esri.tiledMapLayer({
url: "<\/SPAN>https:\/\/maps2.tucsonaz.gov\/arcgis\/rest\/services\/BaseMaps\/gisBaseMap_Topo\/MapServer<\/A>"<\/SPAN>
}).addTo(map);<\/P>
<\/P>
これは私たちのサービス内の設定によるもので、現在の構成では Leaflet で動作しないのでしょうか？<\/P>
<\/P>
ありがとうございます - <\/P>
Allen<\/P>

タグ付けされた投稿をもっと見る

Esri Leaflet

Accepted answers

JohnGravois

there were a few different things going on causing problems.

1. your own service doesn't support making CORS requests. thats okay, but its necessary for you to pass through `useCors: false` in your own constructor

2. even though your service advertises itself as wkid: 3857, its actually using a custom XY for its origin, which is problematic when the internal API attempts to translate the global LODs the service is missing.

3. there was a bug in esri-leaflet that led to us attempting to override custom LODs provided in code when we recognized the coordinate system as web mercator. (i fixed that here and published v2.1.2).

all that said, in our latest release, we display the service correctly, but its still up to you to describe the custom projection in your own code.

<SPAN class="keyword token">var</SPAN> crs <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">L<SPAN class="punctuation token">.</SPAN>Proj<SPAN class="punctuation token">.</SPAN>CRS</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"EPSG:3857"</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">"+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
 origin<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="operator token">-</SPAN><SPAN class="number token">20037700</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">30241100</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// your origin is custom</SPAN>
 resolutions<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>
 <SPAN class="number token">611.4962262813797</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// you are missing some smaller scale LODS as well</SPAN>
 <SPAN class="number token">305.74811314055756</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="number token">152.87405657041106</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// ...</SPAN>
 <SPAN class="punctuation token">]</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> map <SPAN class="operator token">=</SPAN> L<SPAN class="punctuation token">.</SPAN><SPAN class="token function">map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'map'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
 crs<SPAN class="punctuation token">:</SPAN> crs
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">setView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">32.2217</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">110.926</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">2</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

L<SPAN class="punctuation token">.</SPAN>esri<SPAN class="punctuation token">.</SPAN><SPAN class="token function">tiledMapLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
 url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token"><SPAN>'</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fmaps2.tucsonaz.gov%2Farcgis%2Frest%2Fservices%2FBaseMaps%2FgisBaseMap_Topo%2FMapServer" target="_blank">https://maps2.tucsonaz.gov/arcgis/rest/services/BaseMaps/gisBaseMap_Topo/MapServer</A><SPAN>'</SPAN></SPAN><SPAN class="punctuation token">,</SPAN>
 useCors<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">addTo</SPAN><SPAN class="punctuation token">(</SPAN>map<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

live sample: http://jsbin.com/yovezox/edit?html,output

(based on the sample in our documentation here)

All comments

JohnGravois

my pleasure. to answer your follow up question, no. i'd expect the workflow you describe above to result in a published service CRS that is identical to Google/Bing/ArcGIS Online.

https://services.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer

AllenScully

John - Many thanks for looking in to this and the detailed response. This works well, and has helped us understand some implications of our basemap-building decisions.

So just to clarify - the source data used to build our basemap is in our local State Plane system but we make the data frame Web Mercator (without re-projecting the individual feature classes) in order to make it more friendly in web applications. This is what creates the need for the extra coding within leaflet, correct?

Allen

JohnGravois

there were a few different things going on causing problems.

1. your own service doesn't support making CORS requests. thats okay, but its necessary for you to pass through `useCors: false` in your own constructor

all that said, in our latest release, we display the service correctly, but its still up to you to describe the custom projection in your own code.

<SPAN class="keyword token">var</SPAN> crs <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">L<SPAN class="punctuation token">.</SPAN>Proj<SPAN class="punctuation token">.</SPAN>CRS</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"EPSG:3857"</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">"+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
 origin<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="operator token">-</SPAN><SPAN class="number token">20037700</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">30241100</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// your origin is custom</SPAN>
 resolutions<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>
 <SPAN class="number token">611.4962262813797</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// you are missing some smaller scale LODS as well</SPAN>
 <SPAN class="number token">305.74811314055756</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="number token">152.87405657041106</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// ...</SPAN>
 <SPAN class="punctuation token">]</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> map <SPAN class="operator token">=</SPAN> L<SPAN class="punctuation token">.</SPAN><SPAN class="token function">map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'map'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
 crs<SPAN class="punctuation token">:</SPAN> crs
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">setView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">32.2217</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">110.926</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">2</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

L<SPAN class="punctuation token">.</SPAN>esri<SPAN class="punctuation token">.</SPAN><SPAN class="token function">tiledMapLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
 url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token"><SPAN>'</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fmaps2.tucsonaz.gov%2Farcgis%2Frest%2Fservices%2FBaseMaps%2FgisBaseMap_Topo%2FMapServer" target="_blank">https://maps2.tucsonaz.gov/arcgis/rest/services/BaseMaps/gisBaseMap_Topo/MapServer</A><SPAN>'</SPAN></SPAN><SPAN class="punctuation token">,</SPAN>
 useCors<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">addTo</SPAN><SPAN class="punctuation token">(</SPAN>map<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

live sample: http://jsbin.com/yovezox/edit?html,output

(based on the sample in our documentation here)

会話に参加する

サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。

クイックリンク

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.