数据可视化-D3js-展示古地理图和古地理坐标反算^_^gplates古地理坐标反算接口

最新推荐文章于 2024-07-12 16:42:46 发布

anleng6817

最新推荐文章于 2024-07-12 16:42:46 发布

阅读量597

点赞数

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/jffun-blog/p/9514377.html

版权

在线演示

<!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: .5px;
            stroke-opacity: .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
                            ],

最低0.47元/天解锁文章

anleng6817

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
数据可视化-D3js-展示古地理图和古地理坐标反算^_^gplates古地理坐标反算接口

在线演示<!DOCTYPE html><html><head> <link type="image/png" rel="icon" href="//portal.gplates.org/static/img/GPlates-icon.png"> <meta charset="utf-8"> <...
复制链接

扫一扫