一个简单的网页系统(二)-地图界面

最新推荐文章于 2023-08-02 15:26:29 发布
最新推荐文章于 2023-08-02 15:26:29 发布
阅读量1.4k 收藏 9
点赞数 2
分类专栏： web前端 可视化 文章标签： Web前端 leaflet.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lccla120712/article/details/70853182
版权

一个简单的网页系统(二)

            前面的文章简单介绍了网页系统的首页，这次要介绍网页的地图部分。关于前面的leaflet.js已经简单介绍了，在可视化的类别中有介绍。

一.效果展示



二.代码分析

1. 使用leaflet.js 库使用OSM地图源，将中心点设置为北京，并设置zoom大小。

2. 添加站点：查询要标注地点的经纬度，使用d3加入相应的svg图形并添加文字。

3. 画路径：查询地铁线路经过的火车站点，查询经纬度。使用d3.svg.line 函数完成行程路线。

4. 添加监听事件： 为几个站点添加监听事件，当点击站点时会进行页面的跳转。

三.代码展示


<!DOCTYPE html>
<html>
<head>
	<title>Tour China</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="js/leaflet.js"></script>
             <script type="text/javascript" src="js/myfocus-2.0.1.min.js"></script>
             <script type="text/javascript" src="js/jquery.js"></script>
             <script type="text/javascript" src="js/d3.v3.js"></script>
             <link rel="stylesheet" type="text/css" href="css/leaflet.css">
	<style type="text/css">
	     #map{
	     	height:600px;
	     }
	     .node{
	     	
	     }
	     .MyText{
	     	font-size: 8px;
	     	fill: blue;
	     }
	     .menu{
	     	position: fixed;
	     	height: 30px;
	     	background-color: rgba(234,234,234,0.8);
	     	width: 100%;
	     	z-index: 60;
	     }
	     .menu ul{
                        list-style: none;
                        margin-left: 10%;
                        margin-top: 0;
                        height: 30px;
                        line-height: 30px;
	     }
	     .menu ul li{
	          list-style: none;
	          float: left;
	          width:22%;
	          padding: 0 4%;
	          height:30px;
	          line-height: 30px; 
	     }
	     .menu ul li a{
	     	padding: 0 20%;
	     	text-decoration: none;
	     	color: black;
	     	background-color: rgba(234,234,234,0.8);
	     	text-align: center;
	     }
	     .menu ul li a:hover,.menu ul li a:active{
	     	color: yellow;
	     	font-size: 25px;
	     	background-color:  rgba(229,229,229,0.8);
	     }
	</style>
</head>
<body>
  <div class="menu"><ul>
  <li><a href="firstPage.html">首页</a></li><li><a href="index.html">Tour</a></li><li><a href="vis.html">Visulation</a></li>
  </ul></div>
  <div id="map"></div>
