无数据大屏可视化01—小白入门

201314易佳明

已于 2023-11-08 17:41:40 修改

阅读量71

点赞数

文章标签： css css3 javascript arcgis

于 2023-11-08 15:50:43 首次发布

本文链接：https://blog.csdn.net/u013176170/article/details/134291567

版权

无数据大屏可视化01—小白入门

众所周知，利用css 、js 就可以设计大屏，开发如此简单。本节介绍利用bootstrap+jquery+天地图，布局大屏。话不多说，直接进入主题。

第一步，引入相关的js、css（小白入手不用下载直接复制即可用）

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=你的密钥"></script>
<script src="http://cdn.bootcss.com/d3/3.5.17/d3.js " charset="utf-8"></script>
<script src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/D3SvgOverlay.js"></script>

其中，tk 要替换你申请的密钥。
第二步，对页面布局，这里简单布局，分为左、中、右；左、右边各分三行，中间分两行（按不同的大屏尺寸可自行设计布局）。
在这里插入图片描述
代码如下：

<div class="container">
		<div class="row">
			<div class="col-md-4 item_left">
				<div class="c1">
					<div class="industryChartDiv">
						<div class="border">
						</div>
					</div>
					<div class="changeChartDiv" >
						<div class="border"></div>
					</div>
					<div class="ageChartDiv">
						<div class="border"></div>
					</div>
				</div>
			</div>
			<div class="col-md-4 item_center">
				<div class="c2">
					<div class="totalInfoDiv ">
				
					</div>
					<!-- <div  id="mapDiv" class="moveMapDiv border"> -->
						<div  class="moveMapDiv ">
		
					</div>
				</div>
			</div>
			<div class="col-md-4 item_right">
				<div class="c3">
					<div class="powerChartDiv">
						<div class="border"></div>
					</div>
					<div class="playChatDiv">
						<div class="border"></div>
					</div>
					<div class="areaChartDiv">
						<div class="border"></div>
					</div>
				</div>
			</div>
		</div>
	</div>

配上相应得css，代码如下：

