EN
Aller au contenu
Tous les guides

Depuis Esri

Esri, c'est un Map plus un MapView, un World Geocoding Service, et une pile Network Analyst (Route, Service Area, et une douzaine de cousins). unmap, c'est une clé et trois clients. Les métiers qui sont une carte, une recherche ou un itinéraire se correspondent nettement. Le reste de la plateforme ArcGIS ne vient pas avec vous.

Restez sur Esri si l'application est une organisation ArcGIS Online : couches d'entités hébergées, une carte web que vous n'avez pas écrite, Living Atlas, SceneView, ou tout ce qui parle à un FeatureServer. unmap n'a pas d'équivalent pour cela, et prétendre le contraire ferait perdre une semaine. Tout ce qui suit suppose que vous remplacez un fond de carte canadien, un localisateur canadien ou un itinéraire canadien.

npm i @unmap/sdk

La carte

ArcGIS Maps SDK for JavaScript construit un Map (le fond de carte) et un MapView (la caméra). unmap construit les deux en un appel et rend une carte MapLibre.

esriConfig.apiKey = "ESRI_API_KEY";
const map = new Map({ basemap: "arcgis/streets" });
const view = new MapView({
  container: "viewDiv",
  map,
  center: [-114.0719, 51.0447],
  zoom: 11,
});
import { Unmap } from "@unmap/sdk";
 
const unmap = new Unmap({
  key: "um_live_...",
  container: "map",
  center: [-114.0719, 51.0447],
  zoom: 11,
});
résultat en direct
le code qui l’a produit
import { Unmap } from "@unmap/sdk";

const unmap = new Unmap({
  key: "um_live_...",
  container: "map",
  center: [-114.0719, 51.0447],
  zoom: 11,
});

MapView.center est déjà [longitude, latitude]. Vous ne l'inversez pas. arcgis/streets devient style: "base". arcgis/topographic et arcgis/outdoor sont les plus proches d'outdoor. arcgis/dark-gray et arcgis/light-gray sont muted avec mode: "dark" ou mode: "light". Il n'y a pas de fond imagerie. Les douze styles sont sur l'API de cartes.

Les widgets ajoutés avec view.ui.add (Search, Directions, BasemapToggle, Legend) n'existent pas en drop-in. Le zoom et la boussole sont déjà sur la carte. La recherche et les itinéraires sont les deux clients ci-dessous, et vous affichez la liste.

Graphiques et infobulles

Un Graphic sur view.graphics devient un Marker MapLibre. Un PopupTemplate devient un Popup. Pour une FeatureLayer de centaines de points, ajoutez-les comme source GeoJSON : WebGL les dessine, le DOM non.

view.graphics.add(
  new Graphic({
    geometry: { type: "point", longitude: -114.0719, latitude: 51.0447 },
    symbol: { type: "simple-marker", color: "red" },
    popupTemplate: { title: "Calgary Tower" },
  }),
);
import { maplibregl } from "@unmap/sdk";
 
new maplibregl.Marker()
  .setLngLat([-114.0719, 51.0447])
  .setPopup(new maplibregl.Popup().setHTML("<p>Calgary Tower</p>"))
  .addTo(unmap.map!);
résultat en direct
le code qui l’a produit
import { Unmap, maplibregl } from "@unmap/sdk";

const unmap = new Unmap({
  key: "um_live_...",
  container: "map",
  center: [-114.0719, 51.0447],
  zoom: 11,
});

const [place] = await unmap.geocoder.search("Calgary Tower");

new maplibregl.Marker({ color: "#FF3E9A" })
  .setLngLat([place.lng, place.lat])
  .setPopup(new maplibregl.Popup().setText(place.name))
  .addTo(unmap.map!);

view.graphics.remove(graphic) devient marker.remove(). Une URL FeatureLayer (…/FeatureServer/0) n'a pas de jumeau unmap : exportez les entités en GeoJSON et ajoutez une source, ou gardez cette couche chez Esri.

Géocodage

Le World Geocoding Service (findAddressCandidates, suggest, reverseGeocode) et locator.addressToLocations deviennent unmap.geocoder. Il n'y a pas de widget Search à déposer.

const url = new URL("https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer/findAddressCandidates");
url.searchParams.set("address", "Calgary Tower");
url.searchParams.set("f", "pjson");
url.searchParams.set("token", "ESRI_API_KEY");
const data = await (await fetch(url)).json();
const { x, y } = data.candidates[0].location;
view.goTo([x, y]);
const results = await unmap.geocoder.search("Calgary Tower");
const [first] = results;
if (first) unmap.map!.setCenter([first.lng, first.lat]);
const hints = await unmap.geocoder.autocomplete("calgary tow", { limit: 5 });
const here = await unmap.geocoder.reverse(-114.07, 51.05);
const nearby = await unmap.geocoder.nearby("pharmacy", {
  near: [-114.07, 51.05],
  radius: 1000,
});
résultat en direct
le code qui l’a produit
import { Unmap } from "@unmap/sdk";

