概述

用过mapboxGL的都知道里面有个叫做sprite的配置，它的主要用途就是地图上渲染图标的，但是大多数情况下我们需要自定义图标的，我们该怎么办呢，莫着急，牛老师有招，本文告诉你如何通过几行简单的java代码实现，用引用到我们的地图中。

效果

生成的json文件如下：

{"zgyh": {"visible": "true","pixelRatio": 1,"x": 0,"width": 32,"y": 105,"height": 32},"jsyh": {"visible": "true","pixelRatio": 1,"x": 0,"width": 32,"y": 35,"height": 32},"nyyh": {"visible": "true","pixelRatio": 1,"x": 0,"width": 32,"y": 70,"height": 32},"gsyh": {"visible": "true","pixelRatio": 1,"x": 0,"width": 32,"y": 0,"height": 32}
}

实现

1.图片准备

为了简单测试效果，本文的图标都是从iconfont下载的，同时为了方便，图标大小统一为32px。

2.java生成雪碧图和json

import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.*;import com.amazonaws.util.json.JSONObject;
import javax.imageio.ImageIO;public class MergeImg {public static File[] getFiles(String path) {File file = new File(path);if(file.isDirectory()) {File[] files = file.listFiles();return files;} else {return null;}}public static void append2File(String file, String content) {try {File f = new File(file);FileWriter fw = new FileWriter(f, true);PrintWriter pw = new PrintWriter(fw);pw.println(content);pw.flush();fw.flush();pw.close();fw.close();}catch (IOException e) {e.printStackTrace();}}public static void main(String[] args) throws Exception {String path = "D:\\lzugis\\code\\lzugis\\out";File[] files = getFiles(path + "\\img");int width = 32;int height = 35 * files.length;BufferedImage bufferedImage = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);Graphics2D graphics2D = (Graphics2D) bufferedImage.getGraphics();bufferedImage = graphics2D.getDeviceConfiguration().createCompatibleImage(width, height, Transparency.TRANSLUCENT);graphics2D.dispose();graphics2D = bufferedImage.createGraphics();JSONObject jsonObject = new JSONObject();for (int i = 0; i < files.length; i++) {File file = files[i];if(!file.isDirectory()) {String name = file.getName();name = name.substring(0, name.lastIndexOf("."));BufferedImage bi = ImageIO.read(file);int x = 0;int y = 35 * i;int h = bi.getHeight();int w = bi.getWidth();graphics2D.drawImage(bi, x, y, w, h, null);JSONObject js = new JSONObject();js.put("x", x);js.put("y", y);js.put("width", w);js.put("height", h);js.put("pixelRatio", 1);js.put("visible", "true");jsonObject.put(name, js);}}graphics2D.dispose();FileOutputStream out = new FileOutputStream(path +"\\merge.png");ImageIO.write(bufferedImage, "PNG", out);append2File(path +"\\merge.json", jsonObject.toString());}
}

3.地图调用

地图调用的方式如下：

initMap: function() {var rootPath = 'http://localhost:63342/learn-demo/mapbox/lib/';var mapStyle = {"version": 8,"name": "Dark","sources": {"XYZTile": {"type": "raster","tiles": ['http://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8'],"tileSize": 256,}},"sprite": rootPath + "merge","layers": [{"id": "background","type": "background","paint": {"background-color": "#111"}},{"id": "XYZTile","type": "raster","source": "XYZTile","minzoom": 0,"maxzoom": 22}]};map = new mapboxgl.Map({container: 'map',maxZoom: 18,minZoom: 0,zoom: 3,center: [109.1699, 45.9719],style: mapStyle,attributionControl: false});map.on('load', function() {that.addMarkers();});
},
addMarkers() {$.get('../data/capital.json', res => {var geojson = {'type': 'FeatureCollection','features': []};for (var i = 0; i < res.length; i++) {const r = res[i];geojson.features.push({type: 'Feature',geometry: {type: 'Point',coordinates: [r.lon, r.lat]},properties: r});}that.addGeojson(geojson);})
},
addGeojson(geojson) {map.addSource('points', {type: 'geojson',data: geojson});map.addLayer({'id': 'points','type': 'symbol','source': 'points','layout': {'icon-image': 'jsyh','icon-size': ['interpolate',['linear'],['zoom'],4, 0.6,8, 0.9,12, 1.2]}});
}

mapboxGL中sprite生成与引用相关推荐

word中自动生成参考文献引用及自动更新文献编号
参考: MS office 2010中插入参考文献和更新域的方法 http://jingyan.baidu.com/article/4e5b3e1952739291901e2495.html http ...
使用EndNote X9引用参考文献并在Word中修改生成的引文格式（编号、字体大小）GBT7714(numeric)
使用endnote写论文引用参考文献并进行管理真的很方便,根据个人需求,碰到的一些小问题和解决方法如下: 1.修改word中插入后生成的引用文献的字体,首先是如下操作,可修改一种字体和大小,行间距,缩 ...
mapboxGL中多图标加载的实现
概述 mapboxGl中多图标的实现可以在style中指定sprite来实现,但是在实际使用的时候会出现sprite之外的图标需要引用,此时通过map.addImage()来实现,但是如果存在多个图标 ...
Python中的赋值、引用和深浅拷贝
2019独角兽企业重金招聘Python工程师标准>>> 全局变量在函数之外创建的变量属于main,又被称为全局变量.它们可以在main中的任意函数中访问,与局部变量在函数结束时消失 ...
【深入Cocos2d-x】探索Cocos2d-x中的内存管理-引用计数和自动释放池
2019独角兽企业重金招聘Python工程师标准>>> #深入Cocos2d-x-探索Cocos2d-x中的内存管理-引用计数和自动释放池 ###引用计数(Reference Cou ...
webstorm如何自动换行_怎样在word中自动生成目录
欢迎关注支持,谢谢!!! 用 Word 编排好一本书后,不用制作目录,可以用自动生成的方法生成,那么Word2016目录怎么自动生成呢?如果要自动生成目录,排版时就要设置好章节,如果等排 ...
关于无法加载已创建的布局文件的问题的解决方案以及已布局在对应的R文件中未生成相应ID的问题的解决
先来说下创建后的Layout布局文件在对应的R文件中不能生成相应的ID问题,一般情况下之所以出现这种问题是应为自己的res文件中有错误的文件:对应的是错误的文件格式名称,以及错误的文件内容等.博主就遇 ...
android aar jar制作,AndroidStudio aar、jar生成及其引用
aar生成新建项目,并在项目中新建Library module:banner,如图: 在新建Module中编写完代码后,build整个工程后就会自动生成aar包,包的路径在新建Module ==&g ...
java8 方法引用详解_Java8中如何通过方法引用获取属性名详解
前言在我们开发过程中常常有一个需求,就是要知道实体类中Getter方法对应的属性名称(Field Name),例如实体类属性到数据库字段的映射,我们常常是硬编码指定属性名,这种硬编码有两个缺点. ...

mapboxGL中sprite生成与引用

概述

效果

实现

1.图片准备

2.java生成雪碧图和json

3.地图调用

mapboxGL中sprite生成与引用相关推荐

最新文章

热门文章