基于实时矢量切片的要素绘制Demo

最新推荐文章于 2024-08-25 20:36:48 发布
最新推荐文章于 2024-08-25 20:36:48 发布
阅读量4.8k 收藏 12
点赞数 1
分类专栏： GIS 文章标签： GIS SpringBoot 矢量切片 Openlayers
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/polixiaohai/article/details/85240127
版权

文章基于我拆自Geoserver的矢量切片插件中的代码做的一个封装：https://github.com/polixiaohai/mvn-repository。其中有两个比较成熟的封装，有需要的朋友可以自行使用。

maven中仓库配置：

<repository>
    <id>maven-repo-master</id>
    <url>https://raw.github.com/polixiaohai/mvn-repository/master/</url>
</repository>

 包POM：

<!--一个实体转geojson的包-->
<dependency>
    <groupId>com.walkgis.utils</groupId>
    <artifactId>common-geojson</artifactId>
    <version>2.2.0-RELEASE</version>
</dependency>

<!--实体转矢量切片的包-->

<dependency>
    <groupId>com.walkgis.utils</groupId>
    <artifactId>common-gs-vectortile</artifactId>
    <version>2.2.0-RELEASE</version>
</dependency>

工程使用的是SpringBoot，ORM框架使用的是国产ibeetlSQL，如果不喜欢可以自行使用其他的，其他的废话不多说，上代码：

POM文件：

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.1.1.RELEASE</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<groupId>cn.com.walkgis.microdraw</groupId>
	<artifactId>walkgis-draw</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>walkgis-draw</name>
	<description>Demo project for Spring Boot</description>

	<properties>
		<java.version>1.8</java.version>
	</properties>

	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-jdbc</artifactId>
		</dependency>

		<dependency>
			<groupId>com.ibeetl</groupId>
			<artifactId>beetlsql</artifactId>
			<version>2.10.40</version>
		</dependency>

		<dependency>
			<groupId>com.walkgis.utils</groupId>
			<artifactId>common-gs-vectortile</artifactId>
			<version>2.2.0-RELEASE</version>
		</dependency>

		<dependency>
			<groupId>com.walkgis.utils</groupId>
			<artifactId>common-geojson</artifactId>
			<version>2.2.0-RELEASE</version>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-devtools</artifactId>
			<scope>runtime</scope>
		</dependency>
		<dependency>
			<groupId>org.postgresql</groupId>
			<artifactId>postgresql</artifactId>
			<version>42.2.4</version>
		</dependency>
		<dependency>
			<groupId>org.projectlombok</groupId>
			<artifactId>lombok</artifactId>
			<optional>true</optional>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>

</project>

表结构（使用的PG数据库）如下：

    create table if not exists public.t_poi
    (
      id serial not null		constraint t_area_pkey	primary key,
      name varchar(100) not null,
      type integer not null
    );
    select addGeometryColumn('public','t_poi','shape',4326,'Point',2);

    create table if not exists public.t_river
    (
      id serial not null		constraint t_river_pkey	primary key,
      name varchar(100) not null,
      type integer not null
    );
    select addGeometryColumn('public','t_river','shape',4326,'LineString',2);

  create table if not exists public.t_build
  (
    id serial not null		constraint t_build_pkey	primary key,
    name varchar(100) not null,
    type integer not null
  );
  select addGeometryColumn('public','t_build','shape',4326,'Polygon',2);

其中数据源配置和本地测试的时候，SpringBoot跨域设置就不贴出代码来了，可以自行百度。

实体贴出一个来：

public class TBuild implements GeoEntity<Integer> {

    private Integer id;
    private Integer type;
    private String name;
    private Object shape;

