mapbox学习记录
mapboxmarkermarkeruve内部通过Object.defineProperty方法,属性拦截的方式,把data对象里每个数据的读写转化成getter/setter,当数据变化时通知视图更新Vue 的双向绑定机制采用数据劫持结合发布/订阅模式实现的: 通过 Object.defineProperty() 来劫持各个属性的 setter,getter,在数据变动时发布消息给订阅者,触发相
mapbox学习记录
addSource
为地图的样式添加数据源。id(string)添加数据源的ID。不能和存在的数据源冲突。source(Object)数据源对象。其中type可以是vector,raster,geojson,image,video等
map.addSource("points", {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-77.03238901390978, 38.913188059745586]
},
"properties": {
"title": "Mapbox DC 中国文字",
"icon": "monument"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-122.414, 37.776]
},
"properties": {
"title": "Mapbox SF",
"icon": "harbor"
}
}]
}
});
source配置参考:https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#geojson
addLayer
添加一个 Mapbox 样式的图层 到地图样式。图层为来自特定数据源的数据定义样式。
id: 唯一标识
type可选:fill,line,symbol,circle等
source: 对应addsource
参考:https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/
"layers": [
{
"id": "water",
"source": "mapbox-streets",
"source-layer": "water",
"type": "fill",
"paint": {
"fill-color": "#00ffff"
}
}
]
// 添加图层,使得上面的数据源里面的数据可视化(source对应上面addsource的points)
map.addLayer({
"id": "points",
"type": "symbol",
"source": "points",
"layout": {
"icon-image": "{icon}-15",
"text-field": "{title}",
"text-font": ["Open Sans Regular"],
"text-offset": [0, 0.6],
"text-anchor": "top"
}
});
参考:
(添加wms图层)http://www.mapbox.cn/mapbox-gl-js/example/wms/
(添加聚合图层)https://docs.mapbox.com/mapbox-gl-js/example/cluster/
(聚合点中paint配置)https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/
setPaintProperty
设置指定样式图层中 paint 属性的值。setPaintProperty(layerId,name,value)
layerId(string)需要设置 paint 渲染属性的图层 ID。
name(string)需要设置的 paint 渲染属性名称。
value(any)要设置的 paint 渲染属性值。
参考:http://www.mapbox.cn/mapbox-gl-js/api/#map#setpaintproperty
setLayoutProperty
设置指定样式图层中布局属性的值。map.setLayoutProperty(‘my-layer’, ‘visibility’, ‘none’);
layerId(string)需要在其中设置布局(layout)属性的图层 ID。
name(string)需要设置的布局属性名称。
value(any)布局属性的值。必须是一种符合 Mapbox Style Specification 规定的属性类型。
options(Object?)(default {})
loadImage,addImage
map.on('load', function() {
map.loadImage(
'https://upload.wikimedia.org/wikipedia/commons/7/7c/201408_cat.png',
function(error, image) {
if (error) throw error;
map.addImage('cat', image); //
map.addSource('point', {
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [0, 0]
}
}
]
}
});
map.addLayer({
'id': 'points',
'type': 'symbol',
'source': 'point', //对应addsource的point
'layout': {
'icon-image': 'cat', //对应addiamge的cat
'icon-size': 0.25
}
});
}
);
});
参考:http://www.mapbox.cn/mapbox-gl-js/example/wms/
getLayer
返回地图样式中指定 ID 的图层。
removeLayerAndSource
返回地图样式中指定 ID 的图层。
popup
弹窗组件
example
var markerHeight = 50, markerRadius = 10, linearOffset = 25;
var popupOffsets = {
'top': [0, 0],
'top-left': [0,0],
'top-right': [0,0],
'bottom': [0, -markerHeight],
'bottom-left': [linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
'bottom-right': [-linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
'left': [markerRadius, (markerHeight - markerRadius) * -1],
'right': [-markerRadius, (markerHeight - markerRadius) * -1]
};
var popup = new mapboxgl.Popup({offset: popupOffsets, className: 'my-class'})
.setLngLat(e.lngLat)
.setHTML("<h1>Hello World!</h1>")
.setMaxWidth("300px")
.addTo(map);
具体参考:http://www.mapbox.cn/mapbox-gl-js/api/#popup
queryRenderedFeatures
返回一个GeoJSON Feature objects数组,这些对象表示满足查询参数的可见要素。
// 查找一个点的所有要素
var features = map.queryRenderedFeatures(
[20, 35],
{ layers: ['my-layer-name'] }
);
// 查询单个图层的所有渲染的要素
var features = map.queryRenderedFeatures({ layers: ['my-layer-name'] });
参考:https://docs.mapbox.com/mapbox-gl-js/example/queryrenderedfeatures/
getSource
返回地图样式中指定ID的数据源。
setFilter
layerId(string)需要应用筛选器的图层 ID。
filter((Array | null | undefined))筛选器,需符合 Mapbox 样式规范的 筛选器定义 。如果提供了 null 或 undefined ,函数会从图层中移除所有存在的筛选器
参考:http://www.mapbox.cn/mapbox-gl-js/api/#map#setfilter
https://docs.mapbox.com/mapbox-gl-js/style-spec/other/#other-filter
更多推荐
所有评论(0)