DNS 搜索 - dig 命令
<!DOCTYPE html>
<html>
<head>
<link
type="image/png"
rel="icon"
href="//portal.gplates.org/static/img/GPlates-icon.png"
/>
<meta charset="utf-8" />
<style>
path {
stroke: blue;
stroke-width: 0.25px;
fill: grey;
}
circle {
fill: red;
}
svg {
border: solid black 1px;
display: block;
margin: 0px auto;
margin-bottom: 20px;
}
.pathPoint {
fill: red;
}
.graticule {
fill: none;
stroke: #777;
stroke-width: 0.5px;
stroke-opacity: 0.5;
}
.RG {
fill: none;
stroke-width: 1px;
stroke: red;
}
.coastline {
fill-opacity: 0.5;
}
</style>
</head>
<body data-view-name="points">
<div style="width:960px; text-align: center; margin:0 auto;">
<h1 id="time-label" style="font-size:3em;margin:0;">140 Ma</h1>
</div>
<div style="width:962px; overflow:hidden; margin:0 auto;">
<svg style="width:960px; height:500px;"></svg>
<div style="text-align:center;">
<label>Time:</label>
<input
id="recon-time"
type="number"
min="0"
step="1"
max="550"
value="140"
style="margin-right:10px;"
/>
<label>Projection:</label>
<select id="select-projection" style="margin-right:10px;">
<option value="orthographic">Orthographic</option>
<option value="equirectangular" selected>Rectangular</option>
</select>
<label style="display:none;">Function:</label>
<select id="select-function" style="display:none;">
<option value="1" selected>Reconstruct Points</option>
<option value="2">Reconstruct Feature Collection</option>
</select>
<br /><br />
<textarea id="args-textarea" rows="2" cols="100">
116,39,151,-33, -74, 40, 37, 55, -43,-22, 18, 14</textarea
>
<br /><br />
<input type="button" id="commit" value="Refresh Map" />
<!--<input type="button" id="show-url" value="Show Request URL"/>
<input type="button" id="show-data" value="Show Returned Raw Data"/>-->
</div>
<br />
<div id="request-url"></div>
<br />
<div id="raw-data"></div>
</div>
<script src="http://cdn.bootcss.com/jquery/2.2.2/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>
// 定义数据
var default_fc = {
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: {
type: "Polygon",
coordinates: [
[
[128, -17],
[133, -18],
[138, -19],
[140, -23],
[139, -27],
[130, -27],
[128, -24],
[127, -21],
[127, -17],
[128, -17]
]
]
},
properties: {}
}
]
};
// 定义宽高
var width = 960,
height = 500;
// 定义缩放e：equirectangular，o：orthographic
var scale0 = (width - 1) / 2 / Math.PI;
var eScale0 = (width - 1) / 2 / Math.PI,
oScale0 = (width - 1) / 4;
// 定义配置
//var projName = "orthographic";
var projName = "equirectangular";
var geometryLayer = null,
coastlinsLayer = null,
graticuleLayer = null;
// 入口（建立DOM树后执行）
$(document).ready(function() {
var svg = d3.select("body svg");
/**
定义地理投影：https://github.com/d3/d3-3.x-api-reference/blob/master/Geo-Projections.md#orthographic
API Reference ▸ Geo ▸ Geo Projections
orthographic：球面
equirectangular：平面
*/
var projOrtho = d3.geo
.orthographic()
.scale(oScale0)
.translate([width / 2, height / 2])
.clipAngle(90)
.precision(0.1);
var projRect = d3.geo
.equirectangular()
.scale(scale0)
.rotate([0.1, 0, 0])
.translate([width / 2, height / 2])
.precision(0.1);
var projection = projRect;
/**
定义地理路径生成器并设置坐标系：https://github.com/d3/d3-3.x-api-reference/blob/master/Geo-Paths.md
API Reference ▸ Geo ▸ Geo Paths
*/
var path = d3.geo.path().projection(projection);
coastlinsLayer = svg.append("g");
geometryLayer = svg.append("g");
graticuleLayer = svg.append("g");
// 添加网格线
var graticule = d3.geo.graticule();
graticuleLayer
.append("path")
.datum(graticule)
.attr("class", "graticule")
.attr("d", path);
// 设置地图下面的的内容
var time = +$("#recon-time").val();
var viewname = $("body").attr("data-view-name");
if (viewname == "feature_collection") {
$("#args-textarea").attr("rows", 14);
$("#args-textarea").val(JSON.stringify(default_fc, undefined, 4));
$("#RP").hide();
$("#RFC").show();
$("#commit").click();
} else if (viewname == "coastlines") {
$("#args-textarea").hide();
$("#RP").hide();
$("#RFC").hide();
$("#commit").click();
} else if (viewname == "points") {
}
// 下载并重绘数据（方法定义在下面）
reconstruct(time);
/**
定义地图拖动事件
*/
var m0, o0;
var drag = d3.behavior
.drag()
.on("dragstart", function() {
var proj = projection.rotate();
m0 = [d3.event.sourceEvent.pageX, d3.event.sourceEvent.pageY];
o0 = [-proj[0], -proj[1]];
})
.on("drag", function() {
if (projName != "orthographic") {
return;
}
if (m0) {
var m1 = [d3.event.sourceEvent.pageX, d3.event.sourceEvent.pageY],
o1 = [o0[0] + (m0[0] - m1[0]) / 4, o0[1] + (m1[1] - m0[1]) / 4];
projection.rotate([-o1[0], -o1[1]]);
//projection.rotate([-o1[0],0]);
}
// Update the map
path = d3.geo.path().projection(projection);
});
// 调用drag方法（this为svg），后面的 on XXX 会作用到this上
svg.call(drag);
// 设置缩放
setupZoom();
/**
设置缩放，并给svg绑定zoom改变事件
*/
function setupZoom() {
if (projName != "orthographic") {
scale0 = eScale0;
} else {
scale0 = oScale0;
}
// zoom and pan
var zoom = d3.behavior
.zoom()
.scale(scale0)
.translate([width / 2, height / 2])
.scaleExtent([scale0, 8 * scale0])
.on("zoom", function() {
projection.scale(zoom.scale());
if (projName != "orthographic") {
projection.translate(zoom.translate());
}
svg.selectAll("path").attr("d", path);
if (projName != "orthographic") {
geometryLayer
.selectAll(".pathPoint")
.attr("cx", function(d) {
return projection(d)[0];
})
.attr("cy", function(d) {
return projection(d)[1];
});
} else {
var circle = d3.geo.circle();
geometryLayer.selectAll(".pathPoint").remove();
reconstructedPoints.forEach(function(d) {
drawPoint(d, scale0 / zoom.scale());
});
}
});
svg.call(zoom);
}
var reconstructedPoints = [];
/**
下载并重绘点
*/
function reconstructPoints(time) {
var points = $("#args-textarea").val();
var url =
"https://gws.gplates.org/reconstruct/reconstruct_points/?points=" +
points +
"&time=" +
time +
"&model=SETON2012";
$("#request-url").html(
'<strong>Request URL:</strong> <br> <a href="' +
url +
'" target="_blank">' +
url
);
d3.json(url, function(error, data) {
$("#raw-data").html(
"<strong>Returned Raw Data:</strong> <pre>" +
JSON.stringify(data, undefined, 4) +
"</pre>"
);
geometryLayer.selectAll("*").remove();
var circle = d3.geo.circle();
d3.selectAll(".pathPoint").remove();
reconstructedPoints = [];
data.coordinates.forEach(function(d) {
reconstructedPoints.push([d[0], d[1]]);
drawPoint(d);
});
});
}
/**
绘制点
*/
function drawPoint(d, angle) {
var _angle = angle || 1;
if (projName == "orthographic") {
var circle = d3.geo.circle();
geometryLayer
.append("path")
//.datum({type: "Point", coordinates: [d[1], d[0]]})
.datum(circle.origin([d[0], d[1]]).angle(_angle)())
.attr("d", path.pointRadius(1))
.attr("class", "pathPoint")
.append("svg:title")
.text(function() {
return "Longitude: " + d[0] + "\nLatitude: " + d[1];
});
} else {
geometryLayer
.append("circle")
.datum([d[0], d[1]])
.attr("cx", function(d) {
return projection(d)[0];
})
.attr("cy", function(d) {
return projection(d)[1];
})
.attr("r", 3)
//.attr("d",path)
.style("fill", "red")
.attr("class", "pathPoint")
.append("svg:title")
.text(function(d) {
return "Longitude: " + d[0] + "\nLatitude: " + d[1];
});
}
}
/**
下载并重绘物种集合
*/
function reconstructFeatureCollection(time) {
var url =
"https://gws.gplates.org/reconstruct/reconstruct_feature_collection/?feature_collection=" +
$("#args-textarea").val() +
"&geologicage=" +
time +
"&model=SETON2012";
url = url.replace(/\s+/g, "");
$("#request-url").html(
'<strong>Request URL:</strong> <br> <a href="' +
url.replace(/"/g, """) +
'" target="_blank">' +
url
);
console.log(url);
d3.json(url, function(error, data) {
if (error || !data.features.length) {
alert("error. check the geojson request.");
return;
}
$("#raw-data").html(
"<strong>Returned Raw Data:</strong> <pre>" +
JSON.stringify(data, undefined, 4) +
"</pre>"
);
geometryLayer.selectAll("*").remove();
if (data.features[0].geometry.type == "Point") {
data.features.forEach(function(d) {
drawPoint(d.geometry.coordinates);
});
} else if (data.features[0].geometry.type == "MultiPoint") {
data.features.forEach(function(d) {
d.geometry.coordinates.forEach(function(dd) {
drawPoint(dd);
});
});
} else {
geometryLayer
.selectAll("*")
.data(data.features)
.attr("class", "RG")
.attr("d", path)
.enter()
.append("path")
.attr("d", path)
.attr("class", "RG")
//.attr("fill", "red")
.attr("stroke", "yellow");
}
});
}
/**
下载并重绘数据
*/
function reconstruct(time) {
d3.json(
"https://gws.gplates.org/reconstruct/coastlines_low/?time=" +
time +
"&apikey=mchin-e494599c-c81b-4972-acbb-c167728c9fb2&avoid_map_boundary",
function(error, topology) {
coastlinsLayer.selectAll(".coastline").remove();
coastlinsLayer
.selectAll(".coastline")
.data(topology.features)
.attr("class", "coastlines")
.attr("d", path)
.enter()
.append("path")
.attr("d", path)
.attr("class", "coastline")
.on("mouseover", function(d, i) {
d3.select(this).style("fill-opacity", 0.7);
d3.select(this).style("stroke", "red");
d3.select(this).style("stroke-width", "1px");
})
.on("mouseout", function(d, i) {
d3.select(this).style({
"fill-opacity": 0.5
});
d3.select(this).style("stroke", "blue");
d3.select(this).style("stroke-width", ".25px");
});
}
);
if (viewname == "feature_collection") {
reconstructFeatureCollection(time);
} else if (viewname == "points") {
reconstructPoints(time);
} else {
var url =
"https://gws.gplates.org/reconstruct/coastlines_low/?" +
"&time=" +
time +
"&model=SETON2012&avoid_map_boundary";
url = url.replace(/\s+/g, "");
$("#request-url").html(
"<strong>Request URL:</strong> <br> <a href=" +
url.replace(/"/g, """) +
' target="_blank">' +
url
);
}
}
/**
绘制数据
*/
function draw() {
if (projName == "orthographic") {
projection = projOrtho;
} else {
projection = projRect;
}
path = d3.geo.path().projection(projection);
console.log(123, svg.selectAll("path"));
svg.selectAll("path").attr("d", path);
d3.selectAll(".pathPoint").remove();
reconstructedPoints.forEach(function(d) {
drawPoint(d);
});
}
/**
监听各种事件
*/
d3.select("#select-projection").on("change", function() {
projName = this.value;
setupZoom();
draw();
});
d3.select("#select-function").on("change", function() {
if (+this.value == 0) {
$("#RP").hide();
$("#RFC").hide();
} else if (+this.value == 1) {
$("#args-textarea").attr("rows", 2);
$("#args-textarea").val("95,54,142,-33");
$("#RP").show();
$("#RFC").hide();
} else if (+this.value == 2) {
$("#args-textarea").attr("rows", 14);
$("#args-textarea").val(JSON.stringify(default_fc, undefined, 4));
$("#RP").hide();
$("#RFC").show();
$("#commit").click();
}
});
//d3.select("#recon-time").on("blur", function(){
// reconstruct(+this.value);
//});
d3.select("#commit").on("click", function() {
reconstruct(+$("#recon-time").val());
$("#time-label").html($("#recon-time").val() + " Ma");
//$("#request-url").hide();
});
//d3.select('#show-url').on('click', function(){
// $("#request-url").show();
//});
//d3.select("#show-data").on('click', function(){
// $("#raw-data").show();
//});
});
</script>
</body>
</html>
DNS 搜索 - dig 命令的更多相关文章
- DNS系列—dig命令的使用
目录 如何安装dig dig常见用法 dig的基本语法 简单dig查询域名 指定DNS服务器查询 反查IP对应域名 如何安装dig dig是bind下面常见的工具,在linux系统上经常回用的一个dn ...
- linux dig 命令
dig 命令主要用来从 DNS 域名服务器查询主机地址信息. 查询单个域名的 DNS 信息 dig 命令最典型的用法就是查询单个主机的信息. $ dig baidu.com dig 命令默认的输出信息 ...
- linux dig 命令使用方法
ref:https://www.imooc.com/article/26971?block_id=tuijian_wz dig 命令主要用来从 DNS 域名服务器查询主机地址信息. 查询单个域名的 D ...
- Linux下解析域名命令-dig 命令使用详解
Linux下解析域名除了使用nslookup之外,开可以使用dig命令来解析域名,dig命令可以得到更多的域名信息.dig 命令主要用来从 DNS 域名服务器查询主机地址信息.dig的全称是 (dom ...
- linux dig命令 转
dig 命令主要用来从 DNS 域名服务器查询主机地址信息. 查询单个域名的 DNS 信息 dig 命令最典型的用法就是查询单个主机的信息. $ dig baidu.com dig 命令默认的输出信息 ...
- 【转载】 linux dig 命令使用方法
原文地址: https://www.imooc.com/article/26971?block_id=tuijian_wz 作者:ibeautiful来源:慕课网 ------------------ ...
- linux dig 命令使用
linux dig 命令使用方法 2018.04.20 15:47 43101浏览 dig 命令主要用来从 DNS 域名服务器查询主机地址信息. 查询单个域名的 DNS 信息 dig 命令最典型的 ...
- aix DNS 配置以及网络命令traceroute和nslookup 和 dig 命令
DNS 域名系统 (DNS) 服务器将 IP 地址解释为其他计算机或网站的域名和地址.如果没有 DNS,您需要在 Web 浏览器中输入 IP 地址.例如,如果您未访问 DNS 并希望查看 IBM 的网 ...
- Linux命令之dig命令挖出DNS的秘密
=== [初次见面] 我相信使用nslookup的同学一定比使用dig的同学多,所以还是有必要花些时间给大家介绍一下dig的. dig,和nslookup作用有些类似,都是DNS查询工具. dig,其 ...
随机推荐
- Git小结---So far.......
基本的: 1. 在配置了SSH Key的情况下,clone项目时使用:git clone git@github.com/用户名/仓库名.git 使用这种方式而不使用https的方式的好处在于,在pu ...
- JavaScript concat() 方法
昨天接触了一个项目,我的tbody变量是一个数组,然后数据返回的是数组里面包含对象,我刚开始没看懂这个concat的作用,然后百度一下javascript中的用法,以此记录concat的方法: dat ...
- window常见事件onload
1, window.onload 是窗口(页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像,脚本文件,css文件等),就调用的处理函数 下面的代码,当点击按钮,并不会弹出对话框,因为页面还 ...
- ALV打印不显示打印界面的问题
用OO的方式screen0 不画屏幕会产生这个问题,解决办法就是不用screen0 要自己画一个区域
- mysql注入大全及防御
0.明白存在的位置:get型 post型 cookie型 http头注入 1.先测试注入点,注册框.搜索框.地址栏啥的,判断是字符型,搜索型还是数字型 字符型 1' and '1'='1 成功, 1' ...
- oracle获取年、月、日
--获取年 select extract(year from date'2011-05-17') year from dual; --获取月 select extract(month from dat ...
- Codeforces 899 1-N两非空集合最小差 末尾最多9对数计算 pair/链表加优先队列最少次数清空
A /*Huyyt*/ #include<bits/stdc++.h> #define mem(a,b) memset(a,b,sizeof(a)) #define pb push_bac ...
- java高并发核心要点|系列3|锁的底层实现原理|ABA问题
继续讲CAS算法,上篇文章我们知道,CAS算法底层实现,是通过CPU的原子指令来实现. 那么这里又有一个情景: 话说,有一个线程one从内存位置V中取出A,这时候另一个线程two也从内存中取出A,并且 ...
- bootstrap-table给每一行数据添加按钮，并绑定事件
https://blog.csdn.net/mht1829/article/details/72633100 https://blog.csdn.net/qq_39215166/article/det ...
- Lengauer-Tarjan算法的相关证明
Lengauer-Tarjan算法的相关证明 0. 约定 为简单起见,下文中的路径均指简单路径(事实上非简单路径不会对结论造成影响). \(V\)代表图的点集,\(E\)代表图的边集,\(T\)代表图 ...