Javascript - 洪水灾害 map

Question

我有一个 XYZ 格式的大数据(400 万行)。我想画这样的 map http://en-gb.topographic-map.com/places/Ho-Chi-Minh-City-6643171/

尝试了 heatmap.js(数据太大)和 plot.ly countor map(无法缩放)但无法使用。谢谢。

Answer 1

在您的示例中，它不是热图，而是由 API 在 http://wms.ess-ws.nrcan.gc.ca 上生成的叠加图像网页端。这是它在示例站点 js 中的样子。

Map.mapTypes.set('Toporama', new google.maps.ImageMapType({
        getTileUrl: function(Coordinates, Zoom) {
            Copyrights.innerHTML = '<a href="http://www.nrcan.gc.ca" target="_blank">&copy; Natural Resources Canada</a>';
            var Projection = Map.getProjection();
            var Factor = Math.pow(2, Zoom);
            var Bottom = Projection.fromPointToLatLng(new google.maps.Point(Coordinates.x * 256 / Factor, (Coordinates.y + 1) * 256 / Factor));
            var Top = Projection.fromPointToLatLng(new google.maps.Point((Coordinates.x + 1) * 256 / Factor, Coordinates.y * 256 / Factor));
            return 'http://wms.ess-ws.nrcan.gc.ca/wms/toporama_en?layers=WMS-Toporama&format=image/png&srs=EPSG:4326&service=WMS&version=1.1.1&request=GetMap&styles=&bbox=' + Bottom.lng() + ',' + Bottom.lat() + ',' + Top.lng() + ',' + Top.lat() + '&width=256&height=256';
        },
        tileSize: new google.maps.Size(256, 256),
        name: 'Toporama (Canada)',
        minZoom: 6,
        maxZoom: 20
    }));

如果您可以为您的数据使用或创建类似的 API，它也可能是您的答案。在我看来，这样的大数据不应该由浏览器处理。