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; } } }

d3サンプルを使ったトラブルベクターベースマップ

SimonJackson

私は、本当にかっこいいD3サンプルを見つけました。これを、私が展示する予定のプロトタイプHubページに組み込みたいと思っています。<\/P>

<\/P>

ホストしているフィーチャサービスと従来のタイルサービスを参照するようにスクリプトを無理やり動かすことに成功しました。<\/P>

こちらでご覧いただけます。これはEsri leafletライブラリを使用していません。<\/P>

<\/P>

しかし、私のページの他の地図と合わせるために、Esri leafletライブラリを含めて、Esri dark blue vector tile serviceを組み込みたいのです。<\/P>

<\/P>

header内でleaflet-0.5からleaflet@1.2.0（the vector sampleから）に切り替え、最新のCSSを使用すると、コンソールに以下のエラーが表示されます。<\/P>

<\/P>

leaflet.js:5 Uncaught Error: The provided object is not a Layer.
at e.addLayer (leaflet.js:5)
at e.addTo (leaflet.points-layer.js:44)
at d3_map_vt.html:76
at d3.v3.js:2011
at Object.<anonymous> (d3.v3.js:1996)
at Object.event (d3.v3.js:504)
at XMLHttpRequest.respond (d3.v3.js:1949)<\/P>
<\/BLOCKQUOTE>
<\/P>
この問題の解決についてぜひ助けていただきたいです。 JSFiddleで自分のサンプルを再現しようとしましたが、動作させることができませんでした。(JSFiddle)<\/P>

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

Esri Leaflet

Accepted answers

JohnGravois

you're in luck. that great sample is plug and play in Leaflet 1.x by making one small tweak

// line 1 of leaflet.points-layer.js
L.PointsLayer = L.Layer.extend({ // instead of L.Class    
  includes: L.Evented.prototype, // instead of L.Mixin.Events

All comments

SimonJackson

Thats all good - load times are probably ok.

I notice I have lost the popups by switching out to using an esri vector basemap. Any quick tips for that?

If I put a watchpoint on line 134, it does not seem to fire when I click a circle, when previously without bringing in the esri-leaflet library and using the vector layer, it did.

circles.on('click', function (d, i)

The previous sample let me interact with the graphics that I am displaying on the map. I saw some of the esri-leaflet samples that work with the featurelayers that you add to the map, but hoping I can avoid reworking too much of the existing code. Perhaps there is something I need to disable on the map properties?

JohnGravois

> Any tips on how I could speed things up in the sample?

i wish i did. i've noticed startup times that are slower than i'd expect with esri vector tile sources before and i don't know what causes it. and the 300kb wrapped plugin certainly helping.

SimonJackson

Massive thanks John - would have taken me 20x as long to have spotted that.

The new version using the dark blue canvas can be seen here.

A follow on question. I know this is an experimental add-in for the Esri Leaflet library, but the vector basemap appears to perform slower than the previous 'traditional' tiled service did.

Any tips on how I could speed things up in the sample?

JohnGravois

you're in luck. that great sample is plug and play in Leaflet 1.x by making one small tweak

// line 1 of leaflet.points-layer.js
L.PointsLayer = L.Layer.extend({ // instead of L.Class    
  includes: L.Evented.prototype, // instead of L.Mixin.Events

会話に参加する

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

クイックリンク

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