- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
给定具有高程数据的 GIS 栅格,如何在 D3js 中设计地形图?
是否有使用 D3js 制作的耕地的地形/地形图示例?
不工作:我探索了.tif > gdal_contour.py > .shp > topojson > d3js
的可能性没有成功。
我use a makefile其中包含我所有的命令。由于我感兴趣的区域(法国)是一片土地区域,gdal_contour.py
方法生成不创建闭合多边形的断线等值线。此外,SVG 最终结果失败。我知道的唯一D3地形图示例is about Iceland ,作为一个岛屿,可以避免这个问题:将这个国家从世界上裁剪不会导致等值线断裂。
注意:该项目是#Wikipedia #wikimaps 项目的一部分。
最佳答案
现在 D3js 上的地形图,具有完整的 makefile 工作流程!见 http://bl.ocks.org/hugolpz/6279966 (<= 旧代码,与 SO 上的此处进行比较)
0. 要求:
make
, curl
, unzip
, gdal
(包括 ogr
、gdal_calc.py
、gdal_polygonize.py
)、nodejs
, topojson
.有用的:touch
.然后,makefile 设法下载源代码、处理它们,并输出提供的 D3js 代码可以使用的单个 topojson 文件。 # topojsoning:
final.json: levels.json
topojson --id-property none --simplify=0.5 -p name=elev -o final.json -- levels.json
# simplification approach to explore further. Feedbacks welcome.
# shp2jsoning:
levels.json: levels.shp
ogr2ogr -f GeoJSON -where "elev < 10000" levels.json levels.shp
# merge
levels.shp: level0001.shp level0050.shp level0100.shp level0200.shp level0500.shp level1000.shp level2000.shp level3000.shp level4000.shp level5000.shp
ogr2ogr levels.shp level0001.shp
ogr2ogr -update -append levels.shp level0050.shp
ogr2ogr -update -append levels.shp level0100.shp
ogr2ogr -update -append levels.shp level0200.shp
ogr2ogr -update -append levels.shp level0500.shp
ogr2ogr -update -append levels.shp level1000.shp
ogr2ogr -update -append levels.shp level2000.shp
ogr2ogr -update -append levels.shp level3000.shp
ogr2ogr -update -append levels.shp level4000.shp
ogr2ogr -update -append levels.shp level5000.shp
# Polygonize slices:
level0001.shp: level0001.tif
gdal_polygonize.py level0001.tif -f "ESRI Shapefile" level0001.shp level_0001 elev
level0050.shp: level0050.tif
gdal_polygonize.py level0050.tif -f "ESRI Shapefile" level0050.shp level_0050 elev
level0100.shp: level0100.tif
gdal_polygonize.py level0100.tif -f "ESRI Shapefile" level0100.shp level_0100 elev
level0200.shp: level0200.tif
gdal_polygonize.py level0200.tif -f "ESRI Shapefile" level0200.shp level_0200 elev
level0500.shp: level0500.tif
gdal_polygonize.py level0500.tif -f "ESRI Shapefile" level0500.shp level_0500 elev
level1000.shp: level1000.tif
gdal_polygonize.py level1000.tif -f "ESRI Shapefile" level1000.shp level_1000 elev
level2000.shp: level2000.tif
gdal_polygonize.py level2000.tif -f "ESRI Shapefile" level2000.shp level_2000 elev
level3000.shp: level3000.tif
gdal_polygonize.py level3000.tif -f "ESRI Shapefile" level3000.shp level_3000 elev
level4000.shp: level4000.tif
gdal_polygonize.py level4000.tif -f "ESRI Shapefile" level4000.shp level_4000 elev
level5000.shp: level5000.tif
gdal_polygonize.py level5000.tif -f "ESRI Shapefile" level5000.shp level_5000 elev
# Raster slicing:
level0001.tif: crop.tif
gdal_calc.py -A crop.tif --outfile=level0001.tif --calc="1*(A>0)" --NoDataValue=0
level0050.tif: crop.tif
gdal_calc.py -A crop.tif --outfile=level0050.tif --calc="50*(A>50)" --NoDataValue=0
level0100.tif: crop.tif
gdal_calc.py -A crop.tif --outfile=level0100.tif --calc="100*(A>100)" --NoDataValue=0
level0200.tif: crop.tif
gdal_calc.py -A crop.tif --outfile=level0200.tif --calc="200*(A>200)" --NoDataValue=0
level0500.tif: crop.tif
gdal_calc.py -A crop.tif --outfile=level0500.tif --calc="500*(A>500)" --NoDataValue=0
level1000.tif: crop.tif
gdal_calc.py -A crop.tif --outfile=level1000.tif --calc="1000*(A>1000)" --NoDataValue=0
level2000.tif: crop.tif
gdal_calc.py -A crop.tif --outfile=level2000.tif --calc="2000*(A>2000)" --NoDataValue=0
level3000.tif: crop.tif
gdal_calc.py -A crop.tif --outfile=level3000.tif --calc="3000*(A>3000)" --NoDataValue=0
level4000.tif: crop.tif
gdal_calc.py -A crop.tif --outfile=level4000.tif --calc="4000*(A>4000)" --NoDataValue=0
level5000.tif: crop.tif
gdal_calc.py -A crop.tif --outfile=level5000.tif --calc="5000*(A>5000)" --NoDataValue=0
# boxing:
crop.tif: ETOPO1_Ice_g_geotiff.tif
gdal_translate -projwin -5.3 41.0 10.2 51.6 ETOPO1_Ice_g_geotiff.tif crop.tif
# ulx uly lrx lry // W S E N
# unzip:
ETOPO1_Ice_g_geotiff.tif: ETOPO1.zip
unzip ETOPO1.zip
touch ETOPO1_Ice_g_geotiff.tif
# download:
ETOPO1.zip:
curl -o ETOPO1.zip 'http://www.ngdc.noaa.gov/mgg/global/relief/ETOPO1/data/ice_surface/grid_registered/georeferenced_tiff/ETOPO1_Ice_g_geotiff.zip'
clean:
rm `ls | grep -v 'zip' | grep -v 'Makefile'`
# Makefile v4b (@hugo_lz)
cd ./topo_map
make -f ./topo.mk
<!-- language: html -->
<style>
svg { border: 5px solid #333; background-color: #C6ECFF;}
/* TOPO */
path.Topo_1 { fill:#ACD0A5; stroke: #0978AB; stroke-width: 1px; }
path.Topo_50 {fill: #94BF8B; }
path.Topo_100 {fill: #BDCC96; }
path.Topo_200 {fill: #E1E4B5; }
path.Topo_500 {fill: #DED6A3; }
path.Topo_1000 {fill:#CAB982 ; }
path.Topo_2000 {fill: #AA8753; }
path.Topo_3000 {fill: #BAAE9A; }
path.Topo_4000 {fill: #E0DED8 ; }
path.Topo_5000 {fill: #FFFFFF ; }
.download {
background: #333;
color: #FFF;
font-weight: 900;
border: 2px solid #B10000;
padding: 4px;
margin:4px;
}
</style>
<body>
<script src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>
// 1. -------------- SETTINGS ------------- //
// Geo-frame_borders in decimal ⁰: France
var WNES = { "W": -5.3, "N":51.6, "E": 10.2, "S": 41.0 };
// Geo values of interest :
var latCenter = (WNES.S + WNES.N)/2,
lonCenter = (WNES.W + WNES.E)/2,
geo_width = (WNES.E - WNES.W),
geo_height= (WNES.N - WNES.S);
// HTML expected frame dimensions
var width = 600,
height = width * (geo_height / geo_width);
// Projection: projection, reset scale and translate
var projection = d3.geo.equirectangular()
.scale(1)
.translate([0, 0]);
// SVG injection:
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
// Path
var path = d3.geo.path()
.projection(projection)
.pointRadius(4);
// Data (getJSON: TopoJSON)
d3.json("final.json", showData);
// 2. ---------- FUNCTION ------------- //
function showData(error, fra) {
var Levels = topojson.feature(fra, fra.objects.levels);
// Focus area box compute for derive scale & translate.
// [[left, bottom], [right, top]] // E W N S
var b = path.bounds(Levels),
s = 1 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];
// Projection update
projection
.scale(s)
.translate(t);
//Append Topo polygons
svg.append("path")
.datum(Levels)
.attr("d", path)
svg.selectAll(".levels")
.data(topojson.feature(fra, fra.objects.levels).features)
.enter().append("path")
.attr("class", function(d) { return "Topo_" + d.properties.name; })
.attr("data-elev", function(d) { return d.properties.name; })
.attr("d", path)
}
</script>
<br />
<div>
<a class="download ac-icon-download" href="javascript:javascript: (function () { var e = document.createElement('script'); if (window.location.protocol === 'https:') { e.setAttribute('src', 'https://raw.github.com/NYTimes/svg-crowbar/gh-pages/svg-crowbar.js'); } else { e.setAttribute('src', 'http://nytimes.github.com/svg-crowbar/svg-crowbar.js'); } e.setAttribute('class', 'svg-crowbar'); document.body.appendChild(e); })();"><!--⤋--><big>⇩</big> Download</a> -- Works on Chrome. Feedback me for others web browsers ?
</div>
<br />
</body>
</html>
关于d3.js - D3js : How to design topographic maps?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18300527/
我正在用power designer创建一个物理模型,我想将默认值添加到我的Mysql表中。 有可能吗,有人加了默认值 ? 谢谢 最佳答案 有可能,我发现“列属性”并不容易 方法如下: 选择表格(单击
关闭。这个问题是 opinion-based 。它目前不接受答案。 想改善这个问题吗?更新问题,以便可以通过 editing this post 用事实和引文来回答。 2年前关闭。 Improve t
我正在编写一个采用 Material Design 布局的应用程序,但找不到任何关于如何将对话框动画显示到屏幕上的指南。 这表明盒子应该只是“砰”的一声存在,但这似乎违背了设计的精神,包括动画和触觉。
我做了一个巨大的掠夺,不小心丢失了我的*.cs(设计文件)..我刚刚得到了*.designer文件。 我能否反过来,仅使用 .designer 文件以某种方式创 build 计文件 (*.cs),还是
如果 Google 的关键字规划器向我显示关键字“Web Design [city-name]”获得约 880 次搜索,而“Website Design [city-name]”获得约 620 次搜索
首先,代码: $(document).ready(function() { $('#member_pattern').hide(); $('.add-member').click(function()
大型软件公司之一问了这个问题。我想出了一个简单的解决方案,我想知道其他人对该解决方案有何看法。 You are supposed to design an API and a backend for
在最新的 Material Design 文档 (https://www.google.com/design/spec/what-is-material/elevation-shadows.html#
背景 我正在对从我们的 RDBMS 数据库到 MongoDB 的转换进行原型(prototype)设计。在进行非规范化时,似乎我有两种选择,一种会导致许多(数百万)个小文档,另一种会导致更少(数十万)
Qt Designer (5.11.2) 在选择 QWebEngineView-Widget 时崩溃。 我正在创建一个对话框,以将其作为 .ui 文件包含在 QGIS 3 中。在表单中,我想使用 QW
我直接从 getmdl.io(组件页面)和所有设备(多台 PC、浏览器、手机等)复制代码,汉堡菜单不在标题中居中。我似乎无法隔离 css 中的菜单图标来重新对齐它。 getmdl.io 上的所有组件代
如何为 SPA 动态初始化 materialize design lite (google) 的组件?当我在 View 中动态初始化组件时,JS 没有初始化。正如我已经尝试过使用 componentH
我正在使用 Angular 4 构建一个 Web 应用程序。对于设计,我使用的是 Material Design lite。但是,我想使用 MDL 实现一个交互式轮播,它给我流畅的外观和感觉,并且与我
它看起来像 Polymer Starter Kit包含比 Material Design Lite 更多的组件,并且现在可用。由于两者都是符合 Material Design 理念的 Google 项
我在设置 mdl-textfield 样式时遇到了一些困难。 具体来说,设置 float 标签的大小和颜色,以及按下输入字段后动画的高度和颜色。 实际上,这是我从组件列表中获取的起点。 https:/
所以,好友列表的现代概念: 假设我们有一个名为 Person 的表。现在,那个 Person 需要有很多伙伴(其中每个伙伴也在 person 类中)。构建关系的最明显方法是通过连接表。即 buddyI
如何在导航中创建子菜单项? Link Link Link Link 我不能用 用它。什么是正确的类? 最佳答案 MDL 似乎还没有原生支持子菜单。 然而
我想知道我应该遵循哪些步骤来解决设计自动售货机等问题并提出许多设计文档(如用例、序列图、类图)。是否有任何我可以阅读的来源/链接,其中讨论了如何逐步进行。 谢谢。 最佳答案 我不确定是否有任何普遍接受
早在 10 月份,Kristopher Johnson 就询问了 Accounting Software Design Patterns 他收到了几个答案,但基本上都是一样的,都指向Martin Fo
我一直在为我们的产品开发一些组件,其中之一是基于流布局面板。 我想做的是为它提供一个自定义设计器,但不会丢失其默认设计器 (System.Windows.Forms.Design.FlowLayout
我是一名优秀的程序员,十分优秀!