Comment résoudre les erreurs de rectangle noir dans le rendu GeoJSON D3.js ?

Comment réparer un rendu GeoJSON incorrect dans D3.js

Lorsque vous essayez de visualiser des données GeoJSON dans D3.js, il n'est pas rare de rencontrer écarts entre le rendu attendu et le rendu réel. Un problème particulier survient lorsque la sortie affiche un grand rectangle noir au lieu des caractéristiques géographiques souhaitées.

Analyse du problème

Lors de l'inspection du code fourni dans la question, il devient Il est évident que l'erreur réside dans l'ordre d'enroulement des coordonnées. D3.js utilise des mathématiques ellipsoïdales, qui nécessitent un ordre d'enroulement spécifique pour les coordonnées. Malheureusement, le fichier geoJSON contient un mélange d'ordres d'enroulement "dans le sens des aiguilles d'une montre" et "dans le sens inverse des aiguilles d'une montre", conduisant à un rendu incorrect.

Solution

Pour rectifier cela problème, il est nécessaire de s'assurer que toutes les coordonnées du fichier geoJSON ont le bon ordre d'enroulement. Ceci peut être réalisé manuellement en réorganisant les coordonnées ou en utilisant une bibliothèque comme turf.js, qui fournit une méthode pratique pour rembobiner les fonctionnalités.

Exemple de code

Utilisation du Méthode turf.rewind() pour corriger l'ordre d'enroulement :

<code class="javascript">var fixed = features.map(function(feature) {
  return turf.rewind(feature,{reverse:true});
});</code>

Considérations supplémentaires

Bien que la correction de l'ordre d'enroulement résolve le problème du rectangle noir, il convient d'en noter un autre bizarrerie dans D3.js. Contrairement à la spécification geoJSON, D3.js utilise l'ordre d'enroulement opposé (dans le sens inverse des aiguilles d'une montre pour le sens des aiguilles d'une montre et vice versa). Par conséquent, il peut être nécessaire d'inverser l'ordre d'enroulement avant de rembobiner pour garantir un rendu correct.

Visualisation améliorée

En plus de fixer l'ordre d'enroulement, d'ajuster le les paramètres de projection peuvent améliorer la visualisation en ajustant les éléments dans l'espace désigné. Ceci peut être réalisé en utilisant la méthode fitSize pour mettre à l'échelle et traduire les fonctionnalités :

<code class="javascript">// Fit the features to the screen
var projection = d3.geoMercator().fitSize([width, height], features);</code>

En suivant ces étapes, vous pouvez corriger le rendu incorrect des données geoJSON dans D3.js et obtenir une visualisation précise de l'objet souhaité. caractéristiques géographiques.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!