@minemap3d/minemap
Version:
基于webgl的三维渲染球体地图引擎，支持矢量mvt数据的渲染，支持三维渲染、交互、空间分析以及二三维的标绘
170 lines (152 loc) • 4.87 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>ESM模块地图加载示例</title>
<!-- 引入MineMap ESM模块的CSS样式 -->
<link rel="stylesheet" href="./esm/minemap.css" />
<style>
html, body, #map {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.info-panel {
position: absolute;
top: 10px;
left: 10px;
background: rgba(255, 255, 255, 0.9);
padding: 10px;
border-radius: 5px;
font-family: Arial, sans-serif;
font-size: 14px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
z-index: 1000;
}
</style>
</head>
<body>
<div id="map"></div>
<div class="info-panel">
<h3>ESM模块地图示例</h3>
<p>使用ES模块方式加载MineMap</p>
<p>地图中心: 北京</p>
<p>缩放级别: 10</p>
</div>
<script type="module">
// ESM模块导入 - 现在已解决crypto依赖问题
import minemap from './esm/index.js';
minemap.domainUrl = "https://minedata.cn";
minemap.dataDomainUrl = "https://minedata.cn";
minemap.serverDomainUrl = "https://minedata.cn";
minemap.spriteUrl = "https://minedata.cn/minemapapi/sprite/latest/sprite";
minemap.serviceUrl = "https://minedata.cn/service/";
minemap.key = "0c6ac62182404e5ebc7a789981f6db72";
minemap.solution = 11001;
window.minemapCDN = "https://minedata.cn/minemapapi/minemap-CDN"; // minemapCDN 配置
// window.minemapCDN = "http://192.168.152.123/minemap-engine/minemap-CDN/"; // minemapCDN 配置 http://192.168.152.123/
// 定义空底图样式
var style = {
glyphs: "minemap://fonts/{fontstack}/{range}",
sprite: "minemap://sprite/sprite",
sources: {},
layers: [],
version: 8
};
/**
* 初始化地图实例
*/
var map = new minemap.Map({
container: "map",
style: style,
// style: "https://mineservice.minedata.cn/map/solu/style/11001" /*底图样式*/ /*球面矢量底图样式*/,
bearing: -87.18744098264303,
center: [108.94733550459136, 34.30940496948484],
pitch: 61.603551292866726,
zoom: 15.7,
maxZoom: 22 /*地图最大缩放等级*/,
minZoom: 1 /*地图最小缩放等级*/,
});
map.repaint = true;
map.enableLight();
map.on("load", function () {
/*添加栅格图*/
map.addSource("IMAGERY_SOURCE", {
type: "raster", //数据源类型：栅格数据源
tiles: ["https://staticdata-b.minedata.cn:14434/satellite/{z}/{r}/{c}/{z}_{x}_{y}.jpg"], //瓦片服务地址
tileSize: 512 //瓦片尺寸
});
map.addLayer({
id: "IMAGERY",
type: "raster", //图层类型为"raster"
source: "IMAGERY_SOURCE",
minzoom: 1,
maxzoom: 23,
"depth-test": true
});
// 3dtiles
const tileset = map.addSceneComponent({
id: "serve",
type: "3d-tiles",
show: true,
translation: new minemap.Math.Vector3(0, 0, 0), //在enu坐标系下的位置移动距离，顺序为[east, north, height]，单位为m，并且只用于3dtiles图层
minzoom: 12, //3d-tiles加载显示的最小层级
maxzoom: 22, //3d-tiles加载显示的最大层级
url: "https://staticdata-b.minedata.cn:14434/oblique/tileset.json",
skipLevelOfDetail: false, //跨层调度
maximumScreenSpaceError: 8,
sourceLoaded: (tileset) => {
// map.flyTo({
// target: tileset,
// bearing: 0,
// pitch: 0,
// duration: 2000,
// range: 1000
// });
},
/**
* 飞行选择
* index: 指定飞行目标(优先)
* combine: 合并bounds为飞行目标
*/
geoBoundsOptions: {
index: 1,
combine: true
},
allowPick: true
});
window.tileset = tileset;
});
let frustumPrimitive, frustumOutlineGeometry;
function addFrustum() {
tileset.debugFreezeFrame = true;
map.showDebugBoundingBox = true;
frustumPrimitive = new minemap.Primitive({
geometry: new minemap.Geometries.FrustumGeometry(map.transform.activeCamera),
material: minemap.StandardMaterial.fromType("Color", {
color: new minemap.Color(0.0, 1.0, 1.0, 0.1), //注意minemap.Color的数据范围是0-1
doubleSided: true
}),
modelMatrix: map.transform.activeCamera._matrix
});
map.addPrimitive(frustumPrimitive);
frustumOutlineGeometry = new minemap.Primitive({
geometry: new minemap.Geometries.FrustumOutlineGeometry(map.transform.activeCamera),
material: minemap.StandardMaterial.fromType("Color", {
color: "red"
}),
modelMatrix: map.painter.frameState.camera.matrix
});
map.addPrimitive(frustumOutlineGeometry);
}
function removeFrustum() {
tileset.debugFreezeFrame = false;
map.showDebugBoundingBox = false;
map.removePrimitive(frustumPrimitive);
map.removePrimitive(frustumOutlineGeometry);
}
</script>
</body>
</html>