前段时间自己研究了demo就是把某个区域的某个位置通过经纬度在地图上可视化。其实就是使用了第三方插件，比现在比较火的可视化插件d3.js echart.js。大致思路就是，把要用到的位置的geojson数据报错，然后本地调用这些数据，通过d3.js或者echart.js通过地图中的api把他显示到页面上，这样可以更直观更方便的进行预览，也就是现在比较火的数据可视化，也是未来前端发展的一个不错的方向。由于第一次做所以有些需要优化的地方自己可以根据需求优化。代码如下：

html:

<!DOCTYPE html>
<html>
<!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">-->
<head lang="en">
    <meta charset="UTF-8">
    <meta name="keywords" content="天地图"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>政务服务平台</title>
    <!--<link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">-->
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="http://api.tianditu.com/api?v=4.0"></script>

    <!–[if lt IE 8]>
    <script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE11.js” type=”text/javascript”></script>
    <![endif]–>
</head>
<body onLoad="onLoad()">

<!--地图调用-->
<div id="main"></div>
<!--下拉菜单-->
<div class="select">
    <!--头部-->
    <div class="navbar">
        <div class="logo"></div>
        <div class="text">政务服务平台</div>
        <div class="navTab"><img src="data:images/icon.png" width="100%"/>
            <div class="menu">菜单</div>
        </div>
    </div>
    <!--下部弹出的详情-->
    <div class="footerbar">
        <!--下拉框左边-->
        <div class="footerbar_left">
            <!--专题logo-->
            <div class="top"><img src="data:images/click_zhuanti.png" width="100%" height="100%"/></div>
            <!--搜索logo-->
        </div>
        <!--下拉框右边-->
        <div class="footerbar_right">
            <div class="top">
                <div class="cont">
                    <div class="cont_text1">专题</div>
                    <div class="cont_text2">清除所选</div>
                </div>
            </div>
            <div class="bottom">
                    <!--水利工程开始list_1-->
                    <div class="tabs">水利工程<span class="jiantou_icon"><img src="data:images/three_dian.png"/></span></div>
                        <ul class="cont" id="list_1">
                            <li>
                                <span><input type="checkbox" class="checkbox" id="sz"></span>
                                <span>水闸</span>
                                <span><img src="data:images/shuizha_logo.png" width="24px;" height="24px;"/></span>
                            </li>
                            <li>
                                <span><input type="checkbox" class="checkbox" id="sb"></span>
                                <span>水坝</span>
                                <span><img src="data:images/shuiba_logo.png" width="24px;" height="24px;"/></span>
                            </li>
                            <li>
                                <span><input type="checkbox" class="checkbox" id="bz"></span>
                                <span>泵站</span>
                                <span><img src="data:images/bangzhan_logo.png" width="24px;" height="24px;"/></span>
                            </li>
                        </ul>
                    <!--水利工程结束-->

                    <!--教育机构开始list_2-->
                    <div class="tabs">教育机构<span class="jiantou_icon"><img src="data:images/three_dian.png"/></span></div>
                        <ul class="cont" id="list_2">
                            <li>
                                <span><input type="checkbox" class="checkbox" id="sm"></span>
                                <span>小学</span>
                                <span><img src="data:images/xiaoxue_logo.png" width="24px;" height="24px;"/></span>
                            </li>
                            <li>
                                <span><input type="checkbox" class="checkbox" id="md"></span>
                                <span>中学</span>
                                <span><img src="data:images/zhongxue_logo.png" width="24px;" height="24px;"/></span>
                            </li>
                            <li>
                                <span><input type="checkbox" class="checkbox" id="dx"></span>
                                <span>大学</span>
                                <span><img src="data:images/daxue_logo.png" width="24px;" height="24px;"/></span>
                            </li>
                            <li>
                                <span><input type="checkbox" class="checkbox" id="yry"></span>
                                <span>幼儿园</span>
                                <span><img src="data:images/youeryuan_logo.png" width="24px;" height="24px;"/></span>
                            </li>
                        </ul>
                    <!--教育机构结束-->

                    <!--旅游景点开始list_3-->
                    <div class="tabs">旅游景点<span class="jiantou_icon"><img src="data:images/three_dian.png"/></span></div>
                        <ul class="cont" id="list_3">
                            <li>
                                <span><input type="checkbox" class="checkbox" id="input_5"></span>
                                <span>5A级景点</span>
                                <span><img src="data:images/5a_logo.png"/></span>
                            </li>
                            <li>
                                <span><input type="checkbox" class="checkbox" id="input_4"/></span>
                                <span>4A级景点</span>
                                <span><img src="data:images/4a_logo.png"/></span>
                            </li>
                            <li>
                                <span><input type="checkbox" class="checkbox" id="input_3"/></span>
                                <span>3A级景点</span>
                                <span><img src="data:images/3a_logo.png"/></span>
                            </li>
                            <li>
                                <span><input type="checkbox" class="checkbox" id="input_2"/></span>
                                <span>2A级景点</span>
                                <span><img src="data:images/2a_logo.png"/></span>
                            </li>
                        </ul>
                    <!--旅游景点结束-->

                    <!--消防设施开始list_4-->
                    <div class="tabs">消防设施<span class="jiantou_icon"><img src="data:images/three_dian.png"/></span></div>
                        <ul class="cont" id="list_4">
                            <li>
                                <span><input type="checkbox" class="checkbox"></span>
                                <span>消防栓</span>
                                <span><img src="data:images/xiaofang.png" width="24px;" height="24px;"/></span>
                            </li>
                            <li>
                                <span><input type="checkbox" class="checkbox"></span>
                                <span>接合器</span>
                                <span><img src="data:images/jieheqi_logo.png" width="24px;" height="24px;"/></span>
                            </li>
                        </ul>
                    <!--消防设施结束-->

                    <!--司法服务开始list_5-->
                    <div class="tabs">司法服务<span class="jiantou_icon"><img src="data:images/three_dian.png"/></span></div>
                        <ul class="cont" id="list_5">
                            <li>
                                <span><input type="checkbox" class="checkbox" id="sfs"></span>
                                <span>司法所</span>
                                <span><img src="data:images/JusticBureau_logo.png" width="24px;" height="24px;"/></span>
                            </li>
                            <li>
                                <span><input type="checkbox" class="checkbox" id="lssws"></span>
                                <span>律师事务所</span>
                                <span><img src="data:images/firm_logo.png" width="24px;" height="24px;"/></span>
                            </li>
                            <li>
                                <span><input type="checkbox" class="checkbox" id="yzzx"></span>
                                <span>援助中心</span>
                                <span><img src="data:images/legalCenter_logo.png" width="24px;" height="24px;"/></span>
                            </li>
                            <li>
                                <span><input type="checkbox" class="checkbox" id="jdjg"></span>
                                <span>鉴定机构</span>
                                <span><img src="data:images/jianding_logo.png" width="24px;" height="24px;"/></span>
                            </li>
                            <li>
                                <span><input type="checkbox" class="checkbox" id="gzc"></span>
                                <span>公证处</span>
                                <span><img src="data:images/nativeoffice_logo.png" width="24px;" height="24px;"/></span>
                            </li>
                        </ul>
                    <!--司法服务结束-->

                    <!--公路设施开始list_6-->
                    <div class="tabs">公路设施<span class="jiantou_icon"><img src="data:images/three_dian.png"/></span></div>
                        <ul class="cont" id="list_6">
                            <li>
                                <span><input type="checkbox" class="checkbox" id=""></span>
                                <span>限高架</span>
                                <span><img src="data:images/gao.png" width="24px;" height="24px;"/></span>
                            </li>
                            <li>
                                <span><input type="checkbox" class="checkbox" id=""></span>
                                <span>百米桩</span>
                                <span><img src="data:images/bai.png" width="24px;" height="24px;"/></span>
                            </li>
                            <li>
                                <span><input type="checkbox" class="checkbox" id=""></span>
                                <span>里程碑</span>
                                <span><img src="data:images/licheng.png" width="24px;" height="24px;"/></span>
                            </li>

                        </ul>
                    <!--公路设施结束-->

                    <!--地下管网开始list_7-->
                    <div class="tabs">地下管网<span  class="jiantou_icon"><img src="data:images/three_dian.png"/></span></div>
                        <ul class="cont" id="list_7">
                            <li>
                                <span><input type="checkbox" class="checkbox"></span>
                                <span>热力</span>
                                <span><img src="data:images/reli_logo.png" width="24px;" height="24px;"/></span>
                            </li>
                            <li>
                                <span><input type="checkbox" class="checkbox"></span>
                                <span>燃气</span>
                                <span><img src="data:images/ranqi_logo.png" width="24px;" height="24px;"/></span>
                            </li>
                            <li>
                                <span><input type="checkbox" class="checkbox"></span>
                                <span>给水</span>
                                <span><img src="data:images/geishui_logo.png" width="24px;" height="24px;"/></span>
                            </li>
                            <li>
                                <span><input type="checkbox" class="checkbox"></span>
                                <span>排水</span>
                                <span><img src="data:images/paishui_logo.png" width="24px;" height="24px;"/></span>
                            </li>
                            <li>
                                <span><input type="checkbox" class="checkbox"></span>
                                <span>电信</span>
                                <span><img src="data:images/dianxin_logo.png" width="24px;" height="24px;"/></span>
                            </li>
                            <li>
                                <span><input type="checkbox" class="checkbox"></span>
                                <span>电力</span>
                                <span><img src="data:images/dianli_logo.png" width="24px;" height="24px;"/></span>
                            </li>
                        </ul>
                    <!--地下管网结束-->

                    <!--安全监督开始list_8-->
                    <div class="tabs">安全监督<span class="jiantou_icon"><img src="data:images/three_dian.png"/></span></div>
                        <ul class="cont" id="list_8">
                            <li>
                                <span><input type="checkbox" class="checkbox"></span>
                                <span>危化企业</span>
                                <span><img src="data:images/weihuaqiye_logo.png" width="24px;" height="24px;"/></span>
                            </li>
                            <li>
                                <span><input type="checkbox" class="checkbox"></span>
                                <span>摄像头</span>
                                <span><img src="data:images/shexiangtou.png" width="24px;" height="24px;"/></span>
                            </li>
                            <li>
                                <span><input type="checkbox" class="checkbox"></span>
                                <span>重点设施</span>
                                <span><img src="data:images/zhongdiansheshi_logo.png" width="24px;" height="24px;"/></span>
                            </li>

                        </ul>
                    <!--安全监督结束-->

                    <!--高新企业开始list_9-->
                    <div class="tabs">高新企业<span class="jiantou_icon"><img src="data:images/three_dian.png"/></span></div>
                        <ul class="cont" id="list_9">
                            <li>
                                <span><input type="checkbox" class="checkbox" id="littleCompany"></span>
                                <span>小巨人企业</span>
                                <span><img src="data:images/littlestrong_logo.png" width="24px;" height="24px;"/></span>
                            </li>
                            <li>
                                <span><input type="checkbox" class="checkbox" id="scienceCompany"></span>
                                <span>新技术企业</span>
                                <span><img src="data:images/science_logo.png" width="24px;" height="24px;"/></span>
                            </li>
                        </ul>
                    <!--高新企业结束-->

                    <!--武清区域开始list_10-->
                    <div class="tabs">武清信息<span class="jiantou_icon"><img src="data:images/three_dian.png"/></span></div>
                    <ul class="cont" id="list_10">
                        <li>
                            <span><input type="checkbox" class="checkbox" id="wqqy"></span>
                            <span>武清区域图</span>
                            <span><img src="data:images/quyu.png" width="24px;" height="24px;"/></span>
                        </li>
                        <li>
                            <span><input type="checkbox" class="checkbox" id="wqqyg"></span>
                            <span>武清区域国道</span>
                            <span><img src="data:images/guodao.png" width="24px;" height="24px;"/></span>
                        </li>
                        <li>
                            <span><input type="checkbox" class="checkbox" id="wqqys"></span>
                            <span>武清区域省道</span>
                            <span><img src="data:images/shengdao.png" width="24px;" height="24px;"/></span>
                        </li>
                        <li>
                            <span><input type="checkbox" class="cheakbox" id="wqqyt"></span>
                            <span>武清区城镇</span>
                            <span><img src="data:images/red_logo.png" width="24px;" height="24px;"/></span>
                        </li>
                    </ul>
                    <!--武清区域结束-->

                    <!--天津各区人口面积统计开始list_11-->
                <div class="tabs">人口面积<span class="jiantou_icon"><img src="data:images/three_dian.png"/></span></div>
                <ul class="cont" id="list_11">
                    <li>
                        <span><input type="checkbox" class="checkbox" id="persons"></span>
                        <span>人口</span>
                        <span><img src="data:images/renkou.png" width="24px;" height="24px;"/></span>
                    </li>
                    <li>
                        <span><input type="checkbox" class="checkbox" id="areas"></span>
                        <span>面积</span>
                        <span><img src="data:images/mianji.png" width="24px;" height="24px;"/></span>
                    </li>
                </ul>
                <!--天津各区人口面积统计结束-->
            </div>
        </div>
        <div class="bottom_footer">
            <img src="data:images/footer_icon.png"/>
        </div>
    </div>
    <!--底部-->