const unmap = new Unmap({ key: "um_live_..." });

const results = await unmap.geocoder.search("Calgary Tower", { limit: 3 });

Les candidats Esri portent address, location: { x, y }, score, et attributes (Addr_type, PlaceName, …). Les résultats unmap portent id, name, layer, lng, lat, names, et un address plat. Il n'y a pas de magicKey à passer de suggest à find, pas de geocodeAddresses par lot, et pas de contacts ou d'heures ArcGIS Places. La recherche par catégorie est nearby, pas un filtre category sur le localisateur. L'API de géocodage est le contrat.

location chez Esri est { x, y } dans le système de référence de sortie, en général WGS84 lon/lat. Cette paire est déjà [lng, lat].

Itinéraires et zones de desserte

ArcGIS Route (/Route/NAServer/Route_World/solve) et Service Area deviennent router.route et router.isochrone. Les arrêts Esri sont x,y (longitude d'abord). La géométrie qu'Esri renvoie est souvent compressée ou en Web Mercator ; unmap renvoie une LineString GeoJSON WGS84.

const url = new URL("https://route-api.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World/solve");
url.searchParams.set("stops", "-114.0719,51.0447;-113.9871,51.0899");
url.searchParams.set("f", "pjson");
url.searchParams.set("token", "ESRI_API_KEY");
const data = await (await fetch(url)).json();
const route = await unmap.router.route([-114.0719, 51.0447], [-113.9871, 51.0899], {
  mode: "auto",
});
 
unmap.map!.addSource("route", {
  type: "geojson",
  data: { type: "Feature", properties: {}, geometry: route.geometry },
});
unmap.map!.addLayer({
  id: "route",
  type: "line",
  source: "route",
  paint: { "line-color": "#3887be", "line-width": 4 },
});
résultat en direct
le code qui l’a produit
import { Unmap } from "@unmap/sdk";

const unmap = new Unmap({
  key: "um_live_...",
  container: "map",
  center: [-114.03, 51.07],
  zoom: 11,
});

const route = await unmap.router.route([-114.0719, 51.0447], [-113.9871, 51.0899], { mode: "auto" });

unmap.map!.on("load", () => {
  unmap.map!.addSource("route", {
    type: "geojson",
    data: { type: "Feature", properties: {}, geometry: route.geometry },
  });
  unmap.map!.addLayer({
    id: "route-line",
    type: "line",
    source: "route",
    layout: { "line-cap": "round", "line-join": "round" },
    paint: { "line-color": "#FF3E9A", "line-width": 3 },
  });
});

La conduite est auto. La marche est pedestrian. Le vélo est bicycle. Le camion prend un profil de véhicule en mètres et en tonnes, pas les paramètres d'attribut Esri sur un mode de déplacement. Il n'y a pas d'arrêts supplémentaires : une requête est exactement deux points. Il n'y a pas de texte returnDirections, pas d'obstacles, et pas de fenêtres temporelles.

Service Area est la même idée que router.isochrone, avec une surface plus petite : jusqu'à quatre contours, 120 minutes chacun.

const bands = await unmap.router.isochrone([-114.07, 51.05], {
  minutes: [10, 20],
  mode: "auto",
});

Closest Facility, OD Cost Matrix, Location-Allocation et Fleet Routing n'ont pas de jumeau unmap. Une matrice, c'est des appels route répétés, et vous sentirez le compteur. L'API d'itinéraires documente les modes, le profil camion et ce qui échoue hors du Canada.

Ce qui n'a pas d'équivalent

  • Couches d'entités, MapServer, FeatureServer et couches hébergées. Exportez en GeoJSON ou gardez-les chez Esri.
  • Cartes web ArcGIS Online, Living Atlas et Experience Builder.
  • SceneView et 3D.
  • Fonds imagerie et hybrides.
  • Analyse spatiale comme service (tampon, intersection, géoenrichissement).
  • Géocodage par lot, contacts Places et suggest magicKey.
  • Closest Facility, matrice OD, Location-Allocation, obstacles et fenêtres temporelles.
  • Utilisateurs nommés, groupes et portail Enterprise.
  • Couverture hors du Canada.

Si l'application est du SIG, pas une carte dans un produit, restez sur Esri.

Liste de vérification

  • Clé API Esri ou session utilisateur nommé remplacée par um_live_... / um_test_...
  • Map + MapView remplacés par new Unmap({ container, ... })
  • Graphiques et infobulles sur unmap.map
  • Localisateur, suggest et inverse pointés vers unmap.geocoder
  • Route et Service Area pointés vers unmap.router, avec la ligne dessinée en GeoJSON
  • Couches d'entités exportées ou laissées chez Esri
  • Cartes web, Living Atlas et SceneView abandonnés ou laissés chez Esri
  • Origine configurée pour le trafic de production (Forfaits et limites)

Le Guide de démarrage est la même carte construite de zéro. Les Exemples sont une idée par page si vous préférez copier un fichier qui marche plutôt que d'en traduire un.