当前位置：首页 > news >正文

Openlayers：海量图形渲染之图片渲染

news 来源：原创 2025/8/29 3:17:44

最近由于在工作中涉及到了海量图形渲染的问题，因此我开始研究相关的解决方案。在这个过程中我阅读了文章《Openlayers海量矢量面渲染优化》了解到了利用Canvas在前端生成图片渲染的思路，后来我又从同事那里了解到了后端生成图片渲染的思路。我认为这两种思路其实是相似的，在原理上都是一样，因此在这篇文章中我会把它们放在一起讨论。

一、什么是图片渲染？

在我了解了很多的海量图形渲染技术方案后，我发现其实有两个大的方向，我称之为“量变”与“质变”。其中“质变”就是指采用新的图形渲染逻辑来代替常规的图形渲染逻辑（常规的渲染逻辑就是将图形添加到矢量图层中渲染），而“图片渲染”就是一种典型的“质变”的方法。

“图片渲染”的基本思路思路是，我不直接在地图上绘制图形，而是先在其它的地方将图形绘制好，然后生成一张图片，最后再将图片以图片图层的形式渲染到地图上。

根据生成图片的位置方法的不同，“图片渲染”又可以分为前端图片生成和后端图片生成两种技术路线。

二、在前端生成图片实现图片渲染

1.利用Canvas生成图片并加载到地图上

在前端想要将空间图形绘制成一张图片，首推肯定是用Canvas来实现。

我们可以使用Openlayers的ImageCanvas数据源，它可以支持将一个Canvas元素的图片作为数据源。

它的canvasFunction属性接收一个Canvas函数，在Canvas函数中。我们需要创建一个Canvas元素，然后将图形绘制到Canvas画布上，并将Canvas元素作为函数的返回值，返回的Canvas元素将会作为一张图片。

最后我们再将ImageCanvas数据源添加到一个ImageLayer图层中，这样就可以在地图上加载图片了。

具体的实现方式可参考下面的代码：

// canvas渲染
function addRiver_canvas() {// 读取GeoJSON数据riverMeshFeatures = new GeoJSON().readFeatures(BJGrid, {dataProjection: "EPSG:4547",featureProjection: "EPSG:4326",});addColor();// 添加遮罩图层addMaskLayer();// 获取地图的像素尺寸const mapSize = window.map.getSize();// 使用canvas渲染riverCanvasLayer = new ImageLayer({properties: {name: "riverLayer_canvas",},zIndex: 1,source: new ImageCanvas({canvasFunction: (_extent,_resolution,_pixelRatio,size,_projection) => {// 创建画布const canvas = document.createElement("canvas");const ctx = canvas.getContext("2d");// 设置画布大小canvas.width = size[0];canvas.height = size[1];// 计算缩放比例const ratio = mapSize[0] / size[0];// 设置字体ctx.font = "60px Arial";const features = riverMeshFeatures;// 遍历要素，绘制features.forEach(feature => {// 每个格子设置颜色const color = feature.get("color") || "#00008B";// 几何要素let coordinates = feature.getGeometry().getCoordinates()[0][0];// 开始绘制路径ctx.beginPath();// 遍历环中的每个点并绘制格子let pixel = [0, 0];coordinates.forEach((point, index) => {// 未转比例的坐标const unconvertPixel = window.map.getPixelFromCoordinate(point);// 转比例坐标pixel = [unconvertPixel[0] / ratio, unconvertPixel[1] / ratio];if (index === 0) {// 将绘制起点移动到第一个点ctx.moveTo(pixel[0], pixel[1]);} else if (index === coordinates.length - 1) {// 绘制闭合路径ctx.closePath();} else {// 绘制线段到下一个点ctx.lineTo(pixel[0], pixel[1]);}});ctx.fillStyle = color;ctx.fill();// ctx.strokeStyle = "black";// ctx.lineWidth = 1;// ctx.stroke();});return canvas;},projection: "EPSG:4326",ratio: 1,interpolate: true,}),});window.map.addLayer(riverCanvasLayer);
}

