mapbox-将生成的图标添加到地图代码解释

最新推荐文章于 2024-05-17 17:02:30 发布

絔殇

最新推荐文章于 2024-05-17 17:02:30 发布

阅读量1k

点赞数 1

分类专栏： mapbox 文章标签： javascript

本文链接：https://blog.csdn.net/MSmoshang9/article/details/107461712

版权

mapbox 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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>

如有错误，欢迎指正，不胜感激~

絔殇

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
mapbox-将生成的图标添加到地图代码解释

<!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;
复制链接

扫一扫