MapBoxGL 加载显示经纬度的网格

最新推荐文章于 2023-04-20 11:43:00 发布
最新推荐文章于 2023-04-20 11:43:00 发布
阅读量1.6k 收藏 4
点赞数
分类专栏： MapBox GL 文章标签： web webgl gis
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29808089/article/details/109738146
版权

效果图：

代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>MapBoxGL</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
		<link href="./lib/mapboxdev/mapbox-gl.css" rel="stylesheet" />
		<script src="lib/mapboxdev/mapbox-gl.js"></script>
		<script src="js/GridLayer.js"></script>
		<style>
			body {
				margin: 0;
				padding: 0;
			}

			#map {
				position: absolute;
				top: 0;
				bottom: 0;
				width: 100%;
			}

			.mapboxgl-canvas {
				outline: none;
			}
		</style>
	</head>
	<body>
		<div id="map"></div>
		<script>
			let localhost = window.location.origin;
			let sources = {
				"osm-tiles1": {
					"type": "raster",
					'tiles': [
						"http://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=ebf64362215c081f8317203220f133eb",
					],
					'tileSize': 256
				},
				"osm-tiles2": {
					"type": "raster",
					'tiles': [
						"http://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=ebf64362215c081f8317203220f133eb",
					],
					'tileSize': 256
				}
			};
			let layers = [{
					"id": "simple-tiles1",
					"type": "raster",
					"source": "osm-tiles1",
				},
				{
					"id": "simple-tiles2",
					"type": "raster",
					"source": "osm-tiles2",
				}
			];
			var map = new mapboxgl.Map({
				container: 'map',
				style: {
					"version": 8,
					"sprite": localhost + "/MapBoxGL/css/sprite",
					"glyphs": localhost + "/MapBoxGL/css/font/{fontstack}/{range}.pbf",
					"sources": sources,
					"layers": layers,
				},
				center: [117.110805, 36.663046],
				zoom: 4
			});
			window.map = map;
			map.on('load', function() {
				//加载网格线  
				let style = {
					line: {
						"line-dasharray": [2, 2, 2, 2],
						//设置线颜色
						"line-color": "#A9A9A9",
						//设置线宽度，像素单位
						"line-width": 1.5
					},
					point: {
						"text-color": "#FFFF00",
						"text-halo-width": 2,
					}
				}
				mapGridLayer.initStyle(style)
				mapGridLayer.initProperty();
				mapGridLayer.addSourceData([]);
				mapGridLayer.addLayerData()
				mapGridLayer.initGrid();
			});

			map.on('moveend', function(e) {
				mapGridLayer.initProperty();
				mapGridLayer.initGrid();
			});
			map.on('zoomend', function(e) {
				mapGridLayer.initProperty();
				mapGridLayer.initGrid();
			});
		</script>

	</body>
</html>

组件GridLayer.js

