Cuando muestro un mapa de Japón con mapbox gl js, veo una mezcla de notación en japonés e inglés.
Se muestra en ubicación japonesa.<\/P>
¿Esto está soportado actualmente?<\/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 \u8868\u793a de mapa de fondo y GeoJSON<\/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", \/\/ el id del elemento div
style: `https:\/\/basemaps-api.arcgis.com\/arcgis\/rest\/services\/styles\/${basemapEnum}?type=style&apiKey=${apiKey}`,
zoom: 12, \/\/ zoom inicial
center: [139.72514, 35.60847], \/\/ ubicación inicial [longitud, latitud]
pitch: 45,
hash: true
});
map.addControl(new mapboxgl.NavigationControl());
let scale = new mapboxgl.ScaleControl({
maxWidth: 200,
unit: 'metric'
});
map.addControl(scale);
map.once("load", () => {
\/\/ Este código se ejecuta una vez que el estilo base ha terminado de cargar.
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, \/\/ agrupa dos kankojohoShinagawa100kei si están a menos de 20 píxeles de distancia
clusterMaxZoom: 14 \/\/ muestra todos los kankojohoShinagawa100kei individualmente desde el zoom 14 en adelante
\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 píxeles para clusters, 5 píxeles para otros casos
}
\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] \/\/ mueve la etiqueta ligeramente hacia abajo para mejorar el centrado
},
paint: {
"text-color": "white"
}
\u3000});
map.on("click", "kankojohoShinagawa100kei-circle", (e) => {
const trailhead = e.features[0];
new mapboxgl.Popup()
.setHTML(`<b>Nombre: ${trailhead.properties.name}<\/b>
<br\/><b>Categoría1:<\/b>${trailhead.properties.category}
<br\/><b>Categoría2:<\/b>${trailhead.properties.category_supplement}
<br\/><b>Detalles:<\/b>${trailhead.properties.description_ja}
<br\/><b>Ubicación:<\/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>