2.如何进行图片更新？

如果加载到地图上的Canvas图片的内容需要更新，可以通过调用CanvasImage数据源的changed()方法重新绘制canvas图片。

3.如何实现图形的点击交互？

由于我们渲染在地图上的是一张图片，因此图片中的图形实际上是无法进行交互的，比如说我想高亮显示被点击的图形，或者点击图形后通过弹窗展示图形的属性信息，这些功能就难以实现。想要实现图形交互就需要另辟蹊径，这里我提供两个解决方案。

方法一利用Geometry.intersectsCoordinate()方法进行拓扑查询

大致的步骤如下：

首先通过地图的点击事件拿到点击位置的坐标
到图形数据池中去查找这个坐标与哪个图形相交，相交的图形就是被点击到的图形
最后去实现一些交互的效果

其中最关键的是第二步，我们要借助ol.geom.Geometry的intersectsCoordinate()方法来判断位置与图形是否相交。

  // 添加网格的点击交互事件window.map.on("click", handleCellClick);

// 点击交互事件处理函数
function handleCellClick(event) {const coordinate = event.coordinate;let clickedFeature;const { length } = riverMeshFeatures;let index = 0;while (!clickedFeature && index < length) {const feature = riverMeshFeatures[index];const geometry = feature.getGeometry();if (geometry.intersectsCoordinate(coordinate)) {clickedFeature = feature;}index++;}console.log("点击事件", "网格" + index, clickedFeature);
}

方法二使用"影子图层" 进行交互

大致的步骤如下:

创建一个矢量图层，并将所有图形都添加到图层中，同时禁止图层渲染，这个矢量图层就是我们图片图层的“影子图层”。
首先通过地图的点击事件拿到点击位置的坐标
在影子图层的数据源中查询这个坐标与哪个图形相交，相交的图形就是被点击到的图形
最后去实现一些交互的效果

  // 创建矢量图层const riverShadowLayer = getVectorLayer({map: window.map,layerName: "riverLayer_shadow",style: new Style({fill: new Fill({color: "red",}),stroke: new Stroke({color: "black",width: 1,}),}),zIndex: 2,});riverShadowLayer.getSource().addFeatures(riverMeshFeatures);// 禁止矢量图层渲染riverShadowLayer.setVisible(false);window.map.on("click", event => {const pixel = event.pixel;const extent = new Point(window.map.getCoordinateFromPixel(pixel)).getExtent();const features = [];riverShadowLayer.getSource().forEachFeatureIntersectingExtent(extent, feature => {features.push(feature);});if (features.length > 0) {const feature = features[0];const properties = feature.getProperties();}});

三、在后端生成图片实现图片渲染

后端生成图片的这一整套流程我只是做了一定的了解，还没有进行实验测试，所以这里只阐述一个基本的思路，提供一些参考的代码，无法保证代码的准确性。

1.后端如何生成图片？

据我了解Java是有一个叫做GeoTools的库可以进行GIS开发。大致的思路是后端读取图形的数据，绘制成一个图层，然后将图层转为图片，最后将图片提供给前端。

当然具体的实现细节由于我不懂后端开发所以也没有办法给出介绍，我只能提供一个实例代码，有需要的可以参考一下。