.contains{background:#000a2d;height:100%;width:100%;}
.header{height:80px;background-size: cover;background:url('./images/headerbg.png');background-repeat:no-repeat;background-position:center;}
.header .title{display:flex;justify-content:center;color:#fff;font-weight:bold;font-size:2.8rem;align-items: center;height: 100%;}
.time{margin-right: 10px;font-size: 1.8rem;margin-top: -4rem;color: #fff;float: right;}
.time .label{font-weight:300}
.container{height:calc(100vh - 80px);width:100%;}
.item_left,.item_center,.item_right{height:100%; padding-right: 10px;padding-left: 10px;display: flex;}
.c1,.c2,.c3{display: flex;flex-direction: column;align-content: stretch;justify-content: stretch;width: 100%;}
.industryChartDiv,.changeChartDiv,.ageChartDiv,.powerChartDiv,.playChatDiv,.areaChartDiv{flex:1;margin: 10px 0px;}
.totalInfoDiv{flex: 1;margin: 10px 0px;background:#000a2d;}
.moveMapDiv{flex:4;margin: 10px 0px;}
.border{
	border: 2px solid #02a6b5;
    width: 100%;
    height: 100%;
    position: relative;
    margin: auto;
}
.border:before{
	content: '';
    position: absolute;
    width: 88%;
    bottom: -2px;
    top: -2px;
    left: 6%;
    border-bottom: 2px solid #0b3146;
    border-top: 2px solid #0b3146;
}
.border:after{
	content: '';
    position: absolute;
    height: 76%;
    left: -2px;
    right: -2px;
    top: 12%;
    border-left: 2px solid #0b3146;
    border-right: 2px solid #0b3146;
}

第三步，添加中间地图。为了引入地图需要在中间添加地图mapDiv，和加入相应得js。

<div  id="mapDiv" class="moveMapDiv ">

js 代码,主要是引入地图，和地图打点、画图像。如下：

 var map;
        var zoom = 8;
        var lay;
        var onlyMapLay;
        function onLoad() {
            var imageURL = "http://t0.tianditu.gov.cn/img_w/wmts?" +
                "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
                "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=你的密钥";
            var imageURLT = "http://t0.tianditu.gov.cn/cia_w/wmts?" +
            "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
            "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}" +
            "&tk=你的密钥";
            //创建自定义图层对象
            lay = new T.TileLayer(imageURL, {minZoom: 1, maxZoom: 18});
            lay2 = new T.TileLayer(imageURLT, { minZoom: 5, maxZoom: 18 });
            var config = {layers: [lay,lay2]};
            //初始化地图对象
            map = new T.Map("mapDiv",config);
            //设置显示地图的中心点和级别
            map.centerAndZoom(new T.LngLat(111.40969, 22.89945), zoom);
            //允许鼠标滚轮缩放地图
            map.enableScrollWheelZoom();  
            //批量打标点
            var data_info = [[110.38513,21.06912,"地址：湛江市东城区王府井大街88号乐天银泰百货八层"],
                [112.06604,21.78501,"地址：阳江市东城区东华门大街"],
                [115.75745,22.85719,"地址：汕尾市东城区正义路甲5号"]
            ];
     
            for(var i=0;i<data_info.length;i++){
                var marker = new T.Marker(new T.LngLat(data_info[i][0],data_info[i][1]));  // 创建标注
                var content = data_info[i][2];
                map.addOverLay(marker);               // 将标注添加到地图中
                addClickHandler(content,marker);
            }

            function addClickHandler(content,marker){
                marker.addEventListener("click",function(e){
                    openInfo(content,e)}
                );
            }
            function openInfo(content,e){
                var point = e.lnglat;
                marker = new T.Marker(point);// 创建标注
                var markerInfoWin = new T.InfoWindow(content,{offset:new T.Point(0,-30)}); // 创建信息窗口对象
                map.openInfoWindow(markerInfoWin,point); //开启信息窗口
                 }
              
           //创建右键菜单对象
            var menu = new T.ContextMenu({width: 140});
       
            //添加右键菜单
            var txtMenuItem = [
                               {
                    text: '获得右键点击处坐标',
                    isDisable: false,
                    callback: function (lnglat) {
                        alert(lnglat.getLng() + "," + lnglat.getLat());
                    }
                }
            ];
            
            for (var i = 0; i < txtMenuItem.length; i++) {
                //添加菜单项
                var item = new T.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback);
                //item.disable();
                menu.addItem(item);
                if (i == 1 || i == 3) {
                    //添加分割线
                    menu.addSeparator();
                }
       
            }

           map.addContextMenu(menu);

		//海洋牧场

		 //var data2=[[110.67627,20.65335,"湛江海洋牧场"],[112.17041,20.81774,"阳江海洋牧场"],[112.24731,21.44284，"茂名海上风电"]];
		 var circle = new T.Circle(new T.LngLat(113.74695,21.53996), 6000,
		                          {color:"blue",weight:5,opacity:0.5,fillColor:"#FFFFFF",fillOpacity:0.5,lineStyle:"solid"});
		            //向地图上添加圆
		            map.addOverLay(circle);

		            var circleInfoWin = new T.InfoWindow("阳江海洋牧场");
		            circle.addEventListener("click", function () {
		                circle.openInfoWindow(circleInfoWin);
		            });// 将标注添加到地图中

		//多边形

		  var points = [];
		            points.push(new T.LngLat(115.45052,22.89768));
		            points.push(new T.LngLat(115.44571,22.84074));
		            points.push(new T.LngLat(115.65582,22.89073));
		            points.push(new T.LngLat(115.6572,22.94954));

		   var polygon = new T.Polygon(points,{
		                color: "blue", weight: 3, opacity: 0.5, fillColor: "blue", fillOpacity: 0.5
		            });
		            //向地图上添加面
		            map.addOverLay(polygon);

		        }

最后一步，别忘记在body 运行函数onLoad（）。

<body class="contains" onLoad="onLoad()">

最终效果如下:
在这里插入图片描述

201314易佳明

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