3f:null 40:["$","title",null,{"children":"Seamless Zoomable Map Tiles | 王老狮 | Observable"}] 46:T497,map = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const tile = d3.tile() .extent([[0, 0], [width, height]]) .tileSize(512) .clampX(false); const zoom = d3.zoom() .scaleExtent([1 << 8, 1 << 22]) .extent([[0, 0], [width, height]]) .on("zoom", () => zoomed(d3.event.transform)); const levels = svg.append("g") .attr("pointer-events", "none") .selectAll("g") .data(deltas) .join("g") .style("opacity", showlayers ? 0.3 : null); svg .call(zoom) .call(zoom.transform, mutable transform); function zoomed(transform) { mutable transform = transform; levels.each(function(delta) { const tiles = tile.zoomDelta(delta)(transform); d3.select(this) .selectAll("image") .data(tiles, d => d) .join("image") .attr("xlink:href", d => url(...d3.tileWrap(d))) .attr("x", ([x]) => (x + tiles.translate[0]) * tiles.scale) .attr("y", ([, y]) => (y + tiles.translate[1]) * tiles.scale) .attr("width", tiles.scale) .attr("height", tiles.scale); }); } return svg.node(); }47:[] 44:{"id":"1192ef01380a6799","slug":"seamless-zoomable-map-tiles","title":"Seamless Zoomable Map Tiles","thumbnail":"4bacad1aa3da1504ccd8d23a1d24edb10db04af53590faec2cdbc4e9ba845c47","access_level":"public","create_time":"$D2020-01-15T00:39:50.970Z","update_time":"$D2020-01-15T00:39:50.970Z","view_time":null,"first_public_time":"$D2020-01-15T00:40:20.429Z","has_unpublished_edits":null,"fork":{"id":"93bc0e9a047afbae","slug":"seamless-zoomable-map-tiles","title":"Seamless zoomable map tiles","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"66ec9795bb6d657e","login":"xingxp","name":"王老狮","avatar_url":"https://avatars-next.observableusercontent.com/f756653d0cdfbfc69af6889dc3b51cd0aa826e8fedc1c8297b4e8316d624f9ac","tier":"starter_2024","bio":"数据可视化","following":false},"version":217,"publish_version":217,"role":null,"authored":false,"authors":[{"type":"individual","id":"31d06842858ed35a","login":"xingxp","name":"王老狮","avatar_url":"https://avatars-next.observableusercontent.com/f756653d0cdfbfc69af6889dc3b51cd0aa826e8fedc1c8297b4e8316d624f9ac","tier":null,"bio":"数据可视化","following":false}],"members":[{"type":"individual","id":"31d06842858ed35a","login":"xingxp","name":"王老狮","avatar_url":"https://avatars-next.observableusercontent.com/f756653d0cdfbfc69af6889dc3b51cd0aa826e8fedc1c8297b4e8316d624f9ac","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Seamless Zoomable Map Tiles","cells":[{"id":0,"value":"md`# Seamless Zoomable Map Tiles\n\nThis notebook avoids the flickering in [Zoomable Map Tiles](/@d3/zoomable-map-tiles) by adding [low-resolution](/@d3/tile-zoomdelta) tiles under the main tiles. During zoom, these larger tiles may be visible while the new tiles load in lieu of the white background. This technique also mostly fixes the [subpixel gap issue](/d/32027f96a5d4aa89).\n\nThe marginal cost of the low-resolution tiles is negligible for a zoom delta less than -2; for -1 it is about a quarter the cost of 0. The deltas are defined below; -100 forces the use of the *z*=0 “world” tile. Try editing to see the effect of different deltas.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"viewof showlayers = {\n const form = html``;\n form.i.onchange = () => {\n form.value = form.i.checked;\n form.dispatchEvent(new CustomEvent(\"input\"));\n };\n form.value = form.i.checked;\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"deltas = [-100, -4, -1, 0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"mutable transform = d3.zoomIdentity.translate(width >> 1, height >> 1).scale(1 << 12)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"url = (x, y, z) => `https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/${z}/${x}/${y}${devicePixelRatio > 1 ? \"@2x\" : \"\"}?access_token=pk.eyJ1IjoidG1jdyIsImEiOiJjamN0Z3ZiOXEwanZkMnh2dGFuemkzemE3In0.gibebYiJ5TEdXvwjpCY0jg`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3@5\", \"d3-tile@1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 45:"$44:body"