D3.js栅格瓦片底图叠加美国州矢量数据渲染失败求助

核心问题点 #

• 异步数据未正确处理：states是Promise对象，直接访问states.features时数据还未加载完成，导致数据绑定无效。
• 矢量图层更新逻辑错误：在zoomed函数中仅用enter()添加路径，未处理更新逻辑，且每次缩放都尝试重新创建元素，导致初始加载无元素、后续无法正确更新。
• 投影与缩放变换不匹配：初始缩放的负号处理导致坐标翻转，矢量数据被渲染到可视区域外。
• 瓦片URL协议问题：使用http协议加载OSM瓦片可能因混合内容被浏览器拦截，需改为https。

修复后的完整代码 #

function testMap() {
    // 先加载矢量数据，在回调中初始化地图
    d3.json("https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json")
        .then(topology => {
            const states = topojson.feature(topology, topology.objects.states).features;
            
            const width = window.innerWidth,
                  height = window.innerHeight;

            const map = d3.select(".visualizations").append("div")
                .attr("class", "map");

            const layer = map.append("div")
                .attr("class", "layer");

            const svg = d3.select(".layer").append("svg")
                .attr("width", width)
                .attr("height", height);

            // 创建专门存放矢量路径的g元素
            const pathGroup = svg.append("g");

            const projection = d3.geoMercator()
                .scale(1 / (2 * Math.PI))
                .translate([0, 0]);

            const render = d3.geoPath(projection);

            const tile = d3.tile()
                .extent([[0, 0], [width, height]])
                .tileSize(512);

            const zoom = d3.zoom()
                .scaleExtent([1 << 10, 1 << 15])
                .extent([[0, 0], [width, height]])
                .on("zoom", ({transform}) => zoomed(transform));

            let image = svg.append("g")
                .attr("pointer-events", "none")
                .selectAll("image");

            const initialScale = 1 << 12;
            const initialCenter = [-98 - 35 / 60, 39 + 50 / 60];

            // 调整初始变换，去掉多余的负号翻转
            svg.call(zoom)
                .call(zoom.transform, d3.zoomIdentity
                    .translate(width / 2, height / 2)
                    .scale(initialScale)
                    .translate(...projection(initialCenter).map(d => -d)));

            // 先初始化矢量路径
            pathGroup.selectAll("path")
                .data(states)
                .enter()
                .append("path")
                .attr("class", "mapFocus")
                .attr("fill", "none") // 确保路径可见，可根据需求调整
                .attr("stroke", "#ff0000")
                .attr("stroke-width", 1.5);

            function zoomed(transform) {
                const tiles = tile(transform);

                // 更新瓦片图层
                image = image.data(tiles, d => d).join("image")
                    .attr("href", d => `https://${["a","b","c"][d[1] % 3]}.tile.openstreetmap.org/${d[2]}/${d[0]}/${d[1]}.png`)
                    .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);

                // 更新投影参数
                projection
                    .scale(transform.k / (2 * Math.PI))
                    .translate([transform.x, transform.y]);

                // 更新所有矢量路径的d属性
                pathGroup.selectAll("path")
                    .attr("d", render);
            }
        })
        .catch(err => console.error("加载矢量数据失败:", err));
}

关键修复说明 #

1. 异步数据处理：将地图初始化逻辑放在d3.json的then回调中，确保数据加载完成后再绑定到DOM元素。
2. 矢量图层管理：创建单独的pathGroup元素存放所有州路径，初始时一次性创建所有路径，缩放时仅更新d属性，避免重复创建元素。
3. 初始变换修正：调整初始缩放的translate逻辑，去掉负号翻转，确保矢量数据渲染在可视区域内。
4. 样式调整：给路径添加fill和stroke样式，确保默认状态下可见（可根据需求修改颜色和宽度）。
5. 瓦片URL修正：改用https协议加载OSM瓦片，避免浏览器混合内容拦截。

内容的提问来源于stack exchange，提问作者Frank Jimenez