import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.google.common.io.Files;
import net.coobird.thumbnailator.Thumbnails;
import org.geotools.data.Base64;
import org.geotools.data.FileDataStore;
import org.geotools.data.FileDataStoreFinder;
import org.geotools.data.shapefile.ShapefileDataStore;
import org.geotools.data.simple.SimpleFeatureCollection;
import org.geotools.data.simple.SimpleFeatureIterator;
import org.geotools.data.simple.SimpleFeatureSource;
import org.geotools.feature.FeatureCollection;
import org.geotools.geometry.jts.JTSFactoryFinder;
import org.geotools.geometry.jts.ReferencedEnvelope;
import org.geotools.map.FeatureLayer;
import org.geotools.map.Layer;
import org.geotools.map.MapContent;
import org.geotools.renderer.GTRenderer;
import org.geotools.renderer.label.LabelCacheImpl;
import org.geotools.renderer.lite.StreamingRenderer;
import org.geotools.styling.*;
import org.geotools.geojson.feature.FeatureJSON;
import org.locationtech.jts.geom.Geometry;
import org.locationtech.jts.geom.GeometryFactory;
import org.opengis.feature.simple.SimpleFeature;import javax.imageio.ImageIO;
import javax.imageio.stream.ImageOutputStream;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.*;
import java.nio.charset.Charset;
import java.util.List;
import java.util.*;public class GeojsonToImageUtils {/*** 获取GeoJSON图片* @param json* @param imagePath* @return* @throws IOException*/public static String getGeojsonBase64(String json,String imagePath) throws IOException {String imgStr=null;try {//String s = removeGeoJsonProperties(json);// String s1 = geojson2img(json, imagePath);//   imgStr = getImgStr(s1);}catch (Exception e){e.printStackTrace();}return "data:image/png;base64,"+imgStr;}/*public void getJsonFilter(JSONObject jsonObject){JSONArray array = new JSONArray();jsonObject.getJSONArray("");}*//*** 生成图片* @param json* @param imgPath* @throws IOException*/public static String geojson2img(String json,String imgPath,String fileName) throws IOException {String caselsh = fileName.substring(0,fileName.lastIndexOf("."));JSONObject j1=JSONObject.parseObject(json);JSONArray array1=j1.getJSONArray("features");/*Set<Integer> s=new HashSet<>();for(int i=0;i<array1.size();i++){JSONObject obj=array1.getJSONObject(i);System.out.println(obj.getJSONObject("properties").getInteger("step"));s.add(obj.getJSONObject("properties").getInteger("step"));}System.out.println(s.size());*/String filename = caselsh+".png";FeatureJSON featureJSON = new FeatureJSON();FeatureCollection features = featureJSON.readFeatureCollection(json);MapContent mapContent = new MapContent();mapContent.setTitle("Quickstart");Style style2 = SysUtil.createDefaultStyle();  //.createDefaultStyleChl(); 产汇流土地利用用的样式Layer layer = new FeatureLayer(features, style2);mapContent.addLayer(layer);//mapContent.addLayers(getStyle1(features,json));File outputFile = new File(imgPath+filename);ImageOutputStream outputImageFile = null;FileOutputStream fileOutputStream = null;try {fileOutputStream = new FileOutputStream(outputFile);outputImageFile = ImageIO.createImageOutputStream(fileOutputStream);//这个宽高需要按照经纬度计算宽高//int w = 1500;//int h =1923;// 计算边界ReferencedEnvelope bounds = features.getBounds();double minX = bounds.getMinX();double minY = bounds.getMinY();double maxX = bounds.getMaxX();double maxY = bounds.getMaxY();// 设置图片的分辨率（每像素代表的经纬度单位）double resolution = 0.001;// 计算图片的宽高int w = (int) Math.ceil((maxX - minX) / resolution);int h = (int) Math.ceil((maxY - minY) / resolution);//2400 * 2;//int h = (int) (w * (768 / 506));//(w * (768 / 506));BufferedImage bufferedImage = new BufferedImage(w, h, BufferedImage.TYPE_INT_ARGB);Graphics2D g2d = bufferedImage.createGraphics();mapContent.getViewport().setMatchingAspectRatio(true);mapContent.getViewport().setScreenArea(new Rectangle(Math.round(w), Math.round(h)));mapContent.getViewport().setBounds(bounds);g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);Rectangle outputArea = new Rectangle(w, h);//Rectangle outputArea = new Rectangle(250, 250);//outputArea.setLocation(70,100);GTRenderer renderer = new StreamingRenderer();LabelCacheImpl labelCache = new LabelCacheImpl();Map<Object, Object> hints = renderer.getRendererHints();if (hints == null) {hints = new HashMap<Object, Object>();}hints.put(StreamingRenderer.LABEL_CACHE_KEY, labelCache);renderer.setRendererHints(hints);renderer.setMapContent(mapContent);renderer.paint(g2d, outputArea, bounds);ImageIO.write(bufferedImage, "png", outputImageFile);//下面这个是用来处理压缩输出图片的//File yasuoTargetFile=new File("C:\\Users\\GuLiXin\\Desktop\\新建文件夹\\压缩后\\lucc\\"+filename);//压缩比例// Thumbnails.of(outputFile).scale(1f).toFile(yasuoTargetFile);System.out.println(filename+"转换完成");if(outputFile.exists()){outputFile.delete();}            //yasuo(imgPath+filename,imgPath+UUID.randomUUID().toString()+".png");} catch (IOException ex) {ex.printStackTrace();} finally {try {if (outputImageFile != null) {outputImageFile.flush();outputImageFile.close();fileOutputStream.flush();fileOutputStream.close();}} catch (IOException e) {// don't care now}}return imgPath+filename;}/*** 生成样式* @param features* @param json* @return*/public static List<Layer> getStyle1(FeatureCollection features, String json) throws IOException {Integer geojsonType = getGeojsonType(json);if (geojsonType == 1){Style point = SLD.createSimpleStyle(features.getSchema(),roundColor());return null;}else if (geojsonType ==2){Style lineStyle = SLD.createLineStyle(roundColor(), 1);return null;}else if(geojsonType == 3){List<Layer> result = new ArrayList<Layer>();JSONObject jsonObject = JSONObject.parseObject(json);JSONArray feature = jsonObject.getJSONArray("features");JSONArray array1 = new JSONArray();JSONArray array2 = new JSONArray();for (int i = 0; i < feature.size(); i++) {JSONObject resultJson = JSONObject.parseObject(feature.get(i).toString());JSONObject properties = resultJson.getJSONObject("properties");Integer id = properties.getInteger("id");if (id > 7000){array1.add(feature.get(i));}else {array2.add(feature.get(i));}}JSONObject j = new JSONObject();//(JSONObject)jsonObject.clone();j.put("features",array1);JSONObject k = new JSONObject();//(JSONObject)jsonObject.clone();k.put("features",array2);FeatureJSON featureJSON = new FeatureJSON();FeatureCollection featureCollection = featureJSON.readFeatureCollection(j.toString());FeatureCollection featureCollection2 = featureJSON.readFeatureCollection(k.toString());Layer layer = new FeatureLayer(featureCollection, SLD.createPolygonStyle(Color.white, roundColor(), 1));Layer layer1 = new FeatureLayer(featureCollection2, SLD.createPolygonStyle(Color.RED, roundColor(), 1));result.add(layer);result.add(layer1);return result;}return null;}/*** 生成样式* @param features* @param json* @return*/public static Style getStyle(FeatureCollection features, String json){Integer geojsonType = getGeojsonType(json);if (geojsonType == 1){Style point = SLD.createSimpleStyle(features.getSchema(),roundColor());return point;}else if (geojsonType ==2){Style lineStyle = SLD.createLineStyle(roundColor(), 1);return lineStyle;}else if(geojsonType == 3){Style polygonStyle = SLD.createPolygonStyle(Color.ORANGE, roundColor(), 1);return polygonStyle;}return null;}/*** 随机颜色* @return*/public static Color roundColor(){Random random = new Random();float hue = random.nextFloat();float saturation = (random.nextInt(2000) + 1000) / 10000f;float luminance = 0.9f;Color color = Color.getHSBColor(hue, saturation, luminance);return color;}/*** 去除properties属性* @param jsonstr* @return*/public static String removeGeoJsonProperties(String jsonstr){JSONObject json = (JSONObject) JSONObject.parse(jsonstr);JSONArray features = (JSONArray) json.get("features");for (int i = 0; i < features.size(); i++) {JSONObject feature = features.getJSONObject(i);feature.remove("properties");}return json.toJSONString();}/*** 获取GeoJSON类型* @param strJson* @return*/public static Integer getGeojsonType(String strJson){JSONObject json = (JSONObject) JSONObject.parse(strJson);JSONArray features = (JSONArray) json.get("features");JSONObject feature0 = features.getJSONObject(0);String strType = ((JSONObject)feature0.get("geometry")).getString("type").toString();Integer geoType = null;if ("Point".equals(strType)) {geoType = 1;} else if ("MultiPoint".equals(strType)) {geoType = 1;} else if ("LineString".equals(strType)) {geoType = 2;} else if ("MultiLineString".equals(strType)) {geoType = 2;} else if ("Polygon".equals(strType)) {geoType = 3;} else if ("MultiPolygon".equals(strType)) {geoType = 3;}return geoType;}/*** 将图片转换成Base64编码* @param imgFile 待处理图片* @return*/public static String getImgStr(String imgFile) {// 将图片文件转化为字节数组字符串，并对其进行Base64编码处理InputStream in = null;byte[] data = null;// 读取图片字节数组try {in = new FileInputStream(imgFile);data = new byte[in.available()];in.read(data);in.close();} catch (IOException e) {e.printStackTrace();}return Base64.encodeBytes(data);//Base64.encodeBase64String(data);}/*** 判断GeoJSON格式是否正确* @param strJson* @return*/public static boolean checkGeojson(String strJson){Boolean flag = true;JSONObject json = (JSONObject) JSONObject.parse(strJson);if(!json.containsKey("features")){return false;}JSONArray features = (JSONArray) json.get("features");for (int i = 0; i < features.size(); i++) {JSONObject feature = features.getJSONObject(i);if (!feature.containsKey("geometry")){flag = false;break;}JSONObject geometry = (JSONObject)feature.get("geometry");if (!geometry.containsKey("type")){flag = false;break;}if (!geometry.containsKey("coordinates")){flag = false;break;}}return flag;}/*** 生成多边形* @param json* @param imgPath* @throws IOException*/public static String geojson3img(String json, String imgPath, String step, List<Layer> layerList, ReferencedEnvelope bounds) throws IOException {String filename = UUID.randomUUID().toString()+"-"+step+".png";//FeatureJSON featureJSON = new FeatureJSON();//FeatureCollection features = featureJSON.readFeatureCollection(json);MapContent mapContent = new MapContent();mapContent.setTitle("Quickstart");mapContent.addLayers(layerList);File outputFile = new File(imgPath+filename);ImageOutputStream outputImageFile = null;FileOutputStream fileOutputStream = null;try {fileOutputStream = new FileOutputStream(outputFile);outputImageFile = ImageIO.createImageOutputStream(fileOutputStream);//int w = 384;int w = 9960;//ReferencedEnvelope bounds = features.getBounds();int h = 4800;//int h = (int) (w * (768 / 506));//(w * (768 / 506));BufferedImage bufferedImage = new BufferedImage(w, h, BufferedImage.TYPE_INT_ARGB);Graphics2D g2d = bufferedImage.createGraphics();mapContent.getViewport().setMatchingAspectRatio(true);mapContent.getViewport().setScreenArea(new Rectangle(Math.round(w), Math.round(h)));mapContent.getViewport().setBounds(bounds);g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);Rectangle outputArea = new Rectangle(9960, 4800);//Rectangle outputArea = new Rectangle(250, 250);//outputArea.setLocation(70,100);GTRenderer renderer = new StreamingRenderer();LabelCacheImpl labelCache = new LabelCacheImpl();Map<Object, Object> hints = renderer.getRendererHints();if (hints == null) {hints = new HashMap<Object, Object>();}hints.put(StreamingRenderer.LABEL_CACHE_KEY, labelCache);renderer.setRendererHints(hints);renderer.setMapContent(mapContent);renderer.paint(g2d, outputArea, bounds);ImageIO.write(bufferedImage, "png", outputImageFile);} catch (IOException ex) {ex.printStackTrace();} finally {try {if (outputImageFile != null) {outputImageFile.flush();outputImageFile.close();fileOutputStream.flush();fileOutputStream.close();mapContent.dispose();}} catch (IOException e) {// don't care now}}return imgPath+filename;}/*** 获取指定文件夹下所有文件，不含文件夹里的文件** @param dirFile 文件夹* @return*/public static List<File> getAllFile(File dirFile) {// 如果文件夹不存在或着不是文件夹，则返回 nullif (Objects.isNull(dirFile) || !dirFile.exists() || dirFile.isFile())return null;File[] childrenFiles = dirFile.listFiles();if (Objects.isNull(childrenFiles) || childrenFiles.length == 0)return null;List<File> files = new ArrayList<>();for (File childFile : childrenFiles) {// 如果是文件，直接添加到结果集合if (childFile.isFile()) {files.add(childFile);}}return files;}public static String shape2Geojson(String shpPath) {StringBuffer sb = new StringBuffer();sb.append("{\"type\":\"FeatureCollection\", \"features\": ");FeatureJSON fJson = new FeatureJSON();File file = new File(shpPath);JSONArray array = new JSONArray();JSONObject json = new JSONObject();try {ShapefileDataStore store = new ShapefileDataStore(file.toURI().toURL());//设置编码((ShapefileDataStore) store).setCharset(Charset.forName("ISO-8859-1"));//store.setCharset(Charset.forName("UTF-8"));//文件名称String typeName = store.getTypeNames()[0];SimpleFeatureSource featureSource = store.getFeatureSource(typeName);SimpleFeatureIterator iterator = featureSource.getFeatures().features();while (iterator.hasNext()) {SimpleFeature feature = iterator.next();StringWriter writer = new StringWriter();fJson.writeFeature(feature, writer);json = JSONObject.parseObject(writer.toString());//使用jsonArray可以把所有数据转成一条；不使用，array.add(json);}iterator.close();sb.append(array.toJSONString());sb.append("}");} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}WriteStringToFile(sb.toString(),"C:\\Users\\GuLiXin\\Desktop\\bhp\\lucc.json");return sb.toString();}public static void WriteStringToFile(String string,String jsonPath) {String filePath = jsonPath;try {File file = new File(filePath);PrintStream ps = new PrintStream(new FileOutputStream(file));ps.append(string);} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}}public static void main(String[] args) throws Exception {// String geojson = JsonFileUtil.readJsonFile("E:\\data-2\\step1.json");//查询//存入map筛选//String geojsonBase64 = geojson2img(geojson, "C:\\Users\\GuLiXin\\Desktop\\新建文件夹\\");File f=new File("E:\\data-50");List<File> fileList=getAllFile(f);;for (File file:fileList){String geojson = JsonFileUtil.readJsonFile(file.getPath());geojson2img(geojson, "C:\\Users\\GuLiXin\\Desktop\\新建文件夹\\",file.getName());}// File f=new File("C:\\Users\\GuLiXin\\Desktop\\bhp\\土地利用_2005.shp");// FileDataStore dataStore=FileDataStoreFinder.getDataStore(f);// String geoJson=shape2Geojson("C:\\Users\\GuLiXin\\Desktop\\bhp\\土地利用_2005.shp");//System.out.println(geoJson);//File file=new File("C:\\Users\\GuLiXin\\Desktop\\data\\lucc.json");//String geojson = JsonFileUtil.readJsonFile(file.getPath());//  geojson2img(geoJson, "C:\\Users\\GuLiXin\\Desktop\\bhp",f.getName());/*String shpPath = "";//shp文件地址String geojsonPath = "";//生成的GeoJSON文件地址String iamgepath="";String geojson = ParsingShpFileUtils.shape2Geojson(shpPath, geojsonPath);String geojsonBase64 = getGeojsonBase64(geojson, iamgepath);//base64 一般存库里*/}}

2.前端如何加载图片？

前端在拿到后端生成的图片后，通过ImageLaeyr图层 + ImageStatic数据源就可以实现加载。

使用方式可以参考这个Openlayers示例：Image Reprojection

参考资料

Openlayers海量矢量面渲染优化_openlayers渲染海量数据-CSDN博客
OpenLayers v10.5.0 API - Class: ImageCanvasSource
Image Reprojection