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

Carlos_sam2025-04-05 19:38

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

一、什么是图片渲染？

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

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

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

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

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

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

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

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

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

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

JavaScript 复制代码 
// 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() 方法进行拓扑查询

大致的步骤如下：

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

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

JavaScript 复制代码 
  // 添加网格的点击交互事件
  window.map.on("click", handleCellClick);
JavaScript 复制代码 
// 点击交互事件处理函数
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);
}

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

大致的步骤如下:

  1. 创建一个矢量图层，并将所有图形都添加到图层中，同时禁止图层渲染，这个矢量图层就是我们图片图层的"影子图层"。
  2. 首先通过地图的点击事件拿到点击位置的坐标
  3. 在影子图层的数据源中查询这个坐标与哪个图形相交，相交的图形就是被点击到的图形
  4. 最后去实现一些交互的效果
JavaScript 复制代码 
  // 创建矢量图层
  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开发。大致的思路是后端读取图形的数据，绘制成一个图层，然后将图层转为图片，最后将图片提供给前端。

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

Java 复制代码 
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) {
        // 如果文件夹不存在或着不是文件夹，则返回 null
        if (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 block
            e.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 block
            e.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

参考资料

  1. Openlayers海量矢量面渲染优化_openlayers渲染海量数据-CSDN博客
  2. OpenLayers v10.5.0 API - Class: ImageCanvasSource
  3. Image Reprojection
相关推荐
lh_12542 分钟前
ECharts 地图开发入门
前端·javascript·echarts
jjw_zyfx4 分钟前
成熟的前端vue vite websocket,Django后端实现方案包含主动断开websocket连接的实现
前端·vue.js·websocket
Mikey_n40 分钟前
前台调用接口的方式及速率对比
前端
周之鸥1 小时前
使用 Electron 打包可执行文件和资源：完整实战教程
前端·javascript·electron
我爱吃朱肉1 小时前
HTMLCSS模板实现水滴动画效果
前端·css·css3
机器视觉知识推荐、就业指导1 小时前
开源QML控件:进度条滑动控件（含源码下载链接）
前端·qt·开源·qml
前端snow1 小时前
前端全栈第二课：用typeorm向数据库添加数据---一对多关系
前端·javascript
難釋懷1 小时前
Shell脚本-for循环语法结构
前端·chrome
全栈老李技术面试1 小时前
【高频考点精讲】async/await原理剖析：Generator和Promise的完美结合
前端·javascript·css·vue·html·react·面试题
kadog1 小时前
PubMed PDF下载 cloudpmc-viewer-pow逆向
前端·javascript·人工智能·爬虫·pdf
热门推荐
01KGG转MP3工具|非KGM文件|解密音频02从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑03我决定放弃搞 Java 了04Coze扣子平台完整体验和实践（附国内和国际版对比）05YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】06DeepSeek各版本说明与优缺点分析07yolov8，yolo11，yolo12 服务器训练到部署全流程 笔记08苍穹外卖面试总结09如何在WPS和Word/Excel中直接使用DeepSeek功能10YOLOv5改进 | 添加CA注意力机制 + 增加预测层 + 更换损失函数之GIoU