    public TBuild() {
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public Integer getType() {
        return type;
    }

    public void setType(Integer type) {
        this.type = type;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Object getShape() {
        return shape;
    }

    public void setShape(Object shape) {
        this.shape = shape;
    }


}

实体保存的Controller，其他实体保存的Controller可以对照进行实现：

@Controller
@RequestMapping(value = "build")
public class BuildController extends GeoJsonServicesImpl<TBuild, Integer> {
    @Autowired
    @Qualifier("sqlManagerFactoryBeanGIS")
    private SQLManager sqlManagerGIS;

    @RequestMapping(value = "save")
    @ResponseBody
    public Integer save(@RequestParam("feature") String feature) {
        ObjectMapper mapper = new ObjectMapper();
        try {
            Feature fea = mapper.readValue(feature, Feature.class);
            TBuild build = new TBuild();
            BeanUtils.populate(build, fea.getProperties());
            Geometry geometry = geometryConvert.geometryDeserialize(fea.getGeometry());
            if (geometry != null) {
                PGobject pGobject = new PGobject();
                pGobject.setType("Geometry");
                geometry.setSRID(4326);
                pGobject.setValue(WKBWriter.toHex(new WKBWriter(2, true).write(geometry)));
                build.setShape(pGobject);
            }
           return sqlManagerGIS.insert(TBuild.class, build);
        } catch (IOException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        } catch (Exception e) {
            e.printStackTrace();
        }

        return -1;
    }

}

生成矢量切片的Controller，其中有部分对文件做的防止多线程同时操作而作的锁处理，以及利用Java中fork/join来并行下载切片的：

@Controller
@RequestMapping(value = "vectortile")
public class VectorTileControllerImpl extends VectorTileController {
    @Value("${cache.vector-tile-geoserver-path}")
    public String cachePath;

    @Value("${region.split}")
    public String regionSplit;
    @Value("${cache.maxz}")
    private Integer tmaxz;
    @Value("${cache.minz}")
    private Integer tminz;

    public static Map<Integer, Long> info = new ConcurrentHashMap<>();// 总数 原子操作
    public static AtomicInteger successCount = new AtomicInteger();// 总数 原子操作
    public static AtomicInteger zoom = new AtomicInteger();// 总数 原子操作

    private static final ForkJoinPool pool = new ForkJoinPool();

    @Autowired
    @Qualifier("sqlManagerFactoryBeanGIS")
    private SQLManager sqlManagerGIS;

    /**
     * 进来的是XYZ scheme
     *
     * @param layerName
     * @param x
     * @param y
     * @param z
     * @return
     */
    @RequestMapping(value = "vt/{z}/{x}/{y}.mvt", produces = MediaType.APPLICATION_OCTET_STREAM_VALUE)
    public ResponseEntity<InputStreamResource> generateVectorTiles(
            @RequestParam(value = "layerName", defaultValue = "vtdemo") String layerName,
            @RequestParam(value = "CRS") String crs,
            @PathVariable("x") Integer x,
            @PathVariable("y") Integer y,
            @PathVariable("z") Integer z
    ) throws Exception {
        ReadWriteLock lock = new ReentrantReadWriteLock();

        final Lock readLock = lock.readLock();
        final Lock writeLock = lock.writeLock();

        File file = new File(cachePath + File.separator + layerName + File.separator + z + File.separator + x + File.separator + String.format("%d.%s", y, "mvt"));
        if (!file.exists()) {
            //#region 下载内容
            double[] bboxs = new double[]{0, 0, 0, 0};
            if (crs.equalsIgnoreCase("EPSG:4326"))
                bboxs = new GlobalGeodetic("", 256).tileLatLonBounds(x, y, z);
            else if (crs.equalsIgnoreCase("EPSG:3857"))
                bboxs = new GlobalMercator(256).tileLatLonBounds(x, y, z);
            else throw new Exception("不支持的地理坐标系");

            Map<String, List> entityMap = new ConcurrentHashMap<>();
            String sql = "SELECT t.* FROM t_build t  WHERE ST_Intersects (st_setsrid(t.shape,4326),ST_MakeEnvelope(" + bboxs[1] + "," + bboxs[0] + "," + bboxs[3] + "," + bboxs[2] + ",4326))";
            List<TBuild> entityList = sqlManagerGIS.execute(new SQLReady(sql), TBuild.class);
            if (entityList.size() > 0) entityMap.put("t_build", entityList);

            sql = "SELECT t.* FROM t_river t  WHERE ST_Intersects (st_setsrid(t.shape,4326),ST_MakeEnvelope(" + bboxs[1] + "," + bboxs[0] + "," + bboxs[3] + "," + bboxs[2] + ",4326))";
            List<TRiver> tRiverList = sqlManagerGIS.execute(new SQLReady(sql), TRiver.class);
            if (tRiverList.size() > 0) entityMap.put("t_river", tRiverList);

            sql = "SELECT t.* FROM t_poi t  WHERE ST_Intersects (st_setsrid(t.shape,4326),ST_MakeEnvelope(" + bboxs[1] + "," + bboxs[0] + "," + bboxs[3] + "," + bboxs[2] + ",4326))";
            List<TPoi> tPois = sqlManagerGIS.execute(new SQLReady(sql), TPoi.class);
            if (tPois.size() > 0) entityMap.put("t_poi", tPois);

            try {
                if (entityMap.size() <= 0)
                    return downloadFile(readLock, file);

                byte[] res = produceMap(entityMap, bboxs);
                if (res == null || res.length <= 0)
                    return downloadFile(readLock, file);

                try {
                    writeLock.lock();
                    if (!file.getParentFile().exists()) file.getParentFile().mkdirs();
                    FileOutputStream fos = new FileOutputStream(file);
                    fos.write(res, 0, res.length);
                    fos.flush();
                    fos.close();
                    System.out.println("增加：" + file.getAbsolutePath());
                } finally {
                    writeLock.unlock();
                }


            } catch (Exception ex) {
                ex.printStackTrace();
            }
            return downloadFile(readLock, file);
            //endregion
        } else {
            return downloadFile(readLock, file);
        }
    }

    @RequestMapping(value = "buildCache/{layerName}")
    @ResponseBody
    public void buildCach(@PathVariable("layerName") String layerName,
                          @RequestParam(value = "CRS") String crs,
                          @RequestParam(value = "extent", required = false) String extent) {
        String[] str = extent.split(",");
        if (str.length == 4) {
            Double xmin = Double.parseDouble(str[0]);
            Double ymin = Double.parseDouble(str[1]);
            Double xmax = Double.parseDouble(str[2]);
            Double ymax = Double.parseDouble(str[3]);
            Envelope envelope = new Envelope(xmin, xmax, ymin, ymax);
            GlobalMercator mercator = new GlobalMercator(256);
            double[] min = mercator.latLonToMeters(envelope.getMinY(), envelope.getMinX());
            double[] max = mercator.latLonToMeters(envelope.getMaxY(), envelope.getMaxX());

            //#region 计算
            for (int tz = tmaxz; tz > tminz - 1; tz--) {
                int[] tminxy = mercator.metersToTile(min[0], min[1], tz);
                int[] tmaxxy = mercator.metersToTile(max[0], max[1], tz);
                tminxy = new int[]{Math.max(0, tminxy[0]), Math.max(0, tminxy[1])};
                tmaxxy = new int[]{(int) Math.min(Math.pow(2, tz) - 1, tmaxxy[0]), (int) Math.min(Math.pow(2, tz) - 1, tmaxxy[1])};
                info.put(tz, (long) ((tmaxxy[1] - (tminxy[1] - 1)) * (tmaxxy[0] + 1 - tminxy[0])));
                for (int tx = tminxy[0]; tx < tmaxxy[0] + 1; tx++) {
                    pool.execute(new DownloadTask(layerName, crs, tz, tminxy[1], tmaxxy[1], tx));
                }
            }
            //endregion
        }
    }

    @RequestMapping(value = "clearCache/{layerName}", method = RequestMethod.GET)
    @ResponseBody
    public Integer clearCache(@PathVariable("layerName") String layerName,
                              @RequestParam(value = "CRS") String crs,
                              @RequestParam(value = "extent", required = false) String extent) throws Exception {
        if (null == extent) {
            String filePath = cachePath + File.separator + layerName;
            if (new File(filePath).exists()) {
                new Thread(() -> FileUtils.delFolder(filePath)).start();
            }
        } else {
            String[] str = extent.split(",");
            if (str.length == 4) {
                Envelope envelope = new Envelope(Double.parseDouble(str[0]), Double.parseDouble(str[2]), Double.parseDouble(str[1]), Double.parseDouble(str[3]));

                double[] min = new double[0], max = new double[0];
                GlobalMercator mercator = null;
                GlobalGeodetic geodetic = null;

                if (crs.equalsIgnoreCase("EPSG:4326")) {
                    geodetic = new GlobalGeodetic("", 256);
                } else if (crs.equalsIgnoreCase("EPSG:3857")) {
                    mercator = new GlobalMercator(256);
                    min = mercator.latLonToMeters(envelope.getMinY(), envelope.getMinX());
                    max = mercator.latLonToMeters(envelope.getMaxY(), envelope.getMaxX());
                } else throw new Exception("不支持的地理坐标系");


                //#region 计算
                for (int tz = tmaxz; tz > tminz - 1; tz--) {
                    int[] tminxy = new int[0], tmaxxy = new int[0];
                    if ((crs.equalsIgnoreCase("EPSG:3857"))) {
                        tminxy = mercator.metersToTile(min[0], min[1], tz);
                        tmaxxy = mercator.metersToTile(max[0], max[1], tz);
                    } else if (crs.equalsIgnoreCase("EPSG:4326")) {
                        tminxy = geodetic.lonlatToTile(envelope.getMinX(), envelope.getMinY(), tz);
                        tmaxxy = geodetic.lonlatToTile(envelope.getMaxX(), envelope.getMaxY(), tz);
                    }

                    tminxy = new int[]{Math.max(0, tminxy[0]), Math.max(0, tminxy[1])};
                    tmaxxy = new int[]{(int) Math.min(Math.pow(2, tz) - 1, tmaxxy[0]), (int) Math.min(Math.pow(2, tz) - 1, tmaxxy[1])};

                    for (int tx = tminxy[0]; tx < tmaxxy[0] + 1; tx++) {
                        for (int ty = tmaxxy[1]; ty > tminxy[1] - 1; ty--) {

                            File file = new File(cachePath + File.separator + layerName + File.separator + tz + File.separator + tx + File.separator + ty + ".mvt");
                            if (file.exists())
                                file.delete();
                            System.out.println("删除：" + file.getAbsolutePath());
                        }
                    }
                }
                return 1;
                //endregion
            }
        }
        return -1;
    }

    public ResponseEntity<InputStreamResource> downloadFile(Lock readLock, File filePath) {
        if (filePath.exists()) {
            try {
                readLock.lock();
                FileSystemResource file = new FileSystemResource(filePath);

                return ResponseEntity.ok().contentLength(file.contentLength())
                        .contentType(MediaType.parseMediaType(MediaType.APPLICATION_OCTET_STREAM_VALUE))
                        .body(new InputStreamResource(file.getInputStream()));
            } catch (IOException e) {
                return ResponseEntity.noContent().build();
            } finally {
                readLock.unlock();
            }
        } else {
            return ResponseEntity.noContent().build();
        }
    }

    private class DownloadTask extends RecursiveTask<Void> {
        private static final long serialVersionUID = 1L;

        private static final int THRESHOLD = 1000;
        private String layerName;
        private String crs;
        private int tz;
        private int start;
        private int end;
        private int tx;

        public DownloadTask(String layerName, String crs, int tz, int start, int end, int tx) {
            this.layerName = layerName;
            this.crs = crs;
            this.tz = tz;
            this.start = start;
            this.end = end;
            this.tx = tx;
        }

        @Override
        protected Void compute() {
            if (end - (start - 1) <= THRESHOLD) {
                for (int ty = end; ty > start - 1; ty--) {
                    try {
                        generateVectorTiles(layerName, crs, tx, ty, tz);
                    } catch (Exception e) {
                        e.printStackTrace();
                    }
                    successCount.getAndIncrement();
                    zoom = new AtomicInteger(tz);
                }
            }
            int m = (start - 1) + (end - (start - 1)) / 2;
            DownloadTask task1 = new DownloadTask(layerName, crs, tz, start, m, tx);
            DownloadTask task2 = new DownloadTask(layerName, crs, tz, m, end, tx);
            invokeAll(task1, task2);
            return null;
        }
    }
}

SpringBoot（application-local.yml，这里还需要配置一个application.yml指定那个profile为active的）配置文件部分 ：

server:
  port: 8084
  tomcat:
    uri-encoding: UTF-8
  servlet:
    context-path: /${spring.application.name}
spring:
  profiles: local
  datasource:
    gis:
      url: jdbc:postgresql://localhost:5432/gis
      username: postgres
      password: postgres
      driver-class-name: org.postgresql.Driver
      sql-script-encoding: utf-8
      type: com.zaxxer.hikari.HikariDataSource
      hikari:
        connection-timeout: 30000
        idle-timeout: 60000
        max-lifetime: 1800000
        maximum-pool-size: 60
        minimum-idle: 0
  application:
    name: walkgis-draw

beetlsql:
  ds:
    gis:
      sqlPath: /sql
      basePackage: cn.com.walkgis.microdraw.walkgisdraw.dao
      nameConversion: org.beetl.sql.core.UnderlinedNameConversion
      daoSuffix: Dao
      dbStyle: org.beetl.sql.core.db.PostgresStyle
  mutiple:
    datasource: gis
beetl-beetlsql: dev=false


# 存放缓存文件的地址
cache:
  vector-tile-geoserver-path: E:\Data\tiles\vt-geoserver
  maxz: 18
  minz: 1

前端调用页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--bootstrap-->
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!--jqueryUI-->
    <link href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.theme.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.theme.min.css" rel="stylesheet">
    <!--openlayers-->
    <link href="https://cdn.bootcss.com/openlayers/4.6.5/ol-debug.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>

    <script src="https://cdn.bootcss.com/openlayers/4.6.5/ol-debug.js"></script>
    <style>
        html, body {
            width: 100%;
            height: 100%;
        }

        #map {
            width: 100%;
            height: 100%;
            border: 1px solid red;
        }

