Lorsque j'affiche une carte du Japon avec mapbox gl js, je vois un mélange de notations japonaises et anglaises.
Elle est affichée en emplacement japonais.<\/P>
Est-ce actuellement pris en charge ?<\/P>
<\/span><\/P>
<\/P>
<\/P>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" \/>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" \/>
<script src="https:\/\/api.tiles.mapbox.com\/mapbox-gl-js\/v1.12.0\/mapbox-gl.js"><\/script>
<link href="https:\/\/api.tiles.mapbox.com\/mapbox-gl-js\/v1.12.0\/mapbox-gl.css" rel="stylesheet" \/>
<title>Mapbox GL JS \u80cc\u666f\u5730\u56f3\u8868\u793a\u3068 GeoJSON \u8868\u793a<\/title>
<style>
html,
body,
#map {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #323232;
}
<\/style>
<\/head>
<body>
<div id="map"><\/div>
<\/body>
<script>
const apiKey = "AAPKe9fefdc8839248fe8916671a8d6722dd8yIiVGa4rmTt7LKcvznc-up0JQLLS5vW9FQ7RM1TfmZ8uOs5y6TGbZ3Q6QLmlFsB";
const basemapEnum = "ArcGIS:Streets";
const map = new mapboxgl.Map({
container: "map", \/\/ l'id de l'élément div
style: `https:\/\/basemaps-api.arcgis.com\/arcgis\/rest\/services\/styles\/${basemapEnum}?type=style&apiKey=${apiKey}`,
zoom: 12, \/\/ zoom de départ
center: [139.72514, 35.60847], \/\/ emplacement de départ [longitude, latitude]
pitch: 45,
hash: true
});
map.addControl(new mapboxgl.NavigationControl());
let scale = new mapboxgl.ScaleControl({
maxWidth: 200,
unit: 'metric'
});
map.addControl(scale);
map.once("load", () => {
\/\/ Ce code s'exécute une fois que le style de base a fini de charger.
map.addSource("kankojohoShinagawa100kei", {
type: "geojson",
data: "https:\/\/services5.arcgis.com\/HzGpeRqGvs5TMkVr\/arcgis\/rest\/services\/kankojohoShinagawa100kei\/FeatureServer\/0\/query?f=pgeojson&where=1=1&outFields=*",
cluster: true,
clusterRadius: 20, \/\/ regroupe deux kankojohoShinagawa100kei si elles sont à moins de 20 pixels l'une de l'autre
clusterMaxZoom: 14 \/\/ affiche tous les kankojohoShinagawa100kei individuellement à partir du zoom 14
\u3000});
\u3000map.addLayer({
id: "kankojohoShinagawa100kei-circle",
type: "circle",
source: "kankojohoShinagawa100kei",
paint: {
"circle-color": "hsla(0,0%,0%,0.75)",
"circle-stroke-width": 1.5,
"circle-stroke-color": "white",
"circle-radius": ["case", ["get", "cluster"], 10, 5] \/\/ 10 pixels pour les clusters, 5 pixels sinon
}
\u3000});
\u3000map.addLayer({
id: "kankojohoShinagawa100kei-cluster-count",
type: "symbol",
source: "kankojohoShinagawa100kei",
layout: {
"text-font": ["Arial Bold"],
"text-field": ["get", "point_count"],
"text-offset": [0, 0.1] \/\/ déplace légèrement l'étiquette vers le bas pour améliorer le centrage
},
paint: {
"text-color": "white"
}
\u3000});
map.on("click", "kankojohoShinagawa100kei-circle", (e) => {
const trailhead = e.features[0];
new mapboxgl.Popup()
.setHTML(`<b>Nom : ${trailhead.properties.name}<\/b>
<br\/><b>Catégorie1 :<\/b>${trailhead.properties.category}
<br\/><b>Catégorie2 :<\/b>${trailhead.properties.category_supplement}
<br\/><b>Détails :<\/b>${trailhead.properties.description_ja}
<br\/><b>Emplacement :<\/b>${trailhead.properties.location}`
)
.setLngLat(trailhead.geometry.coordinates)
.addTo(map);
});
map.on("mouseenter", "kankojohoShinagawa100kei-circle", () => {
map.getCanvas().style.cursor = "pointer";
});
map.on("mouseleave", "kankojohoShinagawa100kei-circle", () => {
map.getCanvas().style.cursor = "";
});
});
<\/script>
<\/html><\/code><\/pre>
<\/P>
<\/P>
https:\/\/valuecreation.github.io\/mapbox-gl-js-samples\/20210131\/#12\/#35.60847\/#139.72514\/#0\/#45<\/A><\/P>
<\/P>
