3e:null 3f:["$","title",null,{"children":"MultiPolygon Overlap Layer | o_O | Observable"}] 45:T4b4,map = { let map = new mapboxgl.Map({ container, center: [104, 30], zoom: 4, maxZoom: 17, style: "mapbox://styles/mapbox/" + style, // This is all one needs to set the projection. Values are derived from the input cell defined above. // projection: {name: projection}, // scrollZoom: false }); map.on('load', () => { loaded(map) console.time('Edge') const { edges, tree } = createEdge() console.timeEnd('Edge') console.time('Tree') polygonOverlap(tree, edges) console.timeEnd('Tree') console.log(tree, edges) console.time('Flat') const result = flatTree(tree) console.timeEnd('Flat') console.log('result', result) console.time('Overlay') const overlayPolygon = drawOverlays(result, map) console.timeEnd('Overlay') console.time('DrawOverlay') overlayPolygon.forEach((geo, index) => { const multiPolygonGeoJson = turf.multiPolygon(geo) const color = `rgb(${Math.random()*256 | 0},${Math.random()*256 | 0},${Math.random()*256 | 0})`; addLayer('overlay_'+index, multiPolygonGeoJson, map, color, 1 || index * 0.05 + 0.5) }) console.timeEnd('DrawOverlay') }) return map }46:T54d,function createEdge () { const len = dataSet.circles.length; const edges = {} const tree = { children: [] } const intersects = {} const geojsons = [] let add = false for (let m = 0; m < len - 1; m++) { const origin = dataSet.circles[m].geometry.coordinates const coord1 = dataSet.coords[m] add = false for (let n = m + 1; n < len; n++) { const target = dataSet.circles[n].geometry.coordinates const coord2 = dataSet.coords[n] const distance = turf.distance(turf.point(coord1.slice(0,2)), turf.point(coord2.slice(0,2))) if (distance < (coord1[2] + coord2[2])) { const poly1 = turf.polygon(origin) const poly2 = turf.polygon(target) const result = turf.intersect(poly1, poly2) if (result) { if (!edges[m]) edges[m] = {} if (!tree[m]) tree[m] = { children: [] } if (!intersects[m]) intersects[m] = {} edges[m][n] = true if (!add) { add = true tree.children.push(m) } tree[m].children.push(n) tree[m][n] = {} intersects[m][n] = result } } } } window.edges = edges window.tree = tree return { edges, tree, intersects, geojson: turf.multiPolygon(geojsons) } }47:T712,// 绘制不同覆盖测试的层 /** * [A1, A2, A3, A4, A5] 表示 A1, A2, A3, A4, A5 相交 * Intersect() * Intersect() * Intersect() * Intersect() * 计算 Intersect() 时, 迭代时，, , 都已经计算 * error 记录相交 null 情况，容错相交错误 */ function drawOverlays (overlay, map) { const arr = Object.values(overlay) const multiPolygons = {} arr.forEach(layer => { const size = layer[0].length multiPolygons[size] = [] layer.forEach(item => { let intersect = dataSet.circles[item[0]] let error = 0 for(let i = 1; i < item.length; i++) { const poly2 = turf.polygon(dataSet.circles[item[i]].geometry.coordinates) const poly1 = turf.polygon(intersect.geometry.coordinates) const result = turf.intersect(poly1, poly2) if (result) { intersect = result if (result.geometry.type === 'MultiPolygon') { result.geometry.coordinates.forEach(item => { multiPolygons[i + 1].push(item) }) } else if (result.geometry.type === 'Polygon') { multiPolygons[i + 1].push(intersect.geometry.coordinates) } // intersect = result // multiPolygons[i + 1].push(intersect.geometry.coordinates) } else { error++ // console.warn('intersect is null.', intersect, dataSet.circles[item[i]], i, error) if(multiPolygons[i + 1 - error]) { multiPolygons[i + 1 - error].push(intersect.geometry.coordinates) } } } }) }) console.log('multiPolygons ==>', multiPolygons) return Object.values(multiPolygons); }48:[] 43:{"id":"98ae2962e4a4192b","slug":null,"title":"MultiPolygon Overlap Layer","thumbnail":"8c3e2356a6e57a4f3e8fb75b4073f48cad036a620ab19247522575079dc7a160","access_level":"public","create_time":"$D2022-12-05T02:05:02.978Z","update_time":"$D2023-02-20T09:52:59.768Z","view_time":null,"first_public_time":"$D2022-12-05T02:05:02.978Z","has_unpublished_edits":null,"fork":{"id":"d64381d4f850265c","slug":"mapboxgl-non-mercator-projections","title":"MapBoxGL - Non-Mercator Projections","owner":{"id":"9cb66d8571abb7bd","login":"categorise","name":"categori.se"}},"stars":2,"starred":false,"owner":{"type":"team","id":"32165dab00feb5f5","login":"musixnotmusic","name":"o_O","avatar_url":"https://avatars-next.observableusercontent.com/00e1f2e2d9054519261eedf61fb2d59cda7f6eedf972722679f250270ac68638","tier":"starter_2024","bio":"","following":false},"version":544,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"65e905bbe8e390e3","login":"musixnotmusic","name":"o_O","avatar_url":"https://avatars-next.observableusercontent.com/00e1f2e2d9054519261eedf61fb2d59cda7f6eedf972722679f250270ac68638","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"65e905bbe8e390e3","login":"musixnotmusic","name":"o_O","avatar_url":"https://avatars-next.observableusercontent.com/00e1f2e2d9054519261eedf61fb2d59cda7f6eedf972722679f250270ac68638","tier":null,"role":"editor"}],"comments":[{"id":"91c605e487fed2c4","reply_to_id":null,"content":"Please use your own mapbox token. I will keep changing mine and breaking this example.","create_time":"$D2022-12-05T10:20:23.548Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"MultiPolygon Overlap Layer","cells":[{"id":0,"value":"# MultiPolygon Overlap Layer","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"md`\n---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"viewof style = Inputs.select([\"streets-v11\", \"outdoors-v11\", \"light-v10\", \"dark-v10\", \"satellite-v9\", \"satellite-streets-v11\", \"navigation-day-v1\", \"navigation-night-v1\"], {label: \"basemap style\", value:\"navigation-day-v1\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"container = html`

`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"size = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"dataSet = {\n const multiPolygon = [];\n const coords = []\n const circles = new Array(size).fill(1).map(item => {\n const radius = Math.random() * 40 + 60; // 60 ~ 100\n const lon = Math.random() * 30 + 88 // 88 ~ 118\n const lat = Math.random() * 22 + 24 // 24 ~ 26\n const options = { steps: 50, units: 'kilometers' };\n const circle = turf.circle([lon, lat], radius, options);\n coords.push([lon, lat, radius])\n return circle\n })\n return {\n circles,\n coords\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"function addLayer (id, geojson, map, color, opacity) {\n if (!map.getSource(id) && !map.getLayer(id)) {\n map.addSource(id, {\n type: 'geojson',\n data: geojson\n })\n\n map.addLayer({\n id: id,\n source: id,\n type: 'fill',\n layout: {},\n paint: {\n 'fill-color': color || 'blue', // blue color fill\n 'fill-opacity': opacity || 0.5\n }\n })\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"function removeLayer (id) {\n if (map.getLayer(id)) {\n map.removeLayer(id)\n }\n if (map.getSource(id)) {\n map.removeSource(id)\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"function addMarker(coords, innerHTML, offset, map) {\n const divDom = document.createElement('div');\n if (innerHTML) {\n divDom.innerHTML = innerHTML;\n }\n // if (!offset) offset = [8, 0];\n const option = {\n element: divDom,\n anchor: 'center',\n offset: offset || [0, 0]\n };\n\n let marker = new mapboxgl.Marker(option)\n .setLngLat(coords)\n .addTo(map);\n return marker;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"function loaded (map) {\n const multiPolygon = []\n dataSet.circles.forEach(item => {\n multiPolygon.push(item.geometry.coordinates)\n })\n\n dataSet.coords.forEach((item,index) => {\n addMarker(item, `${index}`, null, map)\n })\n const multiPolygonGeojson = turf.multiPolygon(multiPolygon)\n addLayer('multi', multiPolygonGeojson, map)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"function recursionEdge (node, edges) {\n if (!node || !node.children) {\n return node\n }\n const children = node.children\n const len = children.length\n for(let m = 0; m < len - 1; m++) {\n const v1 = children[m]\n if (!node[v1]) node[v1] = { }\n for(let n = m + 1; n < len; n++) {\n const v2 = children[n]\n // console.log(' =', v1, v2)\n if (edges[v1] && edges[v1][v2]) {\n node[v1][v2] = {}\n if (!node[v1].children) node[v1].children = []\n node[v1].children.push(v2)\n }\n }\n recursionEdge(node[v1], edges)\n }\n return node\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"function polygonOverlap (root, edges) {\n root.children.forEach(item => {\n recursionEdge(root[item], edges) \n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"function flat (node, obj, dist) {\n if (!node || !node.children) {\n const deep = dist.length\n if (!obj[deep]) obj[deep] = []\n obj[deep].push(dist)\n return dist;\n }\n const children = node.children\n const len = children.length\n\n for(let m = 0; m < len; m++) {\n const id = children[m]\n const arr = [...dist]\n arr.push(id)\n flat(node[id], obj, arr)\n }\n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"function flatTree (root) {\n const result = {}\n root.children.forEach(item => {\n flat(root[item], result, [item]) \n })\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@2.10\");\n if (!gl.accessToken) {\n gl.accessToken =\n // \"pk.eyJ1IjoidG1jdyIsImEiOiJja3FmbGJoNXMxNmx5Mm9uejIxcmpiNjh2In0.2F8HR-8J859J7frYE6DG9g\";\n \"pk.eyJ1IjoibXVzaXgiLCJhIjoiY2xiYWZybGowMGFlYTN2bzFtaWRrcmR5OCJ9.Qvl9IQUEuWq2eD3GvkJ5AQ\"\n const href = await require.resolve(\"mapbox-gl@2.10/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"turf = require(\"@turf/turf@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 44:"$43:body"