        #tools {
            position: fixed;
            left: 20px;
            top: 40px;
            z-index: 99999;
            background: #fff;
        }

        #tools select {
            width: 150px;
        }
    </style>
</head>
<body>
<div id="tools">
    <select name="typeSelect" id="typeSelect">
        <option value="Point" data="poi" selected="selected">t_poi</option>
        <option value="LineString" data="river">t_river</option>
        <option value="Polygon" data="build">t_build</option>
    </select>
</div>
<div id="map"></div>
<div id="dialog" title="保存对话框">
    <form>
        <div class="form-group">
            <label for="inputName">名称：</label>
            <input type="email" class="form-control" name="name" id="inputName" placeholder="名称">
        </div>
        <div class="form-group">
            <label for="selectType">类型：</label>
            <select class="form-control" name="type" id="selectType" placeholder="类型">
                <option value="1" selected="selected">点</option>
                <option value="2">线</option>
                <option value="3">面</option>
            </select>
        </div>
    </form>
</div>
<script type="text/javascript">
    $(function () {
        var map, draw, snap, baseLayer, baseSource, tempLayer;

        baseSource = new ol.source.VectorTile({
            format: new ol.format.MVT(),
            url: 'http://localhost:8084/walkgis-draw/vectortile/vt/{z}/{x}/{-y}.mvt?CRS=EPSG:4326',
            projection: "EPSG:4326",
            extent: ol.proj.get("EPSG:4326").getExtent(),
            tileSize: 256,
            maxZoom: 21,
            minZoom: 0,
            wrapX: true
        });
        baseLayer = new ol.layer.VectorTile({
            renderMode: "image",
            preload: 12,
            source: baseSource,
            style: new ol.style.Style({
                fill: new ol.style.Fill({
                    color: 'rgba(255, 0, 0, 0.2)'
                }),
                stroke: new ol.style.Stroke({
                    color: '#ff0000',
                    width: 2
                }),
                image: new ol.style.Circle({
                    radius: 7,
                    fill: new ol.style.Fill({
                        color: '#ff0000'
                    })
                })
            })
        })
        tempLayer = new ol.layer.Vector({
            source: new ol.source.Vector()
        })

        function addInteractions() {
            draw = new ol.interaction.Draw({
                source: tempLayer.getSource(),
                type: typeSelect.value,
                style: new ol.style.Style({
                    fill: new ol.style.Fill({
                        color: 'rgba(255, 255, 255, 0.2)'
                    }),
                    stroke: new ol.style.Stroke({
                        color: '#ffcc33',
                        width: 2
                    }),
                    image: new ol.style.Circle({
                        radius: 7,
                        fill: new ol.style.Fill({
                            color: '#ffcc33'
                        })
                    })
                })
            });
            draw.on('drawend', function (target) {
                $("#dialog").dialog({
                    title: '保存对话框',
                    dialogClass: "no-close",
                    width: 600,
                    height: 300,
                    modal: true,
                    buttons: {
                        '确  定': function () {
                            tempLayer.getSource().clear();
                            var attrs = $(this).find('form').serializeArray();
                            $(this).find('form')[0].reset();
                            attrs.forEach(function (item) {
                                target.feature.set(item.name, item.value);
                            })

                            var route = $("#typeSelect option:selected").attr("data")
                            $.ajax({
                                url: 'http://localhost:8084/walkgis-draw/' + route + "/save",
                                type: "GET",
                                data: {
                                    feature: new ol.format.GeoJSON().writeFeature(target.feature)
                                }
                            }).done(function (re) {
                                if (re > 0) {
                                    var extent = target.feature.getGeometry().getExtent().join(',')
                                    $.ajax({
                                        url: 'http://localhost:8084/walkgis-draw/vectortile/clearCache/vtdemo?CRS=EPSG:4326',
                                        type: "GET",
                                        data: {
                                            extent: extent
                                        }
                                    }).done(function (re) {
                                        baseLayer.getSource().clear();
                                        baseLayer.getSource().dispatchEvent("change");
                                    })
                                }
                            })
                            $(this).dialog('destroy');
                        },
                        '取  消': function () {
                            tempLayer.getSource().clear();
                            $(this).dialog('destroy');
                        }
                    }
                });
            })
            snap = new ol.interaction.Snap({
                source: tempLayer.getSource()
            });

            map.addInteraction(draw);
            map.addInteraction(snap);
        }

        $("#typeSelect").change(function () {
            map.removeInteraction(draw);
            map.removeInteraction(snap);
            addInteractions();
        });

        map = new ol.Map({
            target: "map",
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM(),
                    projection: "EPSG:4326"
                }),
                baseLayer,
                new ol.layer.Tile({
                    source: new ol.source.TileDebug({
                        projection: "EPSG:4326",
                        tileGrid: ol.tilegrid.createXYZ({
                            tileSize: [256, 256],
                            minZoom: 0,
                            maxZoom: 18,
                            extent: ol.proj.get("EPSG:4326").getExtent()
                        }),
                        wrapX: true
                    }),
                    projection: 'EPSG:4326'
                }),
                tempLayer
            ],
            view: new ol.View({
                center: [100, 25],
                projection: "EPSG:4326",
                zoom: 10
            }),
            projection: "EPSG:4326",
        })

        addInteractions();
    })

