Open
Description
-
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>Metadata
Metadata
Assignees
Labels
No labels