Mapbox使用sdf图片

首先安装工具

npm install image-sdf -g

将普通png转化成sdf格式的png

image-sdf test.png --spread 10 --downscale 1 > test_sdf.png

图层配置

{"id": "测试_点","type": "symbol","source": "testpoint","source-layer": "testpoint","minzoom": 14,"layout": {"visibility": "visible","text-field": "{mapno}","text-font": ["Open Sans Regular"],"text-size": 14,"icon-size": 1,"icon-image": "test_name","text-offset": [0,-2]},"paint": {"text-color": "rgba(255, 65, 6, 1)"}
}

必须代码加载才可以使用

// 单张使用
map.loadImage('test_sdf.png', function (error, image) {if (error) throw error;map.addImage('test_name', image, { 'sdf': true });
})// 如果使用雪碧图形式
map.loadImage('http://10.0.0.15:8088/sdf/sprite.png', (error, image) => {if (error) throw error;console.log(image)axios.get('http://10.0.0.15:8088/sdf/sprite.json').then((res)=>{const imageslist = res.data;for(let item in imageslist){createImageBitmap(image, imageslist[item].x, imageslist[item].y, imageslist[item].width, imageslist[item].height).then((img)=>{map.addImage(item, img, { sdf: true });})}})
});

Mapbox使用sdf图片相关推荐

mapBox添加本地图片
说在前面相比较于leaflet,mapbox现在已经日益强大,他提供了很多应用的例子给我们,但是总会有些不能照顾到所有人的实际需求,所以今天来介绍一些mapbox加载本地图片的例子. 开门见山 &l ...
mapbox地图的使用方法-总结
今天刚好有时间就来总结下mapbox的用法吧自己选择的路跪着也要走完在使用mapbox之前需要到官网去注册账号,然后会拿到一个Access tokens,只有拿到了这个token你才能使用mapb ...
mapbox地图的使用方法
在使用mapbox之前需要到官网去注册账号,然后会拿到一个Access tokens,只有拿到了这个token你才能使用mapbox地图,我们可以用两种方式引入mapbox GL js 使用mapbo ...
二.mapbox使用loadImage和addLayer添加图片和文字
使用的离线地图中mapbox使用loadImage和addLayer添加图片和文字 <!DOCTYPE html> <html> <head><meta ch ...
Mapbox gl tile瓦片渲染点以及图片Icon
Mapbox gl tile瓦片渲染点以及图片Icon 1. 效果图 2. 源码参考 1. 效果图点效果图如下: 以图标渲染效果图如下: 注意图片要不能跨域,需要下载的下来才能正常展示. 2. 源 ...
smiles、sdf 小分子可视化展示标记软件DataWarrior、chemdraw；pdf或图片化学分子提取工具StoneMIND | Collector
1.smiles网页接口可视化 http://hulab.rxnfinder.org/smi2img/ 直接替换下列最后的simles就行 http://hulab.rxnfinder.org/smi ...
【MAPBOX基础功能】16、mapbox叠加图片图层到地图上
前言官网指引,生成accesstoken,下载相关依赖请翻阅[https://blog.csdn.net/weixin_44402694/article/details/125414381?spm= ...
qgis 图片_如何在QGIS中添加自定义的Mapbox底图？
MapBox提供的底图产品是我目前最喜欢的两个地图源之一.他们除了Studio供用户自定义底图外,还提供了一个更为简单的Cartogram站点,用户只需上传一张图片,系统会自动根据图片色系定义一份特色 ...
vue+mapbox实现聚合以及自定义图片图层、元素激活、显示popup、自定义marker
功能背景: 当地图上数据量过大,需要在高层级聚合显示数字,低层级显示具体图标的时候,就需要使用聚合来实现了官网图示: 官网地址:[mapbox聚合示例](https://docs.mapbox.co ...

Mapbox使用sdf图片

Mapbox使用sdf图片相关推荐

最新文章

热门文章