mapbox思维导图整理

332次阅读
没有评论

一、概述

对mapbox GL做了一个系统的学习,同时也对整个学习过程做一个记录,一方面留作自用,另一方面也希望看到此文的人在学习mapbox GL的时候,能够有所启发、有所收获。

二、快速认识

很多人在学习一个新的webis框架的时候,表示狗咬刺猬——无从下口。对于这一点,我的建议是快速认识。

1.目的

快速认识的目的有两个:1、对框架有一个认知性的理解;2、甄别框架是否满足需求。

2.如何快速认识

打开maobox GL官网,如下图所示:

mapbox思维导图整理

快速认识mapbox GL,我们只需要快速看一下OverviewExample两个部分即可。

2.1 OVERVIEW

通过Overview,我们可以获取到几个信息:1、简介;2、版本;3、引用,包括npm和cdn;4、基本的使用demo。

2.2 EXAMPLE

Example 是官方提供的有关maoboxl GL功能比较全面的一个展示,对于一个初次接触的人来说,通过Example,一方面我们能够快速的获取mapbox GL的表现,另一方面,通过Example代码,可以对框架的使用有一个初步的认识。

mapbox思维导图整理

Example页面,上方是实现的效果,下方是实现的代码,这样结合效果和代码,更方便我们对框架的理解。

三、深入学习

深入学习,我们对Example外的API ReferenceStyle Specification的部分去认真的阅读,有必要的同时做以笔记。深入学习的时候,我建议根据文档提供的结构,必要时需要去查阅源代码做以辅助,整理框架的思维导图。在整理导图的时候,如果对于webgis比较熟悉的话,可以根据自己的理解与判断,对于部分不经常用的做以删减。下图是我在学习的时候整理的导图。

mapbox思维导图整理

从上图,我们可以明显的看出mapbox GL里面的几个核心:mapmarkerpopupcontrolhandlergeometrysourcelayers,其中maplayers更是核心中的核心,下面我将结合一定的例子对上面的内容做一分解说明。

1.MAP

从大的导图里面把map的部分单独拿出来,如下图。

mapbox思维导图整理

1.1 OPTION

option是初始化map是需要的一些参数:

var map = new mapboxgl.Map({
  container: 'map', // container id
  style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
  center: [-74.5, 40], // starting position [lng, lat]
  zoom: 9 // starting zoom
});
123456

1.2 METHOD

method是map可调用的一些方法,方法调用所需的参数和方法需参考API Reference

// addSource
map.addSource('warn-line', {
  type: 'geojson',
  data: geojson
});
// addLayer
map.addLayer({
  id: 'warn-line',
  type: 'line',
  source: 'warn-line',
  paint: {
    'line-color': [
      'match',
      ['get', 'color'],
      'blue', 'blue',
      'green'
    ],
    'line-width': 2,
    'line-dasharray': [5, 3]
  }
});
// getCanvas
map.getCanvas().style.cursor = 'pointer';
1234567891011121314151617181920212223

1.3 EVENT

event是可绑定在map上的事件,事件的绑定方式为map.on('event', eventData)

// mouseenter
map.on('mouseenter', 'points', function(e) {
  map.getCanvas().style.cursor = 'pointer';
  that.showInfo(e.features[0]);
});
// click
map.on('click', 'points', function(e) {
  map.getCanvas().style.cursor = 'pointer';
  var feature = e.features[0];
  var center = feature.geometry.coordinates.slice();
  map.flyTo({center: center, zoom: 14});
});
// mouseleave
map.on('mouseleave', 'points', function() {
  map.getCanvas().style.cursor = '';
  that.popup.remove();
});
1234567891011121314151617

2.MARKER

marker拆分后的导图如下。 mapbox思维导图整理

2.1 OPTION

option是初始化marker是需要的一些参数:

const ele = document.createElement('div');
ele.setAttribute('class', 'map-label');
ele.innerHTML = r.name;
const option = {
  element: ele,
  anchor: 'bottom',
  offset: [0, -10]
}
const marker = new mapboxgl.Marker(option);
123456789

2.2 METHOD

method是marker可调用的一些方法,方法调用所需的参数和方法需参考API Reference

