mapBox添加本地图片

说在前面

相比较于leaflet，mapbox现在已经日益强大，他提供了很多应用的例子给我们，但是总会有些不能照顾到所有人的实际需求，所以今天来介绍一些mapbox加载本地图片的例子。

开门见山

<template><div class="mapbox-container"><div class="mapbox-container" id="mapContainer"></div></div>
</template>
<script>
import mapboxgl from "mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";
export default {name: "mapbox",data() {return {};},mounted() {mapboxgl.accessToken = '<your access token here>';var map = new mapboxgl.Map({container: "mapContainer",style: { // 加载空白底图version: 8,layers: [],sources: {},},center: [120.58823713531, 30.052169796647],zoom: 10,});map.on('load', () => {map.loadImage(require('./a.png')),function(error, image) {if (error) throw error;map.addImage('ref-name', image)  // 此时map已经存储了一个图片对象，后续需要的时候可直接调用map.addLayer({id: "points",type: "symbol",source: {type: "geojson",data: {type: "FeatureCollection",features: [{type: "Feature",geometry: {type: "Point",coordinates: [120.58823713531, 30.052169796647], // 图片位置},}],},},layout: {"icon-image": "ref-name","icon-size": 0.9,},})}})}
}
</script>

说到最后

最后发散一下思维，如果大家希望添加多张相同的图片在不同位置可以怎么做呢？大家可以看到features变量接收的是一个数组，所以我们可以传递多个{}，然后使用不同的坐标信息就可以啦。

以上。

mapBox添加本地图片相关推荐

[Android] 通过GridView仿微信动态添加本地图片
原文:http://blog.csdn.net/eastmount/article/details/41808179 前面文章讲述的都是"随手拍"中图像处理的操作,此篇文章主要讲述 ...
android 点动态显示图片,Android用RecyclerView实现动态添加本地图片
本文介绍了Android用RecyclerView实现动态添加本地图片,分享给大家,具体如下: 简单介绍一下用法: 1.跳转到图片选择页面: Intent intent = new Intent(Pa ...
百度地图自定义图标icon 添加本地图片无法显示问题解决
百度地图自定义图标icon 添加本地图片无法显示问题解决我们在阿里巴巴矢量库找的icon 保存到本地结论我们在阿里巴巴矢量库找的icon 保存到本地链接: 阿里巴巴矢量库. 图片: 随便找一个 ...
【微信小程序-原生开发】实用教程05-首页（含自定义调试模式、插入图片、图文排版、底部留白、添加本地图片）
开始前,请先完成启动/欢迎/首屏广告页的开发,详见 [微信小程序-原生开发]实用教程04-启动/欢迎/首屏广告页(含倒计时.添加文字.rpx.定义变量和函数.读取变量.修改变量.wx.reLaunch ...
【PDFBox】PDFBox操作PDF文档之添加本地图片、添加网络图片、图片宽高自适应、图片水平垂直居中对齐
这篇文章,主要介绍PDFBox操作PDF文档之添加本地图片.添加网络图片.图片宽高自适应.图片水平垂直居中对齐. 目录一.PDFBox操作图片 1.1.添加本地图片 (1)案例代码 (2)运行效果 ...
用RecyclerView实现动态添加本地图片
本文所用的多图选择的library来自:https://github.com/lovetuzitong/MultiImageSelector 简单介绍一下用法: 1.跳转到图片选择页面: Intent ...
hexo+markdown添加本地图片无法显示
这个的话就要说一下hexo所支持的markdown和其他一些markdown语法稍微有点不同造成的. 比如我在写一篇文章时它的名字叫" R语言绘制个性化词云 ",这个时候它会自动 ...
MackDown MAC版添加本地图片
强烈吐槽一下,这就是个坑! 如果需要添加另一个目录下的图片,绝对路径是不可行的. 需要通过相对路径的方式来插入即需要通过 "-/-/"的命令返回上层级的目录,直至可以顺利的找到 ...
echarts添加背景图片,背景色及水印
2022-1-9学习记录添加背景图遇到的问题: 添加本地图片为背景图片时不显示图片解决: 在templates同级目录下创建一个static目录,将图片文件放置此文件夹内即可法一: 在div标 ...

mapBox添加本地图片

说在前面

开门见山

说到最后

mapBox添加本地图片相关推荐

最新文章

热门文章