terrain与mvt同时加载异常的问题 #2494

syks0121 · 2025-01-21T08:22:55Z

mvt是用GeoJSONVectorTileLayer加载的
terrain有两种：用天地图的和cesiumlab切的
单独mvt：
叠加天地图地形：
叠加cesium地形：

代码：

<!DOCTYPE html>
<html>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<title>加载地形和矢量瓦片</title>
<style type="text/css">
  html,
  body {
    margin: 0px;
    height: 100%;
    width: 100%;
  }

  .container {
    width: 100%;
    height: 100%;
  }
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css" />
<!-- 引入完成的功能包括webgl -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/maptalks-gl/dist/maptalks-gl.js"></script>

<body>
  <div id="map" class="container"></div>

  <script>
    const map = new maptalks.Map("map", {
      spatialReference: {
        projection: "EPSG:4326",
      },
      center: [113.53077552, 22.27814626],
      minZoom: 11,
      zoom: 16.2,
      pitch: 46.8,
      bearing: -9.15,
    });
    const terrain = {
      minAvailableZoom: 13,
      type: "cesium", //or cisium 本地部署的服务就cesium
      urlTemplate: "./terrain/{z}/{x}/{y}.terrain",
    }
    const terrain_tianditu = {
      type: "tianditu", //or cisium 本地部署的服务就cesium
      urlTemplate:
        "https://t{s}.tianditu.gov.cn/mapservice/swdx?T=elv_c&tk=97d2d09de3e54939dd20123859260bf9&x={x}&y={y}&l={z}",
      subdomains: ["1", "2", "3", "4", "5"],
      exaggeration: 1,
      maxAvailableZoom: 14,
    };
    const tianditu_img = new maptalks.TileLayer("base_img", {
      tileSystem: [1, -1, -180, 90],
      urlTemplate:
        "https://t{s}.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=a6be5b6191117fed3e04515344d74de9",
      subdomains: ["1", "2", "3", "4", "5"],
    });
    const groupLayer = new maptalks.GroupGLLayer("group", [], {
      // terrain: terrain_tianditu,
    });
    groupLayer.addTo(map);
    const net = new maptalks.GeoJSONVectorTileLayer("net", {
      data: "/geojson/格网.json",
    });
    net.setStyle([
      {
        filter: [
          "all",
          // ["in", "$layer", "buildings@MyProject2", "heigher_buildings@MyProject2"],
          ["==", "$type", "Polygon"],
        ],
        renderPlugin: {
          type: "lit",
          dataConfig: {
            type: "3d-extrusion",
            minHeightProperty: "bottom",
            altitudeProperty: "top",
            altitudeScale: 1,
            topThickness: 0,
            top: true,
            side: true,
            // awareOfTerrain: true,
          },
        },
        symbol: {
          visible: true,
          bloom: false,
          ssr: false,
          polygonOpacity: 0.5,
          polygonFill: "#7FDD70",
          polygonStroke: "#7FDD70",
          polygonStrokeWidth: 1,
        },
      },
    ]);
    groupLayer.addLayer(net);

  </script>
</body>

</html>

加载地形和矢量瓦片.zip

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

terrain与mvt同时加载异常的问题 #2494

terrain与mvt同时加载异常的问题 #2494

syks0121 commented Jan 21, 2025 •

edited

Loading

terrain与mvt同时加载异常的问题 #2494

terrain与mvt同时加载异常的问题 #2494

Comments

syks0121 commented Jan 21, 2025 • edited Loading

syks0121 commented Jan 21, 2025 •

edited

Loading