Comment créer un artefact de carte de tuiles vectorielles Maputnik prend en charge le géoserveur

Mots-clés: maputnik, géoserveur, carte vectorielle, tuile vectorielle, mapbox, mapboxgl, correspondance de carte, correspondance de couleur de carte

J'ai toujours voulu créer un outil de correspondance de carte vectorielle similaire aux cartes Baidu et Gaode.

Outil de correspondance de cartes personnalisées Baidu:

Outil de correspondance de cartes personnalisées AutoNavi:

J'ai effectué plusieurs recherches sur Internet, mais je ne l'ai pas trouvé.

J'ai accidentellement entendu parler de Maputnik à partir de ce blog , et après l'avoir manipulé pendant un moment, j'ai l'impression que je suis trop tard pour me rencontrer. Correct! C'est ce que je recherche.

Qu'est-ce que Maputnik? Quel en est l'usage?

Maputnik est un éditeur visuel open source de spécifications de style Mapbox. C'est la même chose que le studio Mapbox de Mapbox, l'éditeur de carte personnalisé de Baidu Maps et l'éditeur de carte personnalisé d'AutoNavi Maps. Ils sont tous utilisés pour éditer des tuiles vectorielles. Le style de la carte, qui est utilisée avec la carte.

Avec Maputnik, vous pouvez publier des cartes comme celle-ci,

Publier des tuiles vectorielles avec geoserver
Utilisez Maputnik pour configurer le style de carte pour les tuiles vectorielles ci-dessus
Utilisez mapbox pour appeler des tuiles vectorielles et appliquez le style de carte ci-dessus, restituer l'affichage de la carte au premier plan

Par rapport à mapbox studio, Maputnik est open source et peut être utilisé localement gratuitement. Vous n'avez plus besoin de télécharger vos propres données cartographiques sur le serveur mapbox. Par conséquent, vous n'êtes pas soumis à la limite mensuelle de la quantité de données téléchargées par le Compte gratuit mapbox Limitation du nombre d'appels cartographiques.

Site officiel de maputnik: https://maputnik.github.io/

Maputnik github 地址： https: //github.com/maputnik/editor

Adresse officielle de l'expérience en ligne de Maputnik: https://maputnik.github.io/editor/

Dans le contexte de la création de Maputnik , l'auteur a voulu créer un ensemble de solutions SIG open source contre mapbox.

Les problèmes rencontrés

J'ai rencontré un problème lors du chargement des tuiles vectorielles publiées par geoserver avec Maputnik version 1.7.0. La couche chargée ne s'affichait pas. Ce problème me préoccupe depuis plusieurs jours. Je suis allé chez Baidu et Google sur Internet. Il y avait très peu de sujets pertinents information et pas de réponse.

Est-il possible que les armes que j'ai rencontrées difficiles à rencontrer passent comme ça? Non, je ne le permets pas!

L'effort a porté ses fruits. Après quelques jours de lancer, j'ai enfin découvert le problème. Laissez-moi vous en parler en détail.

Dépanner

Lorsque j'ai constaté que la carte n'était pas affichée, j'ouvrais habituellement les outils de développement du navigateur.Lorsque j'ai constaté que lors d'un zoom ou d'un glissement de la carte, le navigateur a demandé les tuiles, mais elles n'ont pas réussi.

Copiez l'une des adresses demandées, ouvrez-la uniquement dans le navigateur et consultez le message d'erreur renvoyé par geoserver indiquant que la vignette demandée dépasse la plage de données.

L'API de Maputnik map utilise mapboxgl, il peut donc être plus facile de résoudre le problème en appelant les tuiles vectorielles publiées directement avec mapboxgl. Il existe encore de nombreux articles sur Internet sur la manière dont mapboxgl appelle les tuiles vectorielles geoserver. J'ai écrit un exemple pour référence. Exécutez l'exemple et les tuiles résultantes peuvent être correctement demandées et affichées.

Code:

var map = new mapboxgl.Map({
    
    
	container: 'map',
	style: 'mapbox://styles/mapbox/light-v10',
	zoom: 3,
	center: [108.34942054748535,37.83543237333567]
});

map.on('load', function() {
    
    
	map.addLayer({
    
    
		"id": "mapillary",
		"type": "line",
		"source": {
    
    
			"type": "vector",
			'scheme':'tms',
			"tiles": ["http://192.168.50.198:7000/geoserver/gwc/service/tms/1.0.0/china%3Acity_region@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf"],
		},
		"source-layer": "city_region",
		"paint": {
    
    
			"line-opacity": 0.6,
			"line-color": "rgb(53, 175, 109)",
			"line-width": 2
		}
	}, 'waterway-label');
});

effet:

C'est un peu intéressant, il semble qu'il y ait toujours un problème avec la configuration d'appel de Maputnik. Ouvrez l'outil de développement du navigateur et constatez que le nombre dans l'adresse de tuile de la demande d'échantillon est beaucoup plus grand que le nombre dans maputnik.

