topojson 相关问题

加载纽约地图

我的纽约 d3 地图将无法加载。有人可以帮忙吗？ 这是我的代码： 身体 { 字体：12px 无衬线； } 小路 { 圣...</desc> <question vote="1"> <p>我的纽约 d3 地图将无法加载。有人可以帮忙吗？</p> <p>这是我的代码：</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;meta charset=&#34;utf-8&#34;&gt; &lt;style&gt; body { font: 12px sans-serif; } path { stroke-width: 1.75px; stroke: #531b93; fill: #919191; cursor: pointer; } path:hover, path.highlighted { fill: #0096ff; } div.tooltip { position: absolute; background-color: white; border: 1px solid black; color: black; font-weight: bold; padding: 4px 8px; display: none; } &lt;/style&gt; &lt;body&gt; &lt;script src=&#34;http://d3js.org/d3.v3.min.js&#34;&gt;&lt;/script&gt; &lt;script&gt; //Map dimensions (in pixels) var width = 600, height = 600; //Map projection var projection = d3.geo.mercator() .scale(58722.369041340586) .center([-73.97768078496284,40.705833704252484]) //projection center .translate([width/2,height/2]) //translate to center the map in view //Generate paths based on projection var path = d3.geo.path() .projection(projection); //Create an SVG var svg = d3.select(&#34;body&#34;).append(&#34;svg&#34;) .attr(&#34;width&#34;, width) .attr(&#34;height&#34;, height); //Group for the map features var features = svg.append(&#34;g&#34;) .attr(&#34;class&#34;,&#34;features&#34;); //Create zoom/pan listener //Change [1,Infinity] to adjust the min/max zoom scale var zoom = d3.behavior.zoom() .scaleExtent([1, Infinity]) .on(&#34;zoom&#34;,zoomed); svg.call(zoom); //Create a tooltip, hidden at the start var tooltip = d3.select(&#34;body&#34;).append(&#34;div&#34;).attr(&#34;class&#34;,&#34;tooltip&#34;); d3.json(&#34;NYC_MapInfos.geojson&#34;,function(error,geodata) { if (error) return console.log(error); //unknown error, check the console //Create a path for each map feature in the data features.selectAll(&#34;path&#34;) .data(geodata.features) .enter() .append(&#34;path&#34;) .attr(&#34;d&#34;,path) .on(&#34;mouseover&#34;,showTooltip) .on(&#34;mousemove&#34;,moveTooltip) .on(&#34;mouseout&#34;,hideTooltip) .on(&#34;click&#34;,clicked); }); // Add optional onClick events for features here // d.properties contains the attributes (e.g. d.properties.name, d.properties.population) function clicked(d,i) { } //Update map on zoom/pan function zoomed() { features.attr(&#34;transform&#34;, &#34;translate(&#34; + zoom.translate() + &#34;)scale(&#34; + zoom.scale() + &#34;)&#34;) .selectAll(&#34;path&#34;).style(&#34;stroke-width&#34;, 1.75 / zoom.scale() + &#34;px&#34; ); } //Position of the tooltip relative to the cursor var tooltipOffset = {x: 5, y: -25}; //Create a tooltip, hidden at the start function showTooltip(d) { moveTooltip(); tooltip.style(&#34;display&#34;,&#34;block&#34;) .text(d.properties.PO_NAME); } //Move the tooltip to track the mouse function moveTooltip() { tooltip.style(&#34;top&#34;,(d3.event.pageY+tooltipOffset.y)+&#34;px&#34;) .style(&#34;left&#34;,(d3.event.pageX+tooltipOffset.x)+&#34;px&#34;); } //Create a tooltip, hidden at the start function hideTooltip() { tooltip.style(&#34;display&#34;,&#34;none&#34;); } &lt;/script&gt; </code></pre> <p>这是 geojson 文件： <a href="http://data.beta.nyc//dataset/3bf5fb73-edb5-4b05-bb29-7c95f4a727fc/resource/6df127b1-6d04-4bb7-b983-07402a2c3f90/download/f4129d9aa6dd4281bc98d0f701629b76nyczipcodetabulationareas.geojson" rel="nofollow">http://data.beta.nyc//dataset/3bf5fb73-edb5-4b05-bb29-7c95f4a727fc/resource/6df127b1-6d04-4bb7 -b983-07402a2c3f90/下载/f4129d9aa6dd4281bc98d0f701629b76nyczipcodetabulationareas.geojson</a></p> </question> <answer tick="true" vote="0"> <p>您可以尝试使用 <a href="https://github.com/gagan-bansal/geojson2svg" rel="nofollow noreferrer">geojson2svg</a> 模块使用 geojson 数据创建 SVG 地图。由于这只是简单的 JavaScript，因此您将拥有更多控制权。这是你的例子</p> <p>您的 html 页面 (index.html):</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;link rel=&#34;stylesheet&#34; href=&#34;./map.css&#34;/&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdnjs.cloudflare.com/ajax/libs/geojson2svg/1.0.3/geojson2svg.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdn.rawgit.com/geosquare/reproject-spherical-mercator/v0.1.3/dist/reproject-spherical-mercator.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdn.rawgit.com/geosquare/geojson-bbox/master/dist/geojson-bbox.min.js&#34;&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;h2&gt;Example of New York postal code map created with geojson2svg&lt;/h2&gt; &lt;div id=&#34;mapArea&#34; style=&#34;width:600px;height:600px;&#34;&gt; &lt;svg id=&#34;map&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; width=&#34;600&#34; height=&#34;600&#34; x=&#34;0&#34; y=&#34;0&#34; &gt; &lt;/svg&gt; &lt;div class=&#34;tooltip&#34; &gt;&lt;/div&gt; &lt;/div&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;./main.js&#34;&gt;&lt;/script&gt; &lt;/body&gt; </code></pre> <p>Javascript代码（main.js）：</p> <pre><code>var dataURI = &#34;http://data.beta.nyc//dataset/3bf5fb73-edb5-4b05-bb29-7c95f4a727fc/resource/6df127b1-6d04-4bb7-b983-07402a2c3f90/download/f4129d9aa6dd4281bc98d0f701629b76nyczipcodetabulationareas.geojson&#34;; $.get(dataURI,drawGeoJSON); $(&#39;#map&#39;).on(&#39;mouseover&#39;,&#39;path&#39;,function(ev) { console.log(ev.target.feature.properties.postalCode); var tooltip = document.querySelector(&#39;.tooltip&#39;); tooltip.style.top = ev.pageY - 30; tooltip.style.left = ev.pageX + 5; tooltip.style.display = &#39;block&#39;; tooltip.innerHTML = ev.target.feature.properties.PO_NAME; }); $(&#39;#map&#39;).on(&#39;mouseout&#39;,&#39;path&#39;,function(ev) { var tooltip = document.querySelector(&#39;.tooltip&#39;); tooltip.style.display = &#39;none&#39;; }); function drawGeoJSON(geojson) { // covert wgs84 data to Web Mercator projection var geojsonMerc = reproject(geojson); // reproject: https://github.com/geosquare/reproject-spherical-mercator var extent = bbox(geojsonMerc); // bbox: https://github.com/geosquare/geojson-bbox var mapExtent = { left: extent[0], bottom: extent[1], right: extent[2], top: extent[3] }; var svgMap = document.getElementById(&#39;map&#39;); // geojson2svg: https://github.com/gagan-bansal/geojson2svg var convertor = geojson2svg( { viewportSize: {width:600,height:600}, mapExtent: mapExtent, attributes: { &#39;vector-effect&#39;:&#39;non-scaling-stroke&#39; }, explode: false } ); geojsonMerc.features.forEach(function(f) { var svgStr = convertor.convert(f,{attributes: {id: &#39;pc-&#39;+f.properties.OBJECTID}}); var svg = parseSVG(svgStr); svgMap.appendChild(parseSVG(svgStr)); var svgEle = svgMap.querySelector(&#39;#&#39; + &#39;pc-&#39;+f.properties.OBJECTID); svgEle.feature = f; }); } //parseSVG from http://stackoverflow.com/questions/3642035/jquerys-append-not-working-with-svg-element function parseSVG(s) { var div= document.createElementNS(&#39;http://www.w3.org/1999/xhtml&#39;, &#39;div&#39;); div.innerHTML= &#39;&lt;svg xmlns=&#34;http://www.w3.org/2000/svg&#34;&gt;&#39;+s+&#39;&lt;/svg&gt;&#39;; var frag= document.createDocumentFragment(); while (div.firstChild.firstChild) frag.appendChild(div.firstChild.firstChild); return frag; } </code></pre> <p>和CSS（map.css）：</p> <pre><code>body { font: 12px sans-serif; } path { stroke-width: 1px; stroke: #531b93; fill: #919191; cursor: pointer; } path:hover, path.highlighted { fill: #0096ff; } div.tooltip { position: absolute; background-color: white; border: 1px solid black; color: black; font-weight: bold; padding: 4px 8px; display: none; } </code></pre> <p>如需提前使用，请查看<a href="https://maps-on-blackboard.github.io/tag/geojson2svg/" rel="nofollow noreferrer">此博客</a></p> </answer> </body></html>

使用 Pydeck 看不到地图高程

我正在使用topojson地图数据。 本质上，我希望根据 data_count 值看到每个区域高度的海拔。但我看到所有区域的高度相同。 get_elevation 代替

R 中 json 属性的反应式选择，用于没有闪亮的传单

通过 R (Markdown) 中的以下最小示例，可以在两个不同的 topojson 属性之间进行选择，并根据选择反应性地绘制不同的传单分区统计图...

使用D3.js渲染地图，但结果图太小

我正在使用 D3.js 绘制越南地图。我从 URL（在代码中）获取 GeoJSON 数据，我遵循了很多说明，从转换为 TopoJSON（为了紧凑尺寸）然后转换回

如何将Revit Room导入Power BI报告？或者从 Revit 房间创建 topojson/geojson 文件？

我正在尝试将数据从 Revit 房间导入交互式 Power BI 报告。我想将房间几何形状带入 PBI 报告并将其与外部数据表链接起来，创建

D3世界地图，部分国家质心偏离

嗨，我正在创建 React 应用程序，我试图在其中使用 D3 制作世界地图。我希望当用户将鼠标悬停在特定国家/地区时，该国家/地区路径的质心上会出现圆圈，但对于某些国家/地区，例如 &

OpenLayers：缩放级别裁剪 VectorTile 图层 - 如何修复？

我想使用 TopoJSON 数据作为 OpenLayers 地图的 VectorTile 图层。当地图的缩放级别设置为 3 或更低时，将显示完整的 VectorTile 图层，但在缩放级别为 4 或更高时，

ArcGis json 转换为 geojson

我目前正在处理地理空间数据，遇到了需要将数据从 ArcGIS JSON 格式转换为 GeoJSON 格式的情况。我了解 GDAL，特别是它

我正在尝试使用 d3 绘制地图，并且我正在从 json 文件中提取数据，但它不起作用。下面是我的 script.js

let CountyURL = 'https://raw.githubusercontent.com/deldersveld/topojson/master/countries/nigeria/nigeria-states.json' 让县数据 让画布 = d3.select('#canvas') 让工具提示 = d3.select('#to...

将 sf 对象转换为 topojson

我正在尝试从 sf 对象创建一个格式正确的 topoJSON 列表。 读取有效的 topoJSON 文件时会起作用的是： 萨<- jsonlite::read_json("https://raw.

使用 d3.js 和 React 为 Albers US Choropleth Map 渲染正确的视觉效果

我试图弄清楚我的代码出了什么问题，因为当我尝试为每个元素获取一个 colorScale 时，除了单一颜色的大正方形之外我无法生成任何其他东西......

让我们制作一个TopoJSON映射并使用D3.js进行查看

我制作了以下TopoJSON文件：https://gofile.io/d/CKBGhF我想用基本的D3.js脚本在浏览器中查看它。从https://bost.ocks.org/mike/map/中，我找到了有关...

我如何将数据绑定到html对象，条件是html数据集和对象键值是否使用javascript匹配？

我正在尝试将数据绑定到svg映射。但是，我用来创建地图的TopoJSON文件与数据之间存在一些不一致之处。最大的障碍是某些属性...

在Topojson名称中选择单词的国家的标准颜色

我已经在D3中制作了地图，并且之前已经有条件地在id和属性上分配了颜色。在这种情况下，我试图根据名称中是否存在特定单词来有条件地进行着色。 ...

带有topojson的d3地图未在画布上显示形状

我是d3和topojson的新手。尝试在离子角度应用程序上渲染地图。似乎画布已正确填充，但形状不可见:(可以请人帮忙吗？这是...

如何解决topojson包的打字错误？

请原谅天真的问题；我是Typescript的新手。在javascript中，我可以使用topojson.mesh创建这样的网格对象：从“ ./counties-albers-10m.json”导入我们topojson.mesh（us，us ....

试图使用d3.js快速绘制美国各县的矢量地图

我正在尝试在d3.js中制作一个SVG地图，以显示所有美国县。当您单击状态时，它会将viewBox转换为该状态，并根据其在地球上的位置对其进行旋转，因此它不是...

如何获取topojson文件的svg路径而不将其添加到d3.js中的DOM？

我有一个特殊情况，我不想将我的topojson文件的生成路径添加到DOM，而只是获取生成的d属性（SVG路径）。所以我通常会做类似...

Topojson动画一次飞行

我已经尝试根据两个坐标对（用作起点和着陆点）为单个飞行设置动画。但是我陷入了错误：错误：属性d：预期的数字，“ ...”。 ...

Datamap错误：“未捕获的TypeError：无法读取未定义的属性'equirectangular'”

//您好，我正在尝试使用Datamaps，D3.js和Topojson创建世界地图。以下代码摘录自我的index.html文件，该文件理论上应按照...