</div>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.ztree.core.js" ></script>
<script type="text/javascript" src="js/jquery.ztree.excheck.js"></script>
<script src="js/echarts.js"></script>
<script type="text/javascript" src="js/d3.v3.js" ></script>
<script type="text/javascript" src="js/main.js" ></script>
<!--获取地图api-->
<script>
    var map,marker;
    var zoom = 8;
    function onLoad(){
        map = new T.Map('main',{
            projectino:"EPSG:900913"
        });
        map.centerAndZoom(new T.LngLat(117.477039, 39.281725),zoom);
    }

</script>
</body>
</html>

js:
/**
 * Created by Administrator on 2017/3/16.
 */
//菜单下拉
$(document).ready(function (e) {
    $(function (e) {
        $(".select .navbar .navTab").click(function(){
            $(".select .footerbar").slideToggle();
        });
        $(".bottom_footer img").click(function(){
            $(".select .footerbar").slideToggle();
        });

    });
});

$(function () {
    $(".select .navbar .navTab img").mouseover(function () {
        $(".select .navbar .navTab .menu").css("display","block");
    });
    $(".select .navbar .navTab img").mouseout(function () {
        $(".select .navbar .navTab .menu").css("display","none");
    });
    $()
});
//二级导航下拉
$(".bottom .tabs").click(function(){

    $(this).toggleClass("changeColor").siblings(".bottom").removeClass("changeColor");
    $(this).next(".cont").slideToggle(300).siblings(".cont").slideUp(500);
});
//清除所有
$(".footerbar_right .top .cont .cont_text2").click(function(){
    $("input").attr("checked",false);
    map.clearOverLays();
});

