javascript - 如何在传单中投影像素坐标?

标签 javascript leaflet geojson tms

我正在尝试基于 16384x16384 像素的图像创建 map ,但我还想使用该给定图像的像素坐标在特定位置添加标记。

我创建了一个图 block 层、一个 map 元素并设置了最大边界,这样我就无法滚动出图像,使用以下代码:

    var map = L.map('map', {
        maxZoom: 6,
        minZoom: 2,
        crs: L.CRS.Simple
    }).setView([0, 0], 2);
    var southWest = map.unproject([0,16384], map.getMaxZoom());
    var northEast = map.unproject([16384,0], map.getMaxZoom());
    map.setMaxBounds(new L.LatLngBounds(southWest, northEast));

    L.tileLayer('tiles/{z}/{x}/{y}.png', {
        tms: true
    }).addTo(map);

我想添加到 map 的点以 GeoJSON 格式存储在外部文件中,它们看起来像这样 http://www.de-egge.de/maps/terranigma/terraPoints.js

我使用这段代码加载它们:

var terraPoints = new L.geoJson(points, {
        onEachFeature: function (feature, layer) {
            layer.bindPopup(
                "<b>Ort: </b>" + feature.properties["points[, 1]"] 
            );
        }
    });

    map.addLayer(terraPoints);

当然,它们不会出现,因为引用系统不匹配。这些点使用像素坐标,但我的 map 使用地理坐标。

有没有办法在加载点时“取消投影”点?

非常感谢任何帮助,并提前致谢!

最佳答案

    var geoJsonTest = new L.geoJson(geojsonFeature, {
    coordsToLatLng: function (newcoords) {
        return (map.unproject([newcoords[1], newcoords[0]], map.getMaxZoom()));
    },
    pointToLayer: function (feature, coords) {      
        return L.circleMarker(coords, geojsonMarkerOptions);
    }
});

如果您还没有弄清楚,这就是您的使用方式。看到坐标是倒置的,我在选项中改变了它们。非常适合我。

关于javascript - 如何在传单中投影像素坐标?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19653629/

相关文章:

javascript - nodemon 只监视 JavaScript 文件而不是 TypeScript

javascript - 单击同一 div 内的按钮时关闭 div

javascript - 在 express 中访问 Controller 的查询结果

javascript - 更新传单中的标记

javascript - 简单的 Leaflet.js 标记放置

javascript - 扩展 Highmaps 副作用

javascript - 扩展 jQuery 插件,无需触及原始插件代码

javascript - 如何显示可以溢出 map 容器的标记工具提示?

python - geoJSON:如何创建具有动态数量特征的FeatureCollection?

javascript - D3.js - json 文件无法加载