<script type="text/javascript">
    var mymap = L.map('map').setView([39.9, 116.3], 5);
 L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',  {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
    maxZoom: 18
}).addTo(mymap);
       // Initialize the SVG layer
        mymap._initPathRoot();

         // We pick up the SVG from the map object..........
        var m_svg = d3.select("#map").select("svg");
        var svg = m_svg.append("g");
 
        var posQin=[39.93,119.60];//记录经纬度
        var posXing=[37.0755,114.50];//邢台
        var posDaLian=[38.9227,121.616792];
        var posBei=[39.91737,116.4002];
        var posLiaoYang=[41.275,123.239];
        var data=[posQin,posXing,posDaLian,posBei,posLiaoYang]; 
        //邢台 石家庄 保定 天津 唐山 山海关 
        //绥中 葫芦岛 锦州 盘锦 大石桥 熊岳城 瓦房店 普兰店 
        //金州 大连北站 XX XX 大连 
        var dataLine=[[114.50,37.0755],[114.492,38.017],[115.4895,38.868],[117.223,39.143],[118.123,39.63],[119.7727,40.007],
        [120.332,40.354],[120.8738,40.76],[121.1439,41.1306],[122.069,41.2031],[122.51439,40.6523],[122.1514,40.1876],[122.0147,39.6317],[121.9658,39.4071],
        [121.7333,39.094],[121.6140,39.0225],[121.5722,38.9638],[121.5969,38.9268],[121.6393,38.928]];//T370
        
        //北京 燕郊 唐山北 XXX 
        //大石桥 -大连(与第一条线合并)
        var dataLine2=[[116.4337,39.9098],[116.8139,39.9475],[118.1333,39.8283],[119.7727,40.007]];//k681
        
        //保定-北京西
        var dataLine3=[[115.4895,38.868],[116.32784,39.9005]];
        var data1=[1];
        var data2=['秦皇岛','邢台','大连','北京','辽阳'];
          
         var d3Line=d3.svg.line()  
                 .x(function (d) {
                        var latlon=new L.LatLng(d[1], d[0]);
                       
                        return mymap.latLngToLayerPoint(latlon).x;
                    })
                 .y(function (d) {
                          var latlon=new L.LatLng(d[1], d[0]);
                    
                        return mymap.latLngToLayerPoint(latlon).y;
                     
                })
                .interpolate("linear");
      
      //Add three paths to the map    
        svg.append('path')
            .attr('id','path')
            .attr('class',"pa")
            .attr('d',d3Line(dataLine))
            .style("stroke-width", 2)
             .style("stroke", '#000000')
             .style("fill", "none")
              .style('stroke-opacity', 0.75);

        svg.append('path')
            .attr('id','path2')
             .attr('class',"pa")
            .attr('d',d3Line(dataLine2))
            .style("stroke-width", 2)
             .style("stroke", 'blue')
             .style("fill", "none")
              .style('stroke-opacity', 0.75);

       svg.append('path')
            .attr('id','path3')
            .attr('class',"pa")
            .attr('d',d3Line(dataLine3))
            .style("stroke-width", 2)
             .style("stroke", 'red')
             .style("fill", "none")
              .style('stroke-opacity', 0.75);


        svg.selectAll('.node')//秦皇岛
              .data(data)
              .enter()
              .append('circle') 
              .attr("id",function(d,i){
              	i++;
              	return 'pos'+i;
              })
              .attr("class","node")
              .attr('fill','#ff0000')
              .attr('r',3)
              .attr("transform", function(d,i){
                         var latlon=new L.LatLng(d[0], d[1]);
                        // console.log(latlon);
                         return "translate(" + mymap.latLngToLayerPoint(latlon).x + "," + mymap.latLngToLayerPoint(latlon).y + ")";
              });

             var texts = svg.selectAll(".MyText")//添加文字
             .data(data2)
             .enter()
             .append("text")
             .attr("class","MyText")
             .attr("id",function(d,i){
             	i++;
             	return 'text'+i;
             })
             .attr("color","blue")
             .attr("transform",function(d,i){
             	 var latlon=new L.LatLng(data[i][0], data[i][1]);
                        // console.log(latlon);
                         return "translate(" + mymap.latLngToLayerPoint(latlon).x + "," + mymap.latLngToLayerPoint(latlon).y + ")";
             })
            .attr("dx",function(){
                 return 4;//相对x 轴的偏移
              })
           .attr("dy",function(d){
                 return 4;//相对y 轴的偏移
             })
            .text(function(d){
                 return d;
              });
        
             mymap.on("zoomstart",function(){
             	svg.selectAll('.pa')
             	.style('display','none');
             });

            mymap.on("zoomend",function(){
            	    svg.selectAll('.pa')
             	.style('display','inherit');

                 svg.selectAll('.MyText')
                  .attr("transform",function(d,i){
             	 var latlon=new L.LatLng(data[i][0], data[i][1]);
                        // console.log(latlon);
                         return "translate(" + mymap.latLngToLayerPoint(latlon).x + "," + mymap.latLngToLayerPoint(latlon).y + ")";
              })
              .attr("dx",function(){
                 return 4;//相对x 轴的偏移
              })
              .attr("dy",function(d){
                 return 4;//相对y 轴的偏移
             })
            .text(function(d){
                 return d;
              });
            
                 svg.selectAll('.node')
                .attr("transform", function(d,i){
                         var latlon=new L.LatLng(d[0], d[1]);
                         return "translate(" + mymap.latLngToLayerPoint(latlon).x + "," + mymap.latLngToLayerPoint(latlon).y + ")";
                 });     
                svg.select('#path')
                 .attr('d',d3Line(dataLine))
                .style("stroke-width", 2)
                .style("stroke", '#000000')
               .style("fill", "none")
               .style('stroke-opacity', 0.75);

                svg.select('#path2')
              .attr('d',d3Line(dataLine2))
              .style("stroke-width", 2)
               .style("stroke", 'blue')
               .style("fill", "none")
              .style('stroke-opacity', 0.75);

               svg.select('#path3')
              .attr('d',d3Line(dataLine3))
              .style("stroke-width", 2)
               .style("stroke", 'red')
               .style("fill", "none")
              .style('stroke-opacity', 0.75);


             });
             $('#pos1').click(function(){
             	$(window).attr('location','china-tour/qinH.html');
             });
              $('#pos2').click(function(){
             	$(window).attr('location','china-tour/xingTai.html');
             });
              $('#pos3').click(function(){
             	$(window).attr('location','china-tour/daLian.html');
             });
              $('#pos4').click(function(){
             	$(window).attr('location','china-tour/beiJing.html');
             });
               $('#pos5').click(function(){
             	$(window).attr('location','china-tour/liaoYang.html');
             });
             $(window).unload(function(){//释放内存，提高性能
             	svg=null;
             	mymap=null;
             });