/*复选框点击事件开始*/
$(function(){
    //水利工程开始点击事件开始
    $("#list_1").find("li").each(function(i){

    })
    //水利工程点击时间结束

    //教育机构点击事件开始
    $("#list_2").find("li").each(function(i){

    })
    //教育机构点击事件结束

  //旅游景点点击事件开始
    $("#list_3").find("li").each(function (i) {
        if (i == 0) {
            $("#input_5").click(function () {
                if (this.checked) {
                    tourismFive();
                }
                else {
                    var str = /5a.png/;
                    var imgSrc=document.querySelectorAll("img");
                    for(var i=0;i<imgSrc.length;i++){
                        if(imgSrc[i].src.match(str)){
                            imgSrc[i].style.display="none";
                        }
                    }
                }
            });
        }

         else if (i == 1) {
            $("#input_4").click(function () {
                if (this.checked) {
                    tourismFour();
                }
                else {
                    var str = /4a.png/;
                    var imgSrc=document.querySelectorAll("img");
                    for(var i=0;i<imgSrc.length;i++){
                        if(imgSrc[i].src.match(str)){
                            imgSrc[i].style.display="none";
                        }
                    }
                }

            });
        }
         else if (i == 2) {
            $("#input_3").click(function () {
                if(this.checked) {
                    tourismThree();

                }
                else {
                    var str = /3a.png/;
                    var imgSrc=document.querySelectorAll("img");
                    for(var i=0;i<imgSrc.length;i++){
                        if(imgSrc[i].src.match(str)){
                            imgSrc[i].style.display="none";
                        }
                    }

                }
                console.log(this.checked)
            });
         }
        else if (i == 3) {
            $("#input_2").click(function () {
                if(this.checked) {
                    tourismTwo();
                }
                else {
                    var str = /2a.png/;
                    var imgSrc=document.querySelectorAll("img");
                    for(var i=0;i<imgSrc.length;i++){
                        if(imgSrc[i].src.match(str)){
                            imgSrc[i].style.display="none";
                        }
                    }
                }
            });
        }
    });
  //旅游景点点击事件结束

    //消防设施点击事件开始
    $("#list_4").find("li").each(function(i){

    })
    //消防设施点击事件结束

    //司法服务点击事件开始
    $("#list_5").find("li").each(function(i){
        if (i == 0) {
            //司法所
            $("#sfs").click(function () {
                if (this.checked) {
                    Judical();
                }
                else {
                    var str = /JusticBureau.png/;
                    var imgSrc=document.querySelectorAll("img");
                    for(var i=0;i<imgSrc.length;i++){
                        if(imgSrc[i].src.match(str)){
                            imgSrc[i].style.display="none";
                        }
                    }
                }
            });
        }

        else if (i == 1) {
                //律师事务所
            $("#lssws").click(function () {
                if (this.checked) {
                    Firm();
                }
                else {
                    var str = /firm.png/;
                    var imgSrc=document.querySelectorAll("img");
                    for(var i=0;i<imgSrc.length;i++){
                        if(imgSrc[i].src.match(str)){
                            imgSrc[i].style.display="none";
                        }
                    }
                }

            });
        }
        else if (i == 2) {
            //援助中心
            $("#yzzx").click(function () {
                if(this.checked) {
                    LegalAidCenter();

                }
                else {
                    var str = /legalCenter.png/;
                    var imgSrc=document.querySelectorAll("img");
                    for(var i=0;i<imgSrc.length;i++){
                        if(imgSrc[i].src.match(str)){
                            imgSrc[i].style.display="none";
                        }
                    }

                }

            });
        }
        else if (i == 3) {
            //鉴定机构
            $("#jdjg").click(function () {
                if(this.checked) {
                 Jianding();
                }
                else {
                    var str = /jianding.png/;
                    var imgSrc=document.querySelectorAll("img");
                    for(var i=0;i<imgSrc.length;i++){
                        if(imgSrc[i].src.match(str)){
                            imgSrc[i].style.display="none";
                        }
                    }
                }
            });
        }
        else if (i == 4) {
            //公证处
            $("#gzc").click(function () {
                if(this.checked) {
                    NotarialOffice();
                }
                else {
                    var str = /nativeoffice.png/;
                    var imgSrc=document.querySelectorAll("img");
                    for(var i=0;i<imgSrc.length;i++){
                        if(imgSrc[i].src.match(str)){
                            imgSrc[i].style.display="none";
                        }
                    }
                }
            });
        }
    })
    //司法服务点击事件结束

    //公路设施开始
    $("#list_6").find("li").each(function(i){})
    //公路设施结束

    //高新企业开始
    $("#list_9").find("li").each(function (i) {
        if(i == 0){
            //小巨人企业
            $("#littleCompany").click(function () {
                if(this.checked){
                    //CompanyLittleGiant();
                }
                else{
                    var str = /littlestrong.png/;
                    var imgSrc=document.querySelectorAll("img");
                    for(var i=0;i<imgSrc.length;i++){
                        if(imgSrc[i].src.match(str)){
                            imgSrc[i].style.display="none";
                        }
                    }
                }
            })
        }
        else if(i == 1){
            //高新技术企业
            $("#scienceCompany").click(function(){
                if(this.checked){
                    CompanyScience();
                }
                else{
                    var str = /science.png/;
                    var imgSrc=document.querySelectorAll("img");
                    for(var i=0;i<imgSrc.length;i++){
                        if(imgSrc[i].src.match(str)){
                            imgSrc[i].style.display="none";
                        }
                    }
                }
            })
        }
    })
    //高新企业结束

    //武清信息开始
    $("#list_10").find("li").each(function (i) {
        if(i == 0){
            //武清区域图
            $("#wqqy").click(function () {
                if(this.checked){
                    drawMap();
                }
                else{
                    map.clearOverLays();
                }
            })
        }
        else if(i == 1){
            //武清国道
            $("#wqqyg").click(function(){
                if(this.checked){
                    drawNationalRoad();
                }
                else{
                    map.clearOverLays();
                }
            })
        }
        else if(i == 2){
            //武清省道
            $("#wqqys").click(function(){
                if(this.checked){
                drawProvincialRoad();
                }
                else{
                    map.clearOverLays();
                }
            })
        }
        else if(i == 3){
            //武清城镇
            $("#wqqyt").click(function(){
                if(this.checked){
                    StreetTownship();
                }
                else{
                    var str = /red.png/;
                    var imgSrc=document.querySelectorAll("img");
                    for(var i=0;i<imgSrc.length;i++){
                        if(imgSrc[i].src.match(str)){
                            imgSrc[i].style.display="none";
                        }
                    }
                }
            })
        }
    })
    //武清信息结束

    //天津区域面积图开始
    $("#list_11").find("li").each(function (i) {
        if(i == 0){
            //天津面积图
            $("#areas").click(function () {
                if(this.checked){
                    area();
                }
                else{
                    map.clearOverLays();
                }
            })
        }
        else if(i == 1){
            //天津人口图
            $("#persons").click(function(){
                if(this.checked){
                    personNum();
                }
                else{
                    map.clearOverLays();
                }
            });
        }

    })
});
/*复选框点击事件结束*/

