<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin:0;
padding:0;
}
#map{
position: absolute;
top:0;
bottom:0;
width:100%;
}
</style>
<script src='./mapbox-gl.js'></script>
<link href='./mapbox-gl.css' rel='stylesheet' />
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = '你的accessToken';
let map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
});
//所有必要数据源下载完毕,且首个可见的地图渲染完毕后立即触发
map.on('load',function () {
//图片宽度的像素
let width = 64;
//一个像素由红 绿 蓝 透明度(alpha) 四个字节组成
let bytesPerPixel = 4;
/*
* 该UintArray类型数组表示的8位无符号整数数组,内容被初始化为0
* 建立后,您可以使用对象的方法或标准数组索引语法
* (即,使用括号表示法)引用数组中的元素
*
* */
//此处就是创建一个容量为64*64*4的此8位无符号整数数组
let data = new Uint8Array(width*width*bytesPerPixel);
/*
* 外面双重循环代表像素点的个数,组成一个正方形
*
* */
for (let x = 0; x <width; x++) {
for (let y = 0; y < width; y++) {
//offset代表每一个像素点的起始位置
let offset = (y*width+x) *bytesPerPixel;
//一个像素点要占四个字节,r g b alpha
data[offset] = y/width*255;//red
data[offset+1] = x/width*255;//green
data[offset+2] = 128;//blue
data[offset+3] = 255;//alpha
}
}
/*
* 添加一张图片到地图中
* 参数:
* 、 id(string):图片的id
* image(HTMLImageElement|ImageData|具有width,height,data的属性的对象):其格式都是ImageData
* option?可选(object):
* pixelRatio:图像像素与屏幕真实像素的比例
* sdf:是否应该被解析为SDF图像
*
* */
map.addImage("gradient",{width:width,height:width,data:data});
/*
* 添加一个Mapbox样式的图层到地图样式
* 参数:
* layer(object|CustomLayerInterface)需要添加的样式图层,符合Mapbox样式规范的图层定义
* beforeId可选(string):用来插入新图层的现有图层ID,如果该参数被省略,该图层会被添加到图层数组末尾
*
* //更多细节参考https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#layout-property
* layer详解:
* id:唯一的图层名称
* layout(layout 可选):图层的布局属性
* maxzoom(number(0-24) 可选):图层的最大缩放级别,在等于或大于maxzoom的缩放级别时,该层将被隐藏
* metdata(可选):任意属性可用于跟踪图层,但不影响渲染,应该给属性加上前缀以避免冲突
* minzoom(number(0-24) 可选):图层的最小缩放级别,如果缩放级别小于最小缩放级别,则该图层将被隐藏
* paint(paint 可选):此图层的默认绘画属性
* source(string 可选):要用于此层的源描述的名称。除背景外的所有图层类型都需要。
* source-layer(string 可选):从矢量图块源使用的图层。矢量图块源所必需;禁止用于所有其他来源类型,包括GeoJSON来源。
* type(enum 必须):下列之一
* fill:具有可选描边边框的填充多边形
* line;描边线
* symbol:图标或文本标签
* circle:实心圆
* heatmap:热图
* fill-extrusion:拉伸的3d多边形
* rester:栅格地图纹理,例如卫星图像
* hillshade:基于DEM数据的客户端山体阴影可视化,目前,该实现仅支持Mapbox Terrain RGB和Mapzen Terrarium磁贴。
* background:地图的背景颜色或图案
*
* geojson:参考https://www.jianshu.com/p/852d7ad081b3
* */
map.addLayer({
"id":"points",
"type":"symbol",//图标或文本标签
"source":{
"type":"geojson",
"data":{
"type":"FeatureCollection",
"features":[{//此处数据为geojson格式表示一个点数据
"type":"Feature",
"geometry":{
"type":"Point",
"coordinates":[0,0]//坐标
}
}]
}
},
"layout":{
"icon-image":"gradient"//用来在图片背景中绘制的图片名字
}
})
});
</script>
</body>
</html>
如有错误,欢迎指正,不胜感激~