</script>
</body>
</html>

四.后期展示

 之后会有最后一篇关于此网页系统的文章，并附上自己gitHub源码位置。



 


lcla0800
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
网站后台管理系统+地图
04-30
网站后台管理系统，功能页面完整，内涵地图、统计图表，且页面设计高档，在项目中参考不少，极有价值
利用OpenStreetMap（OSM）数据搭建一个地图服务
weixin_30699235的博客
04-23 1989
http://www.cnblogs.com/LBSer/p/4451471.html 图 利用OSM数据简单发布的北京地图服务 一、OSM是什么 开放街道图（OpenStreetMap，简称OSM）是一个网上地图协作计划，目标是创造一个内容自由且能让所有人编辑的世界地图（wiki：http://wiki.openstreetmap.org/wiki/Main_Pa...
Leaflet快速入门与加载OSM显示地图
BADAO_LIUMANG_QIZHI的博客
01-03 7034
场景 Leaflet Leaflet 是一个为建设交互性好适用于移动设备地图，而开发的现代的、开源的 JavaScript 库。 代码仅有几十KB，但它具有开发在线地图的大部分功能。Leaflet设计坚持简便、高性能和可用性好的哲学思想， 在所有主要桌面和移动平台能高效运作，在现代浏览器上会利用HTML5和CSS3的优势，同时也支持旧的浏览器访问。 支持插件扩展，有一个友好、易于使用的API文档和一个简单的、可读的源代码。 Leaflet强大的开源库插件涉及到地图应用的各个方面包括地图服务，数据提供，数
一步步DIY: OSM-Web服务器(三) OpenLays 与 SlippyMap
丁劲犇技术发布空间
09-07 9726
(-: 上一步，我们已经有了自己的地图瓦片服务器，现在，开始实现SlippyMap啦！ 下载释放OpenLayers到 www文件夹 SlippyMap 利用 OpenLays 的AJax实现，直接从Openlays官网下载最新版文件 http://www.openlayers.org/ 这里是2.12 版本。 http://www.openlayers.org/dow...
百度地图 osm地图 leaflet echarts webapck的组合使用时的踩坑记录
weixin_34268310的博客
02-27 289
webpack+百度地图 创建 script标签进行加载 export function MP(ak){ return new Promise(function (resolve, reject){ window.onload = function () { resolve(B...
2021-04-16
weixin_39563589的博客
04-16 107
加载大量点数据于地图上，使用到D3+leaflet技术来完成。实现思想：1.初始化Map和SVG覆盖层， var svg = d3.select(map.getPanes().overlayPane).append('svg'); g = svg.append('g').attr('class', 'leaflet-zoom-hide'); 2.根据数据绘制点显示样式以及大小等信息， var selectg=g.selectAll("circle"); ...
Leaflet入门指南：高德地图添加和坐标偏移处理方法
cheungxiongwei的博客
08-02 1488
在本文中，我们将扩展前一篇 "Leaflet入门指南：从零开始创建交互式地图"，通过添加高德地图（采样GCJ-02坐标系）来丰富地图应用程序。我们首先介绍了如何添加高德卫星地图和高德街道信息透明地图。随后，我们探讨了由于坐标系差异引起的地图偏移问题，并详细介绍了解决方案。我们使用了eviltransform库将WGS-84坐标系转换为GCJ-02坐标系，以修复标记点的偏移。另外，我们还探讨了自定义CRS和Marker插件的方法，分别在地图初始化和标记更新时进行坐标偏移处理。这些方法可以帮助您在Leaflet
leaflet通过经纬度定位_javascript – 如何使用Leaflet API从纬度和经度坐标检索LayerPoint(X,Y)...
weixin_39807067的博客
12-22 1586
如果我使用以下代码从指定的Lat / Lng获取LayerPoint：var latLng = new L.latLng(-37.81303878836989,144.97421264648438);var point = map.latLngToLayerPoint(latLng);输出如下：o.Pointx: 86042y: 77065然后当我尝试使用以下URL访问图层图层：我得到一个404,...
如何做一个简单的网页版地图
m0_67401660的博客
05-20 701
前言 以前做了一个安卓版的地图应用，现在突然想做一个简单的网页版地图。这个简单的网页版地图能根据城市名进行位置查询（有个城市列表的小控件，支持城市列表选择），还能根据经纬度进行位置查询。当你进行城市搜索时，或者经纬度查询城市时，该小控件也能自由地切换到目标城市。 一、申请地图的AK密钥 1、首先找到一个地图开放平台，这里以百度地图开放平台为例，步骤如下：进入百度地图开放平台，拉到最底下，进行登录注册，然后进入应用管理，点击创建应用。 2、“应用名称”可以自己随意编辑，既然是百度地图，建议大家就写“地图”，
手把手教你实现一个JavaWeb项目：创建一个自己的网页博客系统（前端+后端）（一）
热门推荐
小型骷髅的博客
06-19 2万+
一篇博客带你实现一个真正的项目！
网页插入地图api
09-14
简单的地图API实例，可插入自己想要的位置。例如公司，家等。
电子地图管理系统（完全版）
08-27
电子地图管理系统 主目录： 1、打开 2、排序 3、检索 4、更新 5、退出
百度地图 JS 版本，用于移动终端页面展示地图
10-22
用于移动端APP上百度地图，JS例子。。。。。。。。。。。。
网页界面交互设计:系统的用户体验的衡量标准
02-20
这些结果构成了一个系统的用户体验的衡量标准。随着时间的推移，这个注重交付成果的设计过程却将用户体验设计师放在了交付业务上，用来衡量和补充他们设计成果的深度和宽度，而不是所设计的用户体验的质量和成果与否...
Vue前端管理系统工程-网页设计-物联网控制系统
12-21
Vue前端管理系统工程，使用vue框架设计管理系统，实现用户登录界面，气井管理，远程控制，调用百度地图API查看位置等功能。
DirCMS内容管理系统-PHP
06-21
并采用简洁的模板标签技术，使制作模板更加容易，一般情况下，用DirCMS架构一个企业站只需半天时间即可，真正实现功能的简洁，实用，强大，灵活。可广泛应用于架构各类门户站，下载站，企业站，工作室等站点。 开源...
银色网新企业网站管理系统-Asp
06-12
网新企业网站管理系统是专业为个人和企业网站建设而开发的一款智能化程序。该程序基于ASP+ACCESS环境开发，拥有完善的网站前台和后台全智能化管理功能，完全由后台操作（如添加、修改网站基本信息、产品、企业新闻...
使用POI数据挖掘区域功能并在网页端显示
lccla120712的博客
05-06 2999
使用POI数据挖掘区域功能并在网页端显示     最近在做一个创新项目，其中包含区域功能挖掘的部分。前期我们使用了路网数据对上海市进行了区域的划分，并为每个POI加上了所属的区域标签。之后便使用此数据进行区域功能挖掘部分的展示。 一。使用TF_IDF算法挖掘出每个区域对应的功能，此处我们分了六大功能，分别是住宅，工作，教育，商业，公共服务，景点    有如下几个子步骤   （1）根
d3.js leaflet.js OpenStreetMap的综合应用
lccla120712的博客
04-09 2288
一个可视化的工作案例 效果图 代码的边捆绑算法借鉴了D3.JS官方案例的js库。 链接如下：点击打开链接 案例分析 本案例展示的上海市某一天12点出租车数据流量图，先将上海市进行区域划分，之后将出租车数据映射到相应的区域，并映射到osm地图上。最后用当D3标注出区域以及流量图。 一. 准备数据 对上海市出租车数据进行处理，处理后部分文件显示如下。data.json文件
QT加载网页地图并输出到窗口
最新发布
09-25
然后，在窗口类的源文件中创建一个QWebEngineView对象，并将其添加到布局中，并加载所需的网页地图： ``` QWebEngineView *webView = new QWebEngineView(this); // 创建QWebEngineView对象 ui->layout->addWidget...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值