地形
加载地形
WARNING
地形功能需要你使用 maptalks-gl
mapbox
js
const map = new maptalks.Map("map", {
// "center": [119.09557457, 30.14442343, 339.73126220703125], "zoom": 11.856275713521464, "pitch": 61.80000000000011, "bearing": -64.07337236948052,
center: [108.95986733, 34.21997952, 430.3062438964844],
zoom: 12.698416480987284,
pitch: 0,
bearing: 1.8437368186266667,
// cameraInfiniteFar: true,
// heightFactor: 4.2,
zoomControl: true,
// baseLayer: new maptalks.TileLayer('base', {
// urlTemplate: "https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
// subdomains: ["a", "b", "c", "d"],
// })
});
const sceneConfig = {
postProcess: {
enable: true,
antialias: {
enable: true,
},
},
};
const colors4 = [
[0, "#F0F9E9"],
[200, "#D7EFD1"],
[400, "#A6DCB6"],
[650, "#8FD4BD"],
[880, "#67C1CB"],
[1100, "#3C9FC8"],
[1300, "#1171B1"],
[1450, "#085799"],
[1600, "#084586"],
];
const terrain = {
type: "mapbox",
tileSize: 256,
maxAvailableZoom: 14,
requireSkuToken: false,
urlTemplate: "mapbox terrain server url",
subdomains: ["a", "b", "c", "d"],
colors: colors4,
exaggeration: 4,
};
const group = new maptalks.GroupGLLayer("group", [], {
terrain,
});
group.addTo(map);
// map.setView({
// "center": [120.06864866, 30.12911788, 430.3062438964844], "zoom": 12.814714048170666, "pitch": 56.45000000000009, "bearing": 2.7148818684635216
// })
map.setView({
center: [118.25079334, 30.1210681, 430.3062438964844],
zoom: 11.892086520379873,
pitch: 66.64999999999992,
bearing: 112.90705084326646,
});天地图
WARNING
天地图地形需要设置地图投影为 EPSG:4326
js
map = new maptalks.Map("map", {
center: [114.3404041441181, 30.548730054693106],
zoom: 10,
spatialReference: {
projection: "EPSG:4326",
},
});
const sceneConfig = {
postProcess: {
enable: true,
antialias: {
enable: true,
},
},
};
const skinLayers = [
// baseLayer
];
const colors4 = [
[0, "#F0F9E9"],
[200, "#D7EFD1"],
[400, "#A6DCB6"],
[650, "#8FD4BD"],
[880, "#67C1CB"],
[1100, "#3C9FC8"],
[1300, "#1171B1"],
[1450, "#085799"],
[1600, "#084586"],
];
const terrain = {
type: "tianditu",
tileSize: 256,
terrainWidth: 65,
shader: "lit",
maxAvailableZoom: 12,
tileSystem: [1, -1, -180, 90],
urlTemplate:
"https://t{s}.tianditu.gov.cn/mapservice/swdx?T=elv_c&tk=your key&x={x}&y={y}&l={z}",
subdomains: ["1", "2", "3", "4", "5"],
colors: colors4,
exaggeration: 4,
material: {
baseColorFactor: [1, 1, 1, 1],
outputSRGB: 1,
roughnessFactor: 0.69,
metallicFactor: 0,
},
};
const group = new maptalks.GroupGLLayer("group", skinLayers, {
terrain,
});
group.addTo(map);
map.setView({
center: [118.25079334, 30.1210681, 430.3062438964844],
zoom: 9.892086520379873,
pitch: 66.64999999999992,
bearing: 112.90705084326646,
});cesium/cesiumlab等cesium系
WARNING
cesium地形需要设置地图投影为 EPSG:4326
js
map = new maptalks.Map("map", {
center: [114.3404041441181, 30.548730054693106],
zoom: 10,
spatialReference: {
projection: "EPSG:4326",
},
});
const sceneConfig = {
postProcess: {
enable: true,
antialias: {
enable: true,
},
},
};
const skinLayers = [
// baseLayer
];
const colors4 = [
[0, "#F0F9E9"],
[200, "#D7EFD1"],
[400, "#A6DCB6"],
[650, "#8FD4BD"],
[880, "#67C1CB"],
[1100, "#3C9FC8"],
[1300, "#1171B1"],
[1450, "#085799"],
[1600, "#084586"],
];
const terrain = {
tileSystem: [1, 1, -180, -90],
zoomOffset: -1,
maxAvailableZoom: 14,
type: "cesium-ion",//or cisium 本地部署的服务就cesium
terrainWidth: 65,
accessToken: "your token",
urlTemplate:
"https://assets.ion.cesium.com/asset_depot/1/CesiumWorldTerrain/v1.2/{z}/{x}/{y}.terrain",
shader: "lit",
colors: colors6,
exaggeration: 4,
};
const group = new maptalks.GroupGLLayer("group", skinLayers, {
terrain,
});
group.addTo(map);
map.setView({
center: [118.25079334, 30.1210681, 430.3062438964844],
zoom: 11.892086520379873,
pitch: 66.64999999999992,
bearing: 112.90705084326646,
});获取地形当前鼠标位置的数据
核心库从v1.0.0-rc.33开始，地图的事件系统我们加了地形相关的信息数据了,直接从事件属性读取对应的值即可
js
map.on("click mousemove", (e) => {
console.log(e.terrain);
});WARNING
- 要求核心库版本 >=v1.0.0-rc.33
- terrain的值可能为空,取决当前鼠标位置的地形数据是否加载完成,所以做好null判断
地形着色
新版本的maptalks-gl里添加了地形着色的支持
js
const colors5 = [
[0, "#FBFBFB"],
[200, "#D6D6D6"],
[400, "#BEBEBE"],
[650, "#AFAFAF"],
[880, "#868686"],
[1100, "#5E5E5E"],
[1300, "#3F3F3F"],
[1450, "#2B2B2B"],
[1600, "#070707"],
];
const terrain = {
type: "mapbox",
tileSize: 256,
maxAvailableZoom: 14,
requireSkuToken: false,
urlTemplate: "your server url",
subdomains: ["a", "b", "c", "d"],
colors: colors5,
exaggeration: 4,
};
const group = new maptalks.GroupGLLayer("group", [], {
terrain,
});
group.addTo(map);地形着色过程中会自动颜色进行插值的的
- colors参数表示每个海拔段的颜色值，中间的值会自动进行插值
- exaggeration 表示地形夸张程度
效果怎样取决于你的视觉审美了
WARNING
地形着色和地形夸张目前不支持动态更新，即在配置好的那一刻就决定了效果