使用D3.js和GeoJson在地图上的某些坐标上设置一个小图像

Setting a small image on map on some coordinates using D3.js and GeoJson

本文关键字：设置 图像 一个 坐标 js D3 GeoJson 使用 地图      更新时间：2023-09-26

我想将用户给出的一些坐标与geojson文件中的坐标进行比较，如果条件成立，那么我想在坐标定义的位置上绘制一个小的圆形图像（非常小，像符号或其他东西）。我必须在d3.json方法中写些什么才能访问geojson文件中的坐标，对其进行比较并在其上绘制图像？任何帮助都将不胜感激。

这是我的geojson文件的一小部分

{
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": {}, "id":"Andhra Pradesh", "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 80.149167, 13.618300 ], [ 80.142031, 13.544708 ], [ 80.126421, 13.584849 ], [ 80.158087, 13.591093 ], [ 80.120622, 13.605812 ], [ 80.149167, 13.618300 ] ] ], [ [ [ 82.258801, 16.689980 ], [ 82.285562, 16.697563 ], [ 82.368074, 16.723877 ], [ 82.311876, 16.602562 ], [ 82.258801, 16.689980 ] ] ],

我相信您需要另一个数据集来满足您的需求。geometry集合中的这些坐标用于绘制路径。请参阅文档：

http://geojson.org/geojson-spec.html#geometry-对象

换句话说，这些只是你在地图上看到的"线"（边界）的坐标。我相信你想比较每个州（路径）内位置的坐标，比如城市或其他POI，对吗？

在这种情况下，您有两个选项：您可以根据用户提供的坐标轻松绘制一个圆圈或其他任何东西，或者如果这些坐标是城市，您可以搜索另一个包含这些城市地理数据的JSON文件，并将用户的输入与这些坐标进行比较。

一旦你有了这些坐标（让我们称它们为longitude和latitude），你就可以这样绘制它们：

svg.append("circle")
    .attr("cx", function() {
        return projection(longitude);
    })
    .attr("cy", function(d) {
        return projection(latitude);
    })
    .attr("r", whatever)
    .style("fill", whatever);

svg是用于附加SVG的变量，projection是用于设置投影的变量。

相关文章：