</script>
</body>
</html>

效果如下：矢量切片1

矢量切片
矢量切片
矢量切片2
矢量切片

工程下载地址：https://download.csdn.net/download/polixiaohai/10873787

JerFer
关注
专栏目录
PostGIS-实时地理数据切片与处理
孙霸天的专栏
08-05 966
PostGIS 实现了高效的实时地理数据切片与处理，针对海量矢量数据，提供快速数据定位、抽稀与要素简化等解决方案。通过单机部署，如 PostgreSQL-12+PostGIS-3.0，或集群环境，如 Postgres-XL 和 Citus，能够应对复杂数据处理需求。然而，实时地理数据处理并非仅限于空间分析，还可用于海量数据统计。传统的 `count` 方法效率较低，而基于 PostgreSQL 的高效统计方案，如基于查询执行计划的估算，有望极大提升统计效率。这些技术为地理信息领域的数据处理和分析提供了更加灵
矢量切片例子
11-21
webgis leaflet例子 矢量切片的例子 小比例尺聚合显示，大比例用矢量切片
PostGIS-Dynamic-Vector-Tile:Node + PostGIS 动态矢量切片服务（Node + PostGIS dynamic vector tile service）
05-09
PostGIS-Dynamic-Vector-Tile Node + PostGIS 动态矢量切片服务 | Node + PostGIS dynamic vector tile service 基于 Node + PostGIS 实现地图数据的动态矢量切片服务。 项目目录结构如下： |-- bin |-- www |-- model |-- pgConfig.js // 数据库配置文件 |-- spatial.js // 矢量切片业务逻辑 |-- public |-- images |-- javascripts |-- stylesheets |-- routes |-- index.js // 路由 |-- views |-- error.pug |-- index.pug |-- layout.pug |
cesium加载矢量切片数据（mvt）全网方案总结
最新发布
weixin_43336525的博客
08-25 975
Cesium加载矢量切片数据（mvt）方案
geojson-vt:在浏览器中即时将GeoJSON切片为矢量切片
03-31
geojson-vt — GeoJSON矢量切片 一个高效JavaScript库，用于将GeoJSON数据实时切片为矢量切片，主要用于在浏览器端（无需服务器）启用渲染并与大型地理空间数据集进行交互。 旨在在中GeoJSON的，但在其他可视化平台（例如 ， 和 ）以及Node.js服务器应用程序中也很有用。 生成的图块符合的JSON等效项。 为了使数据渲染和交互快速进行，简化了图块，并保留了适合每个缩放级别的最小细节级别（简化形状，滤除微小的多边形和折线）。 阅读有关该库如何工作。 有一个C ++ 11端口： 演示版 这是Mapbox 的geojson-vt操作，可动态加载540万点的100Mb美国邮政编码GeoJSON： 有一个方便的可以测试不同数据上的geojson-vt 。 只需拖动页面上的任何GeoJSON，观察控制台即可。 用法 // build an initial
快速将矢量切片技术应用在项目中
小刘的博客
03-15 1100
快速将矢量切片技术应用在项目中 前言 矢量切片技术已经比较久的时间了，目前使用比较多的格式为MVT（Mapbox Vector Tile）。 为什么好多公司还没有使用矢量切片 我做矢量切片相关技术已经将近四年左右时间了，之前也有一些加我好友交流矢量切片技术的人员，总结发现以下几个难点阻碍了使用矢量切片技术的道路： 不知道矢量切片该使用什么工具进行切片 知道矢量切片好处比较多，但是整个矢量切片的技术流程还不是很清楚，没办法应用于项目中 没有相应的配图平台，对于配图工作没办法进行（大部分人的难点）
地图绘制边界。高德。PPMAP。 鼠标点击经纬度坐标 。地图图标点点击弹窗窗口。地图图标点点击事件。
韩梦飞沙_韩亚飞
06-05 1427
边界： == 第一种：绘制边界。 通过绘制多边形的API来绘制边界。 高德API：多边形Polygon。 矢量图形-覆盖物-教程-地图 JS API | 高德地图API 将关键的边界轮廓 经纬度坐标点 填入数组，即可生成。 == 第二种，地图自带的边界。 https://lbs.amap.com/api/javascript-api/example/district-searc...
柱状图、饼图、曲线图demo
04-13
Echarts基于矢量图形，使得图表放大不失真，同时提供良好的API和配置项，便于开发者定制图表样式和行为。 5. **数据可视化最佳实践**：无论使用哪种图表，都应遵循一定的设计原则，比如合理选择图表类型，确保易于...
IOS可点击饼状图绘制
10-23
饼状图由多个扇形（或称为切片）组成，每个扇形代表数据集中的一部分。扇形的角度与该部分在整个数据集中的占比成正比。因此，计算点击位置属于哪个扇形，就需要将屏幕坐标转换为饼图的极坐标系统。 1. **设置饼状...
html5 拓扑图 切片,HTML5复杂拓扑图（四） 组织结构图
weixin_33608403的博客
06-22 440
TWaver 阅读(5040) 评论(1) 编辑 收藏应广大客户所需，今天给大家带来一款组织结构图。组织结构图的呈现方式多种多样，用途也是非常广泛，可以应用于集团内部，企业各部门之间的组织关系呈现。我们就来看看twaver实现出来的效果。上下布局：圆形布局：这些布局用twaver来实现是非常的合适，实现起来也是很容易，twaver内部就提供了多种布局方式：自左向右，从下向上，具体可以看twav...
[python] 下载天地图切片地图
huifer
04-24 7836
下载xyz地图 资源 下列为常用xyz路由地址 为了避免图片中出现文字标注（道路名称，建筑物名称等）本文选择天地图tian-vec 作为获取资源对象 var mapUrl = { /**** * 高德地图 * lang可以通过zh_cn设置中文，en设置英文，size基本无作用，scl设置标注还是底图，scl=1代表注记， ...
百万级别矢量数据动态切片，这个方法很实用
u014328243的博客
03-15 4942
对于矢量数据的渲染显示，一般是以geojson的方式加载，或者直接以shp的形式解析加载，不管那种方法，对于少量的数据显示还可以满足要求，但是面对百万级别的数据量，直接加载显示的话，会造成严重的卡顿，甚至卡死。这里介绍一种动态切片的方法，轻松加载百万级别的矢量数据。 用到的工具有：postgis + openlayers + springboot 用到的数据有：100万条点数据 数据准备 首先将数据导入到数据库，我这里使用的是测试数据，java连接数据库生成了包括经纬度和时间、类型、UUID等字段的矢量点数
矢量切片(Vector tile)
豆破苍琼
07-26 3410
矢量切片(Vector tile) 说明：本月的主要工作都是围绕制作矢量切片这一个核心问题进行的，所以2月的主题就以这个问题为主，目前分支出来的一些内容主要包括了TMS(Tile map service)，OpenLayers3中的Projection和Resolution以及proj4js在OpenLayers3中的应用，这些在这篇文章之后会继续展开，作为本月的番外内容。 一、G
Geoserver发布矢量切片服务及使用openlayer调用展示
m0_38051293的博客
07-27 3977
Geoserver发布矢量切片服务及使用openlayer调用展示矢量切片概述矢量切片相关研究矢量切片格式Geoserver发布矢量切片服务1、下载插件2、安装插件3、发布矢量切片服务openlayer实现前端展示安装ol实现展示 矢量切片概述 矢量切片技术是一种控制可交互的动态的地图显示方法，通过紧凑的格式包含所有相对应的几何图形和元数据，是一种高效性能的格式，在样式和输出格式以及交互性方面有很...
GeoTools实战指南: 首次尝试自定义静态矢量切片
孙霸天的专栏
05-03 710
本教程将介绍如何使用GeoTools库在Java中将一个矢量图层（shapefile 文件）切分成多个图像切片，并保存为 PNG 格式。
GeoServer图层切片（WMTS）详解
lz5211314121的博客
03-14 2235
点击geoserver首页的图标，回到首页，点击wmts1.1.1，这时候会打开一个xml文件，这个文件内部记录了所有图层的wmts切片信息，包括每个图层是什么坐标系，切了几级，切片服务的地址等等，都记录在这个xml里面。这是 geoserver根据你的配置动态切割的图片，随着你鼠标滚轮的滚动，geoserver 会判断当前的层级比例尺分辨率，也就是zoom大小，动态的从服务端切割图片，然后再返回前端。首先我发布一个浙江省的shape作为数据源，这一步大家应该都会，不会的简单去百度一下这太简单我就不说了。
java如何对对矢量切片_java 爬取mapbox矢量切片
weixin_42561910的博客
02-25 662
package com.aerors.tiles;import java.io.DataInputStream;import java.io.DataOutputStream;import java.io.File;import java.io.FileOutputStream;import java.io.IOException;import java.net.HttpURLConnection...
一、初识矢量切片
m0_52352471的博客
11-28 1361
矢量切片相对于栅格切片来说保留了矢量数据的特性，可交互可操作样式可定制，如果说栅格切片是将地图地图打成一个个小图片的形式进行加载展现，矢量切片是对地图地图进行数据层面的操作，更像是将原本的shp文件打成一个个小shp数据。
【超图+CESIUM】【基础API使用示例】04、超图｜CESIUM - 设置地图风格样式
汪同学丶的博客
02-24 7254
超图+CESIUMJS设置地图风格：本地图片设置3d球、加载天地图bingmap、加载地形、s3m、mvt等服务图层
Java实现MVT矢量切片生成方法
资源摘要信息:"使用java生成mvt切片的...通过上述步骤，可以利用Java后端调用MVT方式生成矢量切片，以提供高效的地图数据服务。在实施过程中，需要根据实际需求灵活选择和使用各种技术工具和方法，以达到最佳的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值