初识mapbox GL

初识mapbox GL一 概述最近由于项目的需求 借此机会对 mapbox GL 做了一个系统的学习 同时也对整个学习过程做一个记录 一方面留作自用 另一方面也希望看到此文的人在学习 mapbox GL 的时候 能够有所启发 有所收获

欢迎大家来到IT世界,在知识的湖畔探索吧!

一、概述

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

二、快速认识

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

1.目的

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

2.如何快速认识

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

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

2.1 Overview

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

2.2 Example

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

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

三、深入学习

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

从上图,我们可以明显的看出mapbox GL里面的几个核心:map、marker、popup、control、handler、geometry、source、layers,其中map和layers更是核心中的核心,下面我将结合一定的例子对上面的内容做一分解说明。

1.map

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

初识mapbox GL

map

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 });

欢迎大家来到IT世界,在知识的湖畔探索吧!

1.2 method

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

欢迎大家来到IT世界,在知识的湖畔探索吧!// 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';

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(); });

2.marker

marker拆分后的导图如下。

初识mapbox GL

marker

2.1 option

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

欢迎大家来到IT世界,在知识的湖畔探索吧!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);

2.2 method

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

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

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);

3.popup

popup拆分后的导图如下。

初识mapbox GL

popup

3.1 option

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

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

3.2 method

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

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

3.3 event

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

function onOpen() { console.log('Popup Open'); } popup.on('open', onOpen);

4.source

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

初识mapbox GL

source

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);

4.2 ImageSource

ImageSource需要url和coordinates,其中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 });

4.3 VideoSource

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

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

4.4 CanvasSource

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

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

4.5 vector、raster和raster-dem

vector、raster和raster-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%3A@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" });

5.layer

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

初识mapbox GL

layer

下面链接里是mapbox GL官方的streets-v11的图层配置参数,比较长,但是我希望你能够认真读完,他对于你理解layer非常重要!!!

链接:https://pan.baidu.com/s/1N0g2esP5POBL0GfZVMwYIw 提取码:kgdv 

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://itzsg.com/98683.html

(0)
上一篇 4天前
下一篇 4天前

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

联系我们YX

mu99908888

在线咨询: 微信交谈

邮件:itzsgw@126.com

工作时间:时刻准备着!

关注微信