31:[{"id":"c67952fd5ccce42edcde2308ae868da716a8b9d378a5e1b97bb662f377b26fbc17add489d46c7c98e42766b369b93b6d01a713ef7b23106b747e65c5526b7dca","href":"https://static.observableusercontent.com/files/c67952fd5ccce42edcde2308ae868da716a8b9d378a5e1b97bb662f377b26fbc17add489d46c7c98e42766b369b93b6d01a713ef7b23106b747e65c5526b7dca","name":"world.json","type":"application/json","lastModified":1699621262756.612,"size":276863}] 2f:{"title":"Faire du SIG dans la navigateur","cells":[{"id":0,"value":"# Faire du SIG dans la navigateur","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"Il existe plusieurs bibliothèques JavaScript pour réaliser des opérations SIG dans le navigateur.","pinned":false,"hidden":false,"mode":"md"},{"id":45,"value":"world = FileAttachment(\"world.json\").json()","pinned":true,"hidden":true,"mode":"ojs"},{"id":73,"value":"bertin.draw({\n params: { projection: \"user\", width: 600 },\n layers: [{ geojson: world, fill: \"#CCC\", stroke: \"#a63878\" }]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"

GEOTOOLBOX

","pinned":false,"hidden":false,"mode":"md"},{"id":37,"value":"[**`geotoolbox`**](https://github.com/neocarto/geotoolbox) est un outil javascript pour géographes basé sur [d3geo](https://github.com/d3/d3-geo), [topojson](https://github.com/topojson/topojson) et [geos-wasm](https://github.com/chrispahm/geos-wasm). Il permet de traiter simplement les propriétés geoJSON et fournit plusieurs opérations SIG utiles pour la cartographie thématique. Pour charger la dernière version de la bibliothèque, il suffit de copier la ligne suivante :\n","pinned":false,"hidden":false,"mode":"md"},{"id":34,"value":"L'avantage de cette bibliothèque c'est qu'elle prend directement en compte des **FeatureCollection**","pinned":false,"hidden":false,"mode":"md"},{"id":41,"value":"geo = require(\"geotoolbox@3\")","pinned":false,"hidden":true,"mode":"ojs"},{"id":273,"value":"geo","pinned":true,"hidden":false,"mode":"ojs"},{"id":87,"value":"- **Simplify**","pinned":false,"hidden":false,"mode":"md"},{"id":90,"value":"viewof k = Inputs.range([0.01, 0.5], { label: \"k\", step: 0.01, value: 0.05 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"world_light = geo.simplify(world, { k })","pinned":true,"hidden":false,"mode":"ojs"},{"id":95,"value":"bertin.draw({\n params: { projection: \"user\", width: 800 },\n layers: [\n {\n geojson: world_light,\n stroke: \"#a63878\",\n fill: \"none\"\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"- **Union**","pinned":false,"hidden":false,"mode":"md"},{"id":49,"value":"union = geo.union(world)","pinned":true,"hidden":false,"mode":"ojs"},{"id":53,"value":"bertin.draw({\n params: { projection: \"user\", width: 800 },\n layers: [\n {\n geojson: union,\n stroke: \"#a63878\",\n fill: \"none\"\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"- **Union by id**","pinned":false,"hidden":false,"mode":"md"},{"id":68,"value":"union2 = geo.union(world, { id: \"region\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":258,"value":"union2","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"bertin.draw({\n params: { projection: \"user\", width: 800 },\n layers: [\n {\n geojson: union2,\n stroke: \"white\",\n fill: { type: \"typo\", values: \"id\" }\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"- ** Buffer**","pinned":false,"hidden":false,"mode":"md"},{"id":107,"value":"africa = geo.filter(world, { func: \"region = Africa\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":116,"value":"buff = geo.rewind(await geo.buffer(africa, { dist: dist, each: true }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":124,"value":"viewof dist = Inputs.range([1, 4000], { label: \"Distance\", step: 100 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":118,"value":"bertin.draw({\n params: { projection: \"user\", width: 800 },\n layers: [\n {\n geojson: buff,\n stroke: \"#a63878\",\n fill: \"none\"\n },\n {\n geojson: world,\n fill: \"#CCC\",\n stroke: \"none\"\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"- ** Clip**","pinned":false,"hidden":false,"mode":"md"},{"id":143,"value":"clipworld = geo.clip(world, { clip: buff })","pinned":true,"hidden":false,"mode":"ojs"},{"id":145,"value":"bertin.draw({\n params: { projection: \"user\", width: 800 },\n layers: [\n {\n geojson: clipworld,\n fill: \"#a63878\",\n stroke: \"white\"\n },\n {\n geojson: world,\n fill: \"#CCC\",\n stroke: \"none\"\n }\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":265,"value":"- ** Documentation**","pinned":false,"hidden":false,"mode":"md"},{"id":270,"value":"thumbs","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"

TURF

","pinned":false,"hidden":false,"mode":"md"},{"id":22,"value":"**`Turf`** est la bibliothèque JavaScript de référence pour faire des opération SIG. Elle comprend des opérations spatiales traditionnelles, des fonctions d'aide pour la création de données GeoJSON, ainsi que des outils de classification des données et de statistiques. Contrairement à geotoolbox, ici les fonctions sont développées en JavaScript/TypeScript. Voir https://github.com/Turfjs/turf & https://turfjs.org/.","pinned":false,"hidden":false,"mode":"md"},{"id":26,"value":"turf = require(\"@turf/turf@7\")","pinned":false,"hidden":true,"mode":"ojs"},{"id":152,"value":"turfbuff = turf.buffer(africa, dist2, {\n units: \"kilometers\",\n endCapStyle: \"round\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":174,"value":"viewof dist2 = Inputs.range([1, 4000], { label: \"Distance\", step: 100 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":157,"value":"bertin.draw({\n params: { projection: \"user\", width: 800 },\n layers: [\n {\n geojson: turfbuff,\n stroke: \"#a63878\",\n fill: \"none\"\n },\n {\n geojson: world,\n fill: \"#CCC\",\n stroke: \"none\"\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"- **Voyager en \"ligne droite\"**","pinned":false,"hidden":false,"mode":"md"},{"id":181,"value":"Paris = turf.point([2.335042434318193, 48.85859730057634])","pinned":true,"hidden":false,"mode":"ojs"},{"id":183,"value":"Shangai = turf.point([121.5685920321606, 31.557068992422167])","pinned":true,"hidden":false,"mode":"ojs"},{"id":185,"value":"distance = Math.round(turf.distance(Paris, Shangai, { units: \"kilometers\" })) +\n \" km\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":187,"value":"greatCircle = turf.greatCircle(Paris, Shangai, {\n properties: { name: \"Paris to Shangai\" }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":189,"value":"bertin.draw({\n params: { projection: \"user\", width: 800, extent: greatCircle, margin: 100 },\n layers: [\n {\n geojson: greatCircle,\n stroke: \"#a63878\",\n strokeWidth: 2,\n strokeDasharray: 5,\n fill: \"none\"\n },\n {\n geojson: world,\n fill: \"#CCC\",\n stroke: \"none\"\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"Et beaucoup d'autres choses : https://turfjs.org/docs","pinned":false,"hidden":false,"mode":"md"},{"id":14,"value":"

JTS

","pinned":false,"hidden":false,"mode":"md"},{"id":210,"value":"**``jsts``** est une bibliothèque javaScript contenant des fonctions spatiales pour le traitement de la géométrie, conforme à la Simple Features Specification for SQL publiée par l'Open Geospatial Consortium. `jsts` a été réalisée en utilisant la traduction automatique de la source **Java JTS**. Voir https://github.com/bjornharrtell/jsts","pinned":false,"hidden":false,"mode":"md"},{"id":217,"value":"jsts = require(\"https://unpkg.com/jsts@2.10.0/dist/jsts.min.js\")","pinned":true,"hidden":true,"mode":"ojs"},{"id":221,"value":"On extrait un pays.","pinned":false,"hidden":false,"mode":"md"},{"id":224,"value":"usa = ({\n type: \"FeatureCollection\",\n features: world.features.filter((d) => d.properties.ISO3 == \"USA\")\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":226,"value":"Imports et exports dans jsts.","pinned":false,"hidden":false,"mode":"md"},{"id":228,"value":"reader = new jsts.io.GeoJSONReader()","pinned":true,"hidden":false,"mode":"ojs"},{"id":230,"value":"writer = new jsts.io.GeoJSONWriter()","pinned":true,"hidden":false,"mode":"ojs"},{"id":232,"value":"usajsts = reader.read(usa)","pinned":true,"hidden":false,"mode":"ojs"},{"id":234,"value":"Calculons un buffer","pinned":false,"hidden":false,"mode":"md"},{"id":236,"value":"a = usajsts.features[0].geometry","pinned":true,"hidden":false,"mode":"ojs"},{"id":239,"value":"abuff = a.buffer(dist3)","pinned":true,"hidden":false,"mode":"ojs"},{"id":248,"value":"buffer = writer.write(abuff)","pinned":true,"hidden":false,"mode":"ojs"},{"id":241,"value":"viewof dist3 = Inputs.range([-5, 8], {\n label: \"Distance (unités de la couche)\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":250,"value":"bertin.draw({\n params: { margin: 100 },\n layers: [\n {\n geojson: buffer,\n stroke: \"#a63878\",\n strokeWidth: 2,\n strokeDasharray: 5,\n fill: \"none\"\n },\n { geojson: usa, stroke: \"none\", fill: \"#CCC\" }\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"## *Appendix*","pinned":false,"hidden":false,"mode":"md"},{"id":51,"value":"bertin = require(\"bertin\")","pinned":true,"hidden":true,"mode":"ojs"},{"id":267,"value":"import {thumbs} from \"@neocartocnrs/hello-geotoolbox\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"","pinned":false,"hidden":false,"mode":"html"}],"files":"$W31","stdlib":"1","titling":"auto"}