//定义武清容器宽高
var width = 0;height = 0;

//定义svg
var svg = d3.select('#main').append('svg')
    .attr('class', 'overlay')
    .attr('width', width)
    .attr('height', height);

//定义地图、路线、标记所在的g标签
//画区域
var g_area = svg.append('g')
    .attr('transform','translate(0,0)');
//画国道
var g_NationalLine = svg.append('g')
    .attr('transform','translate(0,0)');
//画省道
var g_ProvincialLine = svg.append('g')
    .attr('transform','translate(0,0)');
//画城镇
var g_StreetTownship = svg.append('g')
    .attr('transform','translate(0,0)');

//设置颜色
var color = d3.scale.category20();
//设置中心点
var projection = d3.geo.mercator()
    .center([117.056345,39.407702])
    .scale(20000)
    .translate([width/2,height/2]);
//设置投影函数
var path = d3.geo.path().projection(projection);
//武清区函数
function drawMap(){
    d3.json("data/Wuqing_area.json",function(error, root) {
        if(error)
            return console.error(error);
        var features = root.features;
        for(var i = 0; i<features.length;i++) {
            var feature = features[i]
            var data = feature.geometry.coordinates;
            if (data.length > 0) {
                for (var j = 0; j < data.length; j++) {
                    points = [];
                    for (var k = 0; k < data[j].length; k++) {
                        var data0 = data[j][k];
                        //console.log(data0);
                        points.push(new T.LngLat(data0[0], data0[1]));
                    }

                }

            }
            //创建面对象
            var polygon = new T.Polygon(points,{
                color: "#5E5C5C", weight: 2, opacity: 1, fillColor: "#FFFFFF", fillOpacity: 0
            });
            //向地图上添加面
            map.addOverLay(polygon);
            //console.log(points)
        }

})
}
//画国道
function drawNationalRoad(){
    d3.json("data/Wuqing_NationalRoad.json", function (error,root) {
        if(error)
        return console.error(error);
        var features = root.features;
        for(var i = 0; i<features.length;i++){
             var feature = features[i]
            var data = feature.geometry.coordinates;
            points = [];
            if(data.length>0){
                for(var j =0;j<data.length;j++){

                     if(data[j].length>2){
                        for(var k =0 ;k<data[j].length;k++){

                            var data1 = data[j][k];
                            points.push(new T.LngLat(data1[0],data[1]));
                                //console.log(data1);
                        }
                    }else {
                         var data2 = data[j];
                         //console.log(data2);
                         points.push(new T.LngLat(data2[0],data2[1]));

                    }
                }
                //console.log(points)
            }
            //创建线对象
            var line = new T.Polyline(points,{color:"#E0901D",opacity:1,weight:4});
            //向地图上添加线
            map.addOverLay(line);

       }
    })
}
//省道
function drawProvincialRoad(){
    d3.json("data/Wuqing_ProvincialRoad.json",function(error,root){
        if(error)
            return console.error(error);
        var features = root.features;
        for(var i = 0; i<features.length;i++) {
            var feature = features[i]
            var data = feature.geometry.coordinates;
            points = [];
            if (data.length > 0) {
                for (var j = 0; j < data.length; j++) {
                    if (data[j].length > 2) {
                        for (var k = 0; k < data[j].length; k++) {
                            //console.log(data[j][k])
                            var data1 = data[j][k];

                            points.push(new T.LngLat(data1[0], data1[1]));
                        }
                    } else {
                        //console.log(data[j]);
                        var data2 = data[j];
                        points.push(new T.LngLat(data2[0], data2[1]));
                    }
                }

            }
            //创建线对象
            var line = new T.Polyline(points,{color:"#6E41D0",opacity:1,weight:3});
            //向地图上添加线
            map.addOverLay(line);
        }
        //console.log(points)
    })
}
//城镇
function StreetTownship(){
    d3.json("data/Wuqing_StreetTownship.json",function(error,root){
        if(error)
        return console.error(error);
        var features = root.features;
        for(var i=0;i<features.length;i++){
            var icon = new T.Icon({
                        iconUrl: "./images/red.png",
                        icsonSize: new T.Point(20, 20),
                        iconAnchor: new T.Point(0,0)
                    });
                //console.log(features[i].geometry.coordinates[i]);
            var coor = features[i].geometry.coordinates[0][0];
            for(var j =0;j<coor.length;j++){
                var marker = new T.Marker(new T.LngLat(coor[0],coor[1]), {icon: icon});
                map.addOverLay(marker);
                //console.log(coor);
            }
        }
    })
}