marker.setLngLat([r.lon, r.lat]);
marker.addTo(map);
12

2.3 EVENT

event是可绑定在marker上的事件,事件的绑定方式为marker.on('event', handler)

function onDragEnd() {
    var lngLat = marker.getLngLat();
    coordinates.style.display = 'block';
    coordinates.innerHTML = 'Longitude: ' + lngLat.lng + 
      '<br />Latitude: ' + lngLat.lat;
}

marker.on('dragend', onDragEnd);
12345678

3.POPUP

popup拆分后的导图如下。 mapbox思维导图整理

3.1 OPTION

option是初始化popup是需要的一些参数:

var popup = new mapboxgl.Popup({
  closeButton: false,
  closeOnClick: false,
  className: 'my-popup',
  offset: [0, -15],
  anchor: 'bottom'
});
1234567

3.2 METHOD

method是popup可调用的一些方法,方法调用所需的参数和方法需参考API Reference

popup.setLngLat(coordinates)
     .setHTML(description)
     .addTo(map);
123

3.3 EVENT

event是可绑定在popup上的事件,事件的绑定方式为popup.on('event', handler)

function onOpen() {
  console.log('Popup Open');
}

popup.on('open', onOpen);
12345

4.SOURCE

mapbox GL里source在API ReferenceStyle Specification均出现了,仔细查看文档,发现在API Reference说明的是方法,Style Specification里面说明的是属性。source的导图如下图。 mapbox思维导图整理

4.1 GEOJSONSOURCE

GeoJSONSource可为json对象或者文件url。

// data可为json对象或者文件url
var geojson = 'url';
var geojson = {};
map.addSource('points', {
  type: 'geojson',
  data: geojson
});
map.getSource('points').setData(geojson);
12345678

4.2 IMAGESOURCE

ImageSource需要urlcoordinates,其中coordinates的格式为:top left, top right, bottom right, bottom left

map.addSource('loopimage', {
  type: 'image',
  url: url,
  coordinates: coords
});
map.getSource('loopimage').updateImage({
  url: url,
  coordinates: coords
});
123456789

4.3 VIDEOSOURCE

VideoSource需要urlcoordinates,其中coordinates的格式为:top left, top right, bottom right, bottom left

map.addSource('video', {
  type: 'video',
  url: url,
  coordinates: coords
});
map.getSource('video').play();
123456

4.4 CANVASSOURCE

CanvasSource需要canvascoordinates,其中coordinates的格式为:top left, top right, bottom right, bottom left

map.addSource('canvas', {
  type: 'canvas',
  canvas: canvas,
  coordinates: coords
});
map.getSource('canvas').play();
123456

4.5 VECTOR、RASTER和RASTER-DEM

vectorrasterraster-dem是在API和style里面没有对应上的,主要是一些栅格或者矢量的切片或者服务调用。

// raster——xyz切片
map.addSource('XYZLabel', {
  "type": "raster",
  "tiles": ['http://www.google.cn/maps/vt?lyrs=h@189&gl=cn&x={x}&y={y}&z={z}'],
  "tileSize": 256
});
// raster——wms
map.addSource('wmsLayer', {
  "type": "raster",
  "tiles": ['http://39.106.122.204:8086/geoserver/railway/wms?service=WMS&version=1.1.0&request=GetMap&layers=railway:layer_base&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE'],
  "tileSize": 256
});
// raster——tms
map.addSource('gugong', {
  'type': 'raster',
  'scheme': 'tms',
  'tiles': ['http://localhost:8086/geoserver/gwc/service/tms/1.0.0/jtmet%3Agugong@EPSG%3A900913@png/{z}/{x}/{y}.png']
});

// vector
map.addSource("states", {
  type: "vector",
  url: "mapbox://mapbox.us_census_states_2015"
});
// raster-dem
map.addSource('dem', {
  "type": "raster-dem",
  "url": "mapbox://mapbox.terrain-rgb"
});
1234567891011121314151617181920212223242526272829

5.LAYER

layer在mapbox GL中是非常重要的,我觉得mapbox GL的设计NB之处也在于此。layer的type的可能值有background, fill, line, symbol, raster, circle, fill-extrusion, heatmap, hillshadelayer的导图如下。 mapbox思维导图整理