二.mapbox使用loadImage和addLayer添加图片和文字

使用的离线地图中mapbox使用loadImage和addLayer添加图片和文字

  <!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Display a map on a webpage</title><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"><link href="https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.css" rel="stylesheet"><script src="https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.js"></script><style>body {margin: 0;padding: 0;}#map {position: absolute;top: 0;bottom: 0;width: 100%;}</style>
</head>
<body><div id="map"></div><script>var vectorTileBackgroundLayer = {"version": 8,"glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf","sources": {"raster-tile": {"type": "raster","tiles": ["http://10.1.10.109/tiandituImgLabel/{z}/{x}/{y}.png"],"tileSize": 256}},"layers": [{"id": "simple-tiles","type": "raster","source": "raster-tile","minzoom": 11,"maxzoom": 18}]};mapboxgl.accessToken = '您的钥匙';const map = new mapboxgl.Map({container: 'map', style: vectorTileBackgroundLayer,center: [118.1517713497023, 39.63166152545793], zoom: 11,    pitch: 0,  bearing: 0, antialias: true, minZoom: 11,maxZoom: 17,});map.on('load', function () {map.loadImage('http://10.1.10.109/pic/message.png', (error, image) => {map.addImage('yoimage', image, { sdf: true });});map.addLayer({"id": "points","type": "symbol","source": {"type": "geojson","data": {"type": "FeatureCollection","features": [{"type": "Feature","properties": {"MyBuildName": "12啊飒飒的"},"geometry": {"type": "Point","coordinates": [118.1421332866658, 39.6622710275781]}}]}},"layout": {"text-field": "{MyBuildName}",//文本内容来源字段"text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],//字体"text-offset": [0, 1.25],//设置图标与图标注相对之间的距离"text-anchor": "top",//标记文本相对于定位点的位置"text-size": 12,//字号"icon-image": "yoimage","icon-size": 0.5,//图标的大小},});});</script></body>
</html>

注意要有字体：

"glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf" 要不没有字体，不显示。

二.mapbox使用loadImage和addLayer添加图片和文字相关推荐

Qt qpushbutton上添加图片和文字
在button上添加图片和文字,通过background-image.border-image.setIcon.pixmap等方式添加图片,都无法做到图片在上,文字在下. 步骤一:在pushbutto ...
android 图片绑定按钮,Android编程实现给Button添加图片和文字的方法
本文实例讲述了Android编程实现给Button添加图片和文字的方法.分享给大家供大家参考,具体如下: //为按钮添加图片和文字的方法 public Spanned getSpan(int id, ...
IText7添加图片覆盖文字
解决IText7添加图片覆盖文字问题描述: 通过IText7创建PDF时,添加图片到指定位置,导致图片覆盖原本存在的文字. 原始图片: 原始代码如下: Image image = new Image ...
php中怎么给文字加颜色,PHP水印类,支持添加图片、文字、填充颜色区域的实现...
*自己整理的一个水印类* 支持添加图片.文字.填充颜色区域 /** * 图片加水印类,支持文字水印.透明度设置.自定义水印位置等. * 使用示例: * $obj = new WaterMask($im ...
php 图片填充图片,PHP水印类,支持添加图片、文字、填充颜色区域的实现_php实例...
下面小编就为大家带来一篇PHP水印类,支持添加图片.文字.填充颜色区域的实现.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 *自己整理的一个水印类* 支持添加图片.文字 ...
php制作白色背景图加字,PHP实现水印类,支持添加图片、文字、填充颜色区域
本篇文章主要介绍PHP实现水印类,支持添加图片.文字.填充颜色区域,感兴趣的朋友参考下,希望对大家有所帮助. *自己整理的一个水印类* 支持添加图片.文字.填充颜色区域 /** * 图片加水印类,支持 ...
生成高清缩略图; 添加图片、文字水印; 图片、文字水印透明
之前写了一个公共的ImgHelper类,主要提供高清晰缩略图生成,由于在之前的实际操作过程中存在一些问题,最近有了点时间,于是重新拾起来再改进一下,顺便研究一下GDI+. 问题一:产品搜索列表展示,每 ...
php分析图片中水印的位置,thinkphp添加图片、文字水印自定义位置等
只添加文字水印 //生成带水印的图片 $image = new \Think\Image(); //定义位置 $path="./Upload/water/".$time." ...
使用EasyExcel在同一单元格内添加图片和文字，并作格式排版
格式要求如下: 需求:在一个单元格内,左侧是图片,右侧是文字,文字和图片之间有间隙. 思路:在一个单元格内添加图片并设置图片位置,然后添加文字,设置文字位置. 经查看EasyExcel文档发现: 添加 ...

二.mapbox使用loadImage和addLayer添加图片和文字

二.mapbox使用loadImage和addLayer添加图片和文字相关推荐

最新文章

热门文章