//景区
//画2A景点
function tourismTwo(){
    d3.json("data/Tourism_2A.json",function(error,root) {
        if (error)
            return console.error(error);
        //console.log(root.features);
        var features = root.features;
        for (var i = 0; i < features.length; i++) {
           var feature = features[i];
            var coor = feature.geometry.coordinates;
            var icon = new T.Icon({
                iconUrl: "./images/2a.png",
                iconSize: new T.Point(36, 36),
                iconAnchor: new T.Point(0,0)
            });
             for(j = 0;j<coor.length;j++){
                var marker = new T.Marker(new T.LngLat(coor[0],coor[1]), {icon: icon});
                map.addOverLay(marker);
                     //console.log(coor)
             }
        }
    })
}
//画3A景点
function tourismThree(){
    d3.json("data/Tourism_3A.json",function(error,root) {
        if (error)
            return console.error(error);
        //console.log(root.features);
        var features = root.features;
        for (var i = 0; i < features.length; i++) {
            var feature = features[i];
            var coor = feature.geometry.coordinates;
            var icon = new T.Icon({
                iconUrl: "./images/3a.png",
                iconSize: new T.Point(36, 36),
                iconAnchor: new T.Point(0,0)
            });
            for(j = 0;j<coor.length;j++){
                var marker = new T.Marker(new T.LngLat(coor[0],coor[1]), {icon: icon});
                map.addOverLay(marker);

                //console.log(coor)
            }
        }
    })
}
//画4A景点
function tourismFour(){
    d3.json("data/Tourism_4A.json",function(error,root) {
        if (error)
            return console.error(error);
        //console.log(root.features);
        var features = root.features;
        for (var i = 0; i < features.length; i++) {
            var feature = features[i];
            var coor = feature.geometry.coordinates;
            var icon = new T.Icon({
                iconUrl: "./images/4a.png",
                iconSize: new T.Point(36, 36),
                iconAnchor: new T.Point(0,0)
            });
            for(j = 0;j<coor.length;j++){
                var marker = new T.Marker(new T.LngLat(coor[0],coor[1]), {icon: icon});
                map.addOverLay(marker);

            }
        }
    })
}
//画5A景点
function tourismFive(){
    d3.json("data/Tourism_5A.json",function(error,root) {
        if (error)
            return console.error(error);
        //console.log(root.features);
        var features = root.features;
        for (var i = 0; i < features.length; i++) {
            var feature = features[i];
            var coor = feature.geometry.coordinates;
            var icon = new T.Icon({
                iconUrl: "./images/5a.png",
                iconSize: new T.Point(36,36),
                iconAnchor: new T.Point(0,0)
            });
            for(j = 0;j<coor.length;j++){
                var marker = new T.Marker(new T.LngLat(coor[0],coor[1]), {icon: icon});
                map.addOverLay(marker);
                //console.log(coor)
            }
        }
    })
}
     //司法服务