var mapGridLayer = {
  map: null,
  bounds: null,//当前地图的四个顶点
  style:null,
  initStyle(style){
    this.style = style;
  },
  addSourceData(Lines,Points) {
    if(this.map.getSource('gridLine')||this.map.getSource('gridPoint')){
      if(this.map.getLayer('Linegrid') || this.map.getLayer('Pointgrid')){
        this.map.removeLayer("Linegrid");
        this.map.removeLayer("Pointgrid");
      }
      this.map.removeSource("gridLine");
      this.map.removeSource("gridPoint");
      this.map.addSource('gridLine', {
        'type': 'geojson',
        'data': {
          'type': 'FeatureCollection',
          'features': Lines
        }
      });
      this.map.addSource('gridPoint', {
        'type': 'geojson',
        'data': {
          'type': 'FeatureCollection',
          'features': Points
        }
      });
      this.addLayerData();
    }else{      
      this.map.addSource('gridLine', {
        'type': 'geojson',
        'data': {
          'type': 'FeatureCollection',
          'features': []
        }
      });
      this.map.addSource('gridPoint', {
        'type': 'geojson',
        'data': {
          'type': 'FeatureCollection',
          'features': []
        }
      });
    }
  },
  addLayerData(style){    
    //将线添加到一个图层中，在地图中显示
    this.map.addLayer({
      //此id可随意设置，但是要唯一
      "id": "Linegrid",
      //指定类型为线
      "type": "line",
      //设置数据来源
      "source": 'gridLine',
      //设置线型
      "layout": {
        //线条末端样式
        'line-cap': 'round',
        //线条相交处样式  
        'line-join': 'round'
      },
      //设置绘制参数
      "paint": this.style.line
    });
    this.map.addLayer({
      "id": "Pointgrid",
      "type": "symbol",
      "source": "gridPoint",      
      'layout': {
          'text-field': ['get', 'name'],
          'text-font': [
            'Microsoft YaHei Regular'
            ],
          'text-offset': [0, 1.25],
          'text-anchor': 'bottom',
          "text-size": [
            "interpolate",
            ["linear"],
            ["zoom"],
            4, 9,
            6, 12
          ]
      },
      "paint": this.style.point
    })
  },
  initProperty: function () {//初始化当前地图的状态
    this.map = window.map;
    // this.level = this.map.getZoom();
    // this.initCenter = map.getCenter();
    this.bounds = {
      x1: Math.round(this.map.getBounds().getSouthWest().lng),
      y1: Math.round(this.map.getBounds().getSouthWest().lat),
      x2: Math.round(this.map.getBounds().getNorthEast().lng),
      y2: Math.round(this.map.getBounds().getNorthEast().lat)
    };    
  },
  initGrid: function () {//初始化网格
    //获取当前网格跨度
    //初始化地图上的网格
    let points = [];
    let geometryLine = [];
    let geometryPoint = [];
    this.XY = this.bounds;
    for (var i = this.XY.x1; i < this.XY.x2; i = i + 1) {//0.0063
      points = [];
      points.push([i, this.XY.y1], [i, this.XY.y2]);
      geometryLine.push({
        "type": "Feature",
        "geometry": {
          "type": "LineString",
          "coordinates": points
        }
      });
      geometryPoint.push({
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": points[0]
        },
        'properties': {
          'name': ""+i+"° 0'0'E"
        }
      });
      geometryPoint.push({
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": points[1]
        },
        'properties': {
          'name': ""+i+"° 0'0'E"
        }
      });
    }
    for (var i = this.XY.y1; i < this.XY.y2; i = i + 1) { // 0.0048
      points = [];
      points.push([this.XY.x1, i], [this.XY.x2, i])
      geometryLine.push({
        "type": "Feature",
        "geometry": {
          "type": "LineString",
          "coordinates": points
        }
      });      
      geometryPoint.push({
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": points[0]
        },
        'properties': {
          'name': ""+i+"° 0'0'N"
        }
      });
      geometryPoint.push({
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": points[1]
        },
        'properties': {
          'name': ""+i+"° 0'0'N"
        }
      });
    }
    this.addSourceData(geometryLine,geometryPoint);
  }
}

 

