mapboxgl.map适应边界框;mapboxgl显示到中心点;mapboxgl适应边界框显示 1524次阅读 it • bug及解决方案 2021-01-29 ##阅读此文章可解决以下问题: **1.从多边形图案的中心点加载地图 2.算出多边形图案的边界框,将地图移动到边界框所在的位置,自适应大小** ** 3.从多边形中心点加载地图,并移动到它的边界框所在位置,自适应大小。 ** ##问题描述完毕,实现步骤描述 **1.创建对象接收一系列点位集合(多边形) 2.算出图案中心点和边界框 3.从中心点加载地图,移动地图到边界框所在地 ** ##理论存在,实验开始! ``` // 加载地图事件 initMap() { mapboxgl.accessToken = 'pk.ey/保密……Mg'; let sources = { 'tdt-img': {//影像底图 'type': 'raster', 'tiles': [ 'http://保密……', ], 'tileSize': 256 }, 'tdt-cia': {//影像-注记 'type': 'raster', 'tiles': [ 'http://保密……', ], 'tileSize': 256 } } let layers = [{ 'id': 'img', 'type': 'raster', 'source': 'tdt-img' }, { 'id': 'cia', 'type': 'raster', 'source': 'tdt-cia' }] // 如果是修改,定位到中心点,根据边界框显示地图 var polygon = null var centerPoint = null var southWest = null var northEast = null if (this.formData.monitorScope != '' && this.formData.monitorScope != null) { // mt是储存的一系列点位 let mt = JSON.parse(this.formData.monitorScope) polygon = turf.polygon(mt); polygon.id = 'poly1' // 计算质心(中心点) var centerData = turf.centerOfMass(polygon); // 避免复制引用 centerPoint = JSON.stringify(centerData.geometry.coordinates) centerPoint = JSON.parse(centerPoint) // 移动到边界框 // 去掉数据首尾中括号(因为数据库储存时存的有多个中括号,这里多出一对,解析失败,因此去掉) let points = JSON.parse(JSON.stringify(this.formData.monitorScope))// 数据库存的一系列点 // 去掉多余的首尾字符,大概格式是一对中括号包括了一堆点位,具体需要什么格式请自行百度 points = points.substring(0, points.length - 1); points = points.substring(1, points.length); var line = turf.lineString( JSON.parse(points) ); var bbox = turf.bbox(line);// turf.bbox方法,获得边界框点位 // var bboxPolygon = turf.bboxPolygon(bbox); // 在地图上画出边界框 // 移动到边界框需要两个点 (西南点,东北点) southWest = [bbox[0], bbox[1]]; northEast = [bbox[2], bbox[3]]; } if (centerPoint == null || centerPoint == '') { centerPoint = [116.3888056,39.9075] // 北京天安门 } var url=window.location.host this.map = new mapboxgl.Map({ container: this.$refs.mymap, center:centerPoint, // 中心点 zoom: 10, // 缩放层级 style:{ sprite: "http://"+url+"/mapbox/sprites/sprite",//本地的json及图片 glyphs: "http://"+url+"/mapbox/font/{fontstack}/{range}.pbf",//字体文件 version: 8, sources: sources, layers: layers }, }) this.draw = new MapboxDraw({displayControlsDefault: false}); this.map.addControl(this.draw); // 如果是修改,绘制保存的图形 let that = this; if (this.formData.monitorScope != '' && this.formData.monitorScope != null) { // 移动到边界框 if (southWest != null && northEast != null) { this.map.fitBounds([ southWest, northEast ]); } // 等地图样式加载完后 绘图(否则会报一个样式未加载完就调用方法的错) this.map.on('load', function() { that.addclLayers(polygon) // 注意此处是that,因为在onload方法域的this取到的不是外面的vue对象!!! }) } }, ``` 以上是个人工作经历,废了老大的劲搞出来的,功能很简单,但是没怎么弄地图相关的,所以找资料很累,整理一下写个资料,希望能帮后来者少踩些坑。 ###效果图:  Alipay手机上阅读 最后一次更新于2021-02-05 mapboxgl
0 条评论