//画司法局
function JusticBureau(){
        d3.json("data/Low_JusticBureau.json",function(error,root) {
            if (error)
                return console.error(error);
            //console.log(root.features);
            var features = root.features;
            for (var i = 0; i < features.length; i++) {
                var feature = features[i];
                var coor = feature.geometry.coordinates;
                var icon = new T.Icon({
                    iconUrl: "./images/judical.png",
                    iconSize: new T.Point(20,20),
                    iconAnchor: new T.Point(0,0)
                });
                for(j = 0;j<coor.length;j++){
                    var marker = new T.Marker(new T.LngLat(coor[0],coor[1]), {icon: icon});
                    map.addOverLay(marker);
                    //console.log(coor)
                }
            }
        })
}
//画律师事务所
function Firm(){
    d3.json("data/Low_Firm.json",function(error,root) {
        if (error)
            return console.error(error);
        //console.log(root.features);
        var features = root.features;
        for (var i = 0; i < features.length; i++) {
            var feature = features[i];
            var coor = feature.geometry.coordinates;
            var icon = new T.Icon({
                iconUrl: "./images/firm.png",
                iconSize: new T.Point(20,20),
                iconAnchor: new T.Point(0,0)
            });
            for(j = 0;j<coor.length;j++){
                var marker = new T.Marker(new T.LngLat(coor[0],coor[1]), {icon: icon});
                map.addOverLay(marker);
                //console.log(coor)
            }
        }
    })
}
//画法律援助中心
function LegalAidCenter(){
    d3.json("data/LegalAidCenter.json",function(error,root) {
        if (error)
            return console.error(error);
        //console.log(root.features);
        var features = root.features;
        for (var i = 0; i < features.length; i++) {
            var feature = features[i];
            var coor = feature.geometry.coordinates;
            var icon = new T.Icon({
                iconUrl: "./images/legalCenter.png",
                iconSize: new T.Point(20,20),
                iconAnchor: new T.Point(0,0)
            });
            for(j = 0;j<coor.length;j++){
                var marker = new T.Marker(new T.LngLat(coor[0],coor[1]), {icon: icon});
                map.addOverLay(marker);
                //console.log(coor)
            }
        }
    })
}
//公证处
function NotarialOffice(){
    d3.json("data/Law_NotarialOffice.json",function(error,root) {
        if (error)
            return console.error(error);
        //console.log(root.features);
        var features = root.features;
        for (var i = 0; i < features.length; i++) {
            var feature = features[i];
            var coor = feature.geometry.coordinates;
            var icon = new T.Icon({
                iconUrl: "./images/nativeoffice.png",
                iconSize: new T.Point(20,20),
                iconAnchor: new T.Point(0,0)
            });
            for(j = 0;j<coor.length;j++){
                var marker = new T.Marker(new T.LngLat(coor[0],coor[1]), {icon: icon});
                map.addOverLay(marker);
                //console.log(coor)
            }
        }
    })
}
//鉴定机构
function Jianding(){
    d3.json("data/Law_Jianding.json",function(error,root) {
        if (error)
            return console.error(error);
        //console.log(root.features);
        var features = root.features;
        for (var i = 0; i < features.length; i++) {
            var feature = features[i];
            var coor = feature.geometry.coordinates;
            var icon = new T.Icon({
                iconUrl: "./images/jianding.png",
                iconSize: new T.Point(20,20),
                iconAnchor: new T.Point(0,0)
            });
            for(j = 0;j<coor.length;j++){
                var marker = new T.Marker(new T.LngLat(coor[0],coor[1]), {icon: icon});
                map.addOverLay(marker);
                //console.log(coor)
            }
        }
    })
}
//司法所
function Judical(){
    d3.json("data/Law_JudicalOffice_.json",function(error,root) {
        if (error)
            return console.error(error);
        //console.log(root.features);
        var features = root.features;
        for (var i = 0; i < features.length; i++) {
            var feature = features[i];
            var coor = feature.geometry.coordinates;
            var icon = new T.Icon({
                iconUrl: "./images/JusticBureau.png",
                iconSize: new T.Point(20,20 ),
                iconAnchor: new T.Point(0,0)
            });
            for(j = 0;j<coor.length;j++){
                var marker = new T.Marker(new T.LngLat(coor[0],coor[1]), {icon: icon});
                map.addOverLay(marker);
                //console.log(coor)
            }
        }
    })
}