一碗老面i
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
wg.rar_经纬度网格_网格
09-21
一个基于地理信息系统的经纬度网格绘制程序能够实现指定网格间距绘制网格
mapbox-gl绘制经纬网格（Graticule）
地理信息技术杂谈 博客，欢迎技术交流
08-19 1468
在mapbox-gl上实现经纬网格，是按照经度、纬度的一定间隔，将同经度（纬度）的坐标点，连接成直线，实现绘制经纬度网格的形式。 实现代码 参照开源代码，实现在地图上进行经纬度网格的绘制。 //纬线 function makeMeridian(lng) { lng = lngFix(lng); const coords = []; for (var lat = -90; lat <= 90; lat += 1) { coords.push([lng, lat]); } return coords; }
Mapbox实现自定义经纬网及标注
Dingsiww的博客
08-30 1723
在Mapbox地图中，添加经纬网与经纬网坐标标注，并随着地图缩放自适应经纬网网格大小。
mapbox加载turf.js创建的格网
ScapeD的博客
10-29 1660
turf.js是mapbox官方推荐的进行空间分析的包，其优点在于强大且全面的空间分析功能，且支持geojson格式的输入，因此与Mapbox GL JS集成效果很好。 我们此处介绍Mapbox GL JS加载turf.js实时创建格网（渔网）的方法。 其效果如下： turf.js能够指定格网大小、坐标等信息实时生成，其效率非常高，也可以在前端根据用户需求实时的生成格网了。生成结果为GeoJson格式，Mapbox根据其生成的结果直接加载。步骤如下： 1、turf.js生成格网（渔网） tur
国外经纬度计算GPS 计算 google地图计算 必应地图 和mapbox 地图
naileiforever的专栏
08-17 2132
自从google 退出中国之后,很多的不方便. 地图勉强能用 网上有些api都是要收费的,而且收费比较多. 原来一直用必应地图提供的接口 GeocodeRequest geocodeRequest = new GeocodeRequest();报错 the service method is not found 看了官方的列子也是这样的. google地图没有http接口更新.网页的对请
Mapbox GL 测距（动态画线 + Tooltip）
hequhecong10857的博客
02-28 1242
话不多说，直接上图和代码！ <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Measure distances</title> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <script src="ht
FY4_GLT_投影转换_风云4的经纬度网格数据_
10-01
风云数据投影坐标系转换，主要用于glt几何校正
加载并显示经纬度数组构成的路网
09-08
加载由经纬度构成的路网线段数组，通过算法进行变换，将经纬度转为屏幕坐标并显示。显示平台采用windows的gdi技术。
Cesium 地图显示鼠标经纬度和高度
02-23
基本版-显示鼠标经纬度和高度 html文件
MapboxGL 折线图的绘制与展示
做GIS梦的人
09-01 572
前言 前面的博文中介绍了一下如何在地图上展示饼状图和柱状图，下面简单介绍一下如何在地图上绘制折线图： 使用方式 下载依赖 npm install mapbox-map-tool --save 引入组件 import {LineCustomLayer} from "mapbox-map-tool"; import "mapbox-map-tool/dist/css/mapbox-map-tool.css"//建议在main.js中全局引入 代码中使用 let chartLayer = new
关于使用mapox动态绘制线面，实时更新数据及计算的面积线段长度
xiaofan_queen的博客
07-16 518
点位动态更新
mapbox-gl开发：动态画线标绘
地理信息技术杂谈 博客，欢迎技术交流
04-30 1680
在mapbox-gl地图上，实现动态画线的效果，点击左键增加画线的点，鼠标移动，实现线随着鼠标移动位置的效果，点击右键结束画线。 mapbox-gl接口实现标绘数据存储在geojson数据中，通过添加数据源、修改数据源，实现地图上的标绘数据实时更新。 //添加geojson数据源： this.map.addSource(this.sourceid, { type: 'geojson', data: this.geojsondata })
015：Mapbox GL绘制修改多边形，实时更新面积
最新发布
大剑师兰特的GIS世界
04-20 673
第015个本示例的目的是介绍演示如何在vue+mapbox中添加draw组件，绘制多边形，编辑多边形，实时显示面积值。这里使用turf来计算面积值。
⭐Mapbox GL JS学习探索系列（2） - Source
j_bleach的博客
10-13 582
简介 在mapbox中对于地图，图层的呈现都依托于相应的数据源去渲染。mapbox 中的数据源一般分为vector, raster, raster-dem, geojson, image, video这六种类型，本文依次对这6中资源类型进行简单介绍。 vector 与 raster 矢量瓦片与栅格瓦片。关于地图的瓦片加载，在上一篇文章中有介绍，这里简单说一下矢量与栅格的区别。在gis 中 矢量瓦片...
mapboxGL多图对比
LZUGIS
05-08 502
概述 前面的文章mapboxGL卷帘里面实现的时候已经有涉及多图联动了，本文在此基础上进一步优化，加入鼠标位置展示。 效果 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ePw9Y5iC-1620480677395)(https://upload-images.jianshu.io/upload_images/6826673-3942ed8f06523194.gif?imageMogr2/auto-orient/strip)] 实现思路 注册map的mouseover事件，
MapBoxGL 入门
一碗老面的博客
11-17 6866
近期公司准备用mapboxgl弄在线制图系统..由于对矢量图层的大量渲染及加载等选型mapboxgl。 官网API地址：https://docs.mapbox.com/mapbox-gl-js/api/ 大致了解API及示例程序之后，为了尽快熟悉想实现哪些效果，建议在Mapbox Studio里面自己自行配置想要的效果，然后在项目分享下导出json文件查看其属性再进行本地代码运行加载。 Mapbox Studio新建地址：https://studio.mapbox.com/ 本地离线化 ...
mapbox+vue+ts实时路线轨迹
Lee的博客
12-10 1678
先上效果图 首先做好准备工作 需要一个轨迹移动的图标点位。 需要一个轨道线路图层。 需要起点和重点图标点位。 需要实时轨迹线路图层。 需要轨迹线路箭头图标 引入turf工具包。 整体思路是通过turf.lineDistance()方法对路线进行分割（为了整体动画更佳流畅）。 //点位分割代码 let lineDistance: any = turf.lineDistance(route); for (let i = 0; i < lineDistance; i +=..
MapboxMap 加载Amap地图图源
sunming的博客
01-31 2707
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
将<script src="http://172.20.91.24/mapbox_tdt/mapbox_tdt/erqi/mapboxgl-cgcs2000-1.13.1/mapbox-gl.js"></script> 转化为vue代码
03-14
我可以回答这个问题。在Vue中，可以使用Vue的组件来加载外部JavaScript文件。你可以使用Vue的mounted生命周期钩子函数来加载这个JavaScript文件。具体代码如下： <template> <div id="map"></div> </template> <script> import mapboxgl from 'mapbox-gl'; export default { mounted() { const script = document.createElement('script'); script.src = 'http://172.20.91.24/mapbox_tdt/mapbox_tdt/erqi/mapboxgl-cgcs2000-1.13.1/mapbox-gl.js'; script.onload = () => { mapboxgl.accessToken = 'your_access_token'; const map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/streets-v11', center: [lng, lat], zoom: 12 }); }; document.head.appendChild(script); } }; </script>

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一碗老面i

你的鼓励是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值