Faites glisser la carte dans maputnik. Trouvez le même numéro de tuile que dans l'exemple et constatez que la carte a fonctionné jusqu'à l'hémisphère sud.

Quelle pourrait en être la raison? Peut-être que la taille des tuiles demandées est différente, par exemple, l'une est 256x256 et l'autre est 512x512. Habituellement, cette situation causera également les problèmes ci-dessus, et le nombre sera exactement la moitié la différence.

Mais maintenant, le nombre ne représente pas la moitié de la différence, alors combien de tuiles vectorielles sont publiées par geoserver? Quelles sont les règles pour demander dans Maputnik? Avec cette question à l'esprit, j'ai décidé d'étudier l'API de mapboxgl pour voir si je pouvais trouver quelque chose.

Dans le code de l'exemple ci-dessus, la source de données est configurée via source

"source": {
    
    
	"type": "vector",
	'scheme':'tms',
	"tiles": ["http://192.168.50.198:7000/geoserver/gwc/service/tms/1.0.0/china%3Acity_region@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf"],
},

Il y a trois paramètres, typeet tilesle sens de somme est facile à comprendre. schemeQu'est-ce que cela signifie?

Vérifiez l'API de mapboxgl, l'explication du schéma est la suivante:

Ceci xyzet tmsqu'est-ce que cela signifie?

Baidu a estimé plus tard que ce blog était assez clair. Ce sont deux protocoles pour demander des tuiles. Différents protocoles ont des règles différentes pour la numérotation des tuiles. Dans le xyzprotocole, Y est calculé à partir du haut, et dans le tmsprotocole, Y est calculé à partir du haut . Calculez à partir du bas. mapboxgl utilise le xyzprotocole par défaut , tandis que le géoserveur publie le tmsprotocole. Il doit donc être défini schemecomme lors de l'appel tms.

Le problème se trouve ici, et je sens que j'ai vu l'aube.

Donc, si le paramètre de l'exemple est schemedéfini sur xyz, y aura-t-il la même erreur que Maputnik? Après avoir essayé, la réponse est oui, la carte a également couru vers l'hémisphère sud.

La vérité devient claire: comme il n'y a pas d' schemeoption de configuration sur l'interface Maputnik et que la schemevaleur par défaut est le xyzprotocole, il ne prend en charge que le xyzprotocole, pas le tmsprotocole, donc les tuiles ne peuvent pas être demandées et la carte ne peut pas être affichée correctement.

Comment résoudre

Le problème est trouvé, la prochaine étape est de savoir comment le résoudre. Il y a deux idées:

geoserver publie un xyzservice de tuiles vectorielles de protocole.
Modifiez le code source de Maputnik et ajoutez des schemeoptions pour le rendre compatible avec le tmsprotocole.

J'ai cherché la première idée par moi-même, et je n'ai trouvé aucun didacticiel connexe. Personnellement, je pense que l'idée deux est plus simple. Il suffit d'ajouter une liste schemedéroulante pour la sélection à la position de la boîte rouge dans l'image ci-dessous pour résoudre le problème problème.

Téléchargez le code source de maputnik, faites une recherche et constatez que vous pouvez modifier les deux emplacements suivants:

1. Ajoutez un contrôle de liste déroulante ici

2. schemeDéfinissez ici la valeur par défaut

ok, viens, fais deux pas

étape

Deux étapes

Haha, l'effet est mis à profit! Le problème est parfaitement résolu.

Pour résumer

Maputnik est un outil de correspondance de tuiles vectorielles, qui peut remplacer mapbox studio et l'utiliser gratuitement.
Par défaut, Maputnik ne prend en charge que les tuiles vectorielles du protocole xyz, et ne prend pas en charge les tuiles vectorielles du protocole tms publié par geoserver.
L'API de carte de Maputnik utilise mapboxgl, et mapboxgl peut prendre en charge le protocole tms en définissant l'option de schéma source.
En modifiant le code source de Maputnik et en ajoutant l'option de schéma, Maputnik peut prendre en charge les tuiles vectorielles de protocole tms publiées par geoserver.

Code source

Code source Maputik prenant en charge les tuiles vectorielles TMS

Adresse d'origine: http://gisarmory.xyz/blog/index.html?blog=maputnikGeoserverVectorTiles

Faites attention au compte public " GIS Weapon Library " et obtenez plus d'articles SIG de haute qualité dans un premier temps.

Cet article utilise le contrat de licence international Creative Commons Attribution - Utilisation non commerciale - Partage 4.0 pour obtenir une licence de la même manière . Bienvenue à réimprimer, utiliser et republier, mais assurez-vous de conserver la signature de l'article "GIS Weapon Library" (y compris le lien: http://gisarmory.xyz/blog/ ), et elle ne doit pas être utilisée à des fins commerciales. les œuvres basées sur cet article doivent faire l'objet de la même émission de licence.