/*高新企业*/
//高新技术企业
function CompanyScience(){
    d3.json("data/Company_Science.json",function(error,root) {
        if (error)
            return console.error(error);
        //console.log(root.features);
        var features = root.features;
        for (var i = 0; i < features.length; i++) {
            var feature = features[i];
            var coor = feature.geometry.coordinates;
            var icon = new T.Icon({
                iconUrl: "./images/science.png",
                iconSize: new T.Point(20,20),
                iconAnchor: new T.Point(0,0)
            });
            for(j = 0;j<coor.length;j++){
                var marker = new T.Marker(new T.LngLat(coor[0],coor[1]), {icon: icon});
                map.addOverLay(marker);
                //console.log(coor)
            }
        }
    })
}
//小巨头企业
function CompanyLittleGiant(){
    d3.json("data/Company_LittleGiant.json",function(error,root) {
        if (error)
            return console.error(error);
        //console.log(error);
        //console.log(root.features);
        var features = root.features;
        for (var i = 0; i < features.length; i++) {
            var feature = features[i];
            var coor = feature.geometry.coordinates;
            var icon = new T.Icon({
                iconUrl: "./images/littlestrong.png",
                iconSize: new T.Point(20,20),
                iconAnchor: new T.Point(0,0)
            });
            for(j = 0;j<coor.length;j++){
                var marker = new T.Marker(new T.LngLat(coor[0],coor[1]), {icon: icon});
                map.addOverLay(marker);
                console.log(coor);
            }
        }
    })
}
//天津各区人口
function personNum(){
    var tag = new T.InfoWindow("",{"minWidth":"650"});
    //console.log(tag.autoPan);
    tag.setLngLat(new T.LngLat(117.20253,39.13743));
    //tag.maxWidth=400;
    tag.setContent("<div id='mainss' style='width:650px;height:300px;border:1px solid red;'></div>");
    map.addOverLay(tag);
    var myChart = echarts.init(document.getElementById('mainss'));
    // 指定图表的配置项和数据
    var option = {
        tooltip: {
            show: true
        },
        legend: {
            data:['人口/万']
        },
        xAxis : [
            {
                name:'区域名称',
                type : 'category',
                data:["和平区","河东区","河西区","南开区","河北区","红桥区","塘沽区","汉沽区","大港区",
                    "东丽区","西青区","津南区","北辰区","武清区","宝坻区","静海区"],
                axisLabel: {
                    //这个是倾斜角度，也是考虑到文字过多的时候，方式覆盖采用倾斜
                    rotate: 30,
                    //这里是考虑到x轴文件过多的时候设置的，如果文字太多，默认是间隔显示，设置为0，标示全部显示，当然，如果x轴都不显示，那也就没有意义了
                    interval :0
                }
            }
        ],
        yAxis : [
            {
                type : 'value',
                name:'人口/万'
            }
        ],
        series : [
            {
                itemStyle: {
                    normal: {
                        //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                        color: function(params) {
                            // build a color map as your need.
                            var colorList = [
                                '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                            ];
                            return colorList[params.dataIndex]
                        },
                        //以下为是否显示，显示位置和显示格式的设置了
                        label: {
                            show: true,
                            position: 'top',
                            formatter: '{c}'
                        }
                    }
                },
                "name":"地区面积",
                "type":"bar",
                "data":[47,68,74,79,62,56,48,17,35,32,33,38,32,84,65,52]
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

}
//天津各区面积
function area(){
    var tag = new T.InfoWindow("",{"minWidth":"650"});
    //console.log(tag.autoPan);
    tag.setLngLat(new T.LngLat(117.20253,39.13743));
    //tag.maxWidth=400;
    tag.setContent("<div id='mains' style='width:650px;height:300px;border:1px solid red;'></div>");
    map.addOverLay(tag);
    var myChart = echarts.init(document.getElementById('mains'));
    // 指定图表的配置项和数据
    var option = {
        tooltip: {
            show: true
        },
        legend: {
            data:['面积/平方千米']
        },
        xAxis : [
            {
                name:'区域名称',
                type : 'category',
                data:["和平区","河东区","河西区","南开区","河北区","红桥区","塘沽区","汉沽区","大港区",
                    "东丽区","西青区","津南区","北辰区","武清区","宝坻区","静海区"],
                axisLabel: {
                    //这个是倾斜角度，也是考虑到文字过多的时候，方式覆盖采用倾斜
                    rotate: 30,
                    //这里是考虑到x轴文件过多的时候设置的，如果文字太多，默认是间隔显示，设置为0，标示全部显示，当然，如果x轴都不显示，那也就没有意义了
                    interval :0
                }
            }
        ],
        yAxis : [
            {
                type : 'value',
                name:'面积/平方千米'
            }
        ],
        series : [
            {
                itemStyle: {
                    normal: {
                        //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                        color: function(params) {
                            // build a color map as your need.
                            var colorList = [
                                '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                            ];
                            return colorList[params.dataIndex]
                        },
                        //以下为是否显示，显示位置和显示格式的设置了
                        label: {
                            show: true,
                            position: 'top',
                            formatter: '{c}'
                        }
                    }
                },
                "name":"地区面积",
                "type":"bar",
                "data":[10,39,37,39,27,21,688,350,940,460,545,401,478,1570,1523,1476]
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}
在这个程序员苦逼的年代里，我们需要抱团取暖

前端使用d3.js调用地图api 进行数据可视化的更多相关文章

  1. JS框架_(JQuery.js)高德地图api

    百度云盘 传送门 密码 :ko30 高德地图api效果 <!doctype html> <html> <head> <meta charset="u ...

  2. ReactiveX 学习笔记（26）使用 RxJS + React.js 调用 REST API

    JSON : Placeholder JSON : Placeholder (https://jsonplaceholder.typicode.com/) 是一个用于测试的 REST API 网站. ...

  3. ReactiveX 学习笔记（25）使用 RxJS + Vue.js 调用 REST API

    JSON : Placeholder JSON : Placeholder (https://jsonplaceholder.typicode.com/) 是一个用于测试的 REST API 网站. ...

  4. js百度地图API创建弧线并修改弧线的弧度

    去百度API官网下载CurveLine.min.js,注意复制下来的Js前面的行号要删除. // 百度地图API功能 var map = new BMap.Map("container&qu ...

  5. D3.js中国地图下钻

    使用d3.js实现中国地图及中国地图下钻到省市区 在可视化开发中,地图是很重要的一个环节,很多时候需要展现的不仅是国家地图,还需要能从国家进入到省市,看到区这样的下钻过程,今天我们就来实现这个效果. ...

  6. 百度地图API获取数据

    目前,大厂的服务范围越来越广,提供的数据信息也是比较全的,在生活服务,办公领域,人工智能等方面都全面覆盖,相对来说,他们的用户基数大,通过用户获取的信息也是巨大的.除了百度提供api,国内提供免费AP ...

  7. 【 D3.js 入门系列 --- 9 】 常见可视化图形

    本人的个人博客为: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢. Layout ,直译为"布局,安排".但在 ...

  8. Python调用matplotlib实现交互式数据可视化图表案例

    交互式的数据可视化图表是 New IT 新技术的一个应用方向,在过去,用户要在网页上查看数据,基本的实现方式就是在页面上显示一个表格出来,的而且确,用表格的方式来展示数据,显示的数据量会比较大,但是, ...

  9. 同步和异步概念（由DZW前端框架引发的百度地图api无法加载问题总结）

    首先概念: 在计算机领域,同步就是指一个进程在执行某个请求的时候,若该请求需要一段时间才能返回信息,那么这个进程将会一直等待下去,直到收到返回信息才继续执行下去:异步是指进程不需要一直等下去,而是继续 ...

随机推荐

  1. git的使用(进阶篇)

    如何处理代码冲突 冲突合并一般是因为自己的本地做的提交和服务器上的提交有差异,并且这些差异中的文件改动,Git不能自动合并,那么就需要用户手动进行合并 如我这边执行git pull origin ma ...

  2. canvas图表详解系列（3）：动态饼状图（原生Js仿echarts饼状图）

    本章建议学习时间4小时 学习方式:详细阅读,并手动实现相关代码(如果没有canvas基础,需要先学习前面的canvas基础笔记) 学习目标:此教程将教会大家如何使用canvas绘制各种图表,详细分解步 ...

  3. 自学 Python 3 最好的 入门 书籍 推荐（附 免费 在线阅读 下载链接）

    请大家根据自己的实际情况对号入座,挑选适合自己的 Python 入门书籍: 完全没有任何编程基础:01 号书 少量编程基础,不求全,只希望能以最快的速度入门:02 号书 少量编程基础,有一定的英文阅读 ...

  4. js 关于性能的数据存储

    1.JavaScript中四种基本数据存取位置:字面量,本地变量,数组元素,对象成员.(四个都是存在于内存中) 一般来说:[字面量,局部变量]运行速度>[数组,对象成员] 2.内部属性包含了一个 ...

  5. Python学习笔记（二）-Python文件类型及编程模式

    Python环境搭建:linux,Windows... Linux下:[root@localhost StudyPython]# python #进入交互模式Python 2.7.11 (defaul ...

  6. IOC杂谈（一）初识IOC

    初衷 发现学习东西不单只是看,用,还有很重要一点就是记录,不然过个几个月再用到相同的知识时,你会发现你已经丢得差不多了,故此开始在博客园记录的同时也与各位同行分享知识. 正题 关于IOC,在刚工作时就 ...

  7. 树莓派.使用Node.js来制作一个作业检查仪

    先上图 前段时间, 花了点时间给女儿做了个数学习题的小程序 首页 做题界面(题目每次都随机生成, 加减乘除都有) 做题记录 现在问题来了, 怎么才能随时知道作业有没有完成呢? 每次打开做题记录页面刷新 ...

  8. QT---实现小球游戏（零基础入门）

    本文章基本全代码敲窗口小球游戏,最后会免费加上源代码,让读者有更清晰的了解 内容主要覆盖: 1> Qtimer计时器的开始和结束,以及显示系统时间等等... 2> 多个Qwidget布局和 ...

  9. Linux下Crontab定时任务的使用教程 以及 无法执行定时任务的解决方案

     前言 本文学习思路:Linux的corntab定时任务的使用教程  --> 定时任务无效的解决方案  Linux的corntab定时任务的使用教程 1. 首先,输入命令 打开crontab定时 ...

  10. 原生js+css实现重力模拟弹跳系统的登录页面

    今天小颖把之前保存的js特效视频看了一遍,跟着视频敲了敲嘻嘻,用原生js实现一个炫酷的登录页面.怎么个炫酷法呢,看看下面的图片大家就知道啦. 效果图: 不过在看代码之前呢,大家先和小颖看看css中的o ...