@minemap3d/minemap/README.md

基于webgl的三维渲染球体地图引擎，支持矢量mvt数据的渲染，支持三维渲染、交互、空间分析以及二三维的标绘

# MineMap3DEngine

## Contents

[TOC]

## 工程介绍

MineMap 3d 正式版，能够进行完整、稳定、高性能的多源数据融合加载，支持的格式如下：

| 序号 |       格式/类型       |             支持的坐标系/版本/格式              |
| :--: | :-------------------: | :---------------------------------------------: |
|  1   |          mvt          |                  [3857、4326]                   |
|  2   |        geojson        |                                                 |
|  3   |         image         |                 jpg、png、webp                  |
|  4   | terrain-quantizedmesh |                  [3857、4326]                   |
|  5   |          tms          |                                                 |
|  6   |         wmts          |                  [3857、4326]                   |
|  7   |        3dtiles        | [0.0、1.0、1.1], texture[ktx2、crn],mesh[draco] |
|  8   |       glTF/glb        |                   [1.0、2.0]                    |
|  9   |         video         |                 [flv、mp4、hls]                 |
|  10  |       百度瓦片        |                                                 |

支持的功能

| 序号 |      功能      |                           描述                           |
| :--: | :------------: | :------------------------------------------------------: |
|  1   |    矢量图层    |  点线面、圆形、白膜、动态路况、二、三维热力；点线面贴地  |
|  2   |    栅格图层    |               栅格图层、图片图层；图层贴地               |
|  2   |      地形      |                   支持面和网格两种形式                   |
|  3   |    模型图层    |                      jpg、png、webp                      |
|  4   | 3d-tiles 图层  |           多分数据重建顶层索引极大降低内存消耗           |
|  5   |    图元对象    |        丰富的几何对象和冯氏光照模型材质、PBR 材质        |
|  6   |    粒子系统    |                                                          |
|  7   |      光照      |       点光源、平行光、聚光灯（进行中），阴影进行中       |
|  8   |     后处理     |        雾、夜视、辉光、黑白、屏幕空间反射、HDR 等        |
|  9   |    空间分析    | 可视域、通视、开敞度、等高线、限高、天际线、坡度、坡向等 |
|  10  |      交互      |   矢量图层查询交互、三维图层查询交互、单体化、模型剖切   |
|  10  | 标记和信息窗体 |                     跟随地形高度拖拽                     |

插件

| 序号 |   功能   |                        描述                        |
| :--: | :------: | :------------------------------------------------: |
|  1   | 二维编辑 |                 点线面的绘制等操作                 |
|  2   | 三维标绘 | 支持点、线、面、体的标绘、动画播放、序列化导入导出 |
|  2   |   lbs    |             用于 lbs 的数据请求和渲染              |

## 如何使用？

```shell
# 安装依赖
npm install @minemap3d/minemap

or

pnpm install @minemap3d/minemap
```

在 vue 项目的入口文件 main.js 配置

```js
import Vue from "vue";
import App from "./App.vue";
// 引入 minemap css 依赖
import "@minemap3d/minemap/esm/minemap.css";

// ...
```

以 vue2 举例，放到

```html
<template>
	<div class="hello">
		<div id="map"></div>
	</div>
</template>

<script>
	import minemap from "@minemap3d/minemap";

	export default {
		name: "HelloWorld",
		props: {
			msg: String
		},
		mounted() {
			minemap.domainUrl = "https://minedata.cn";
			minemap.dataDomainUrl = "https://minedata.cn";
			minemap.serverDomainUrl = "https://minedata.cn";
			minemap.spriteUrl = "https://minedata.cn/minemapapi/v3.3.0/sprite/sprite";
			minemap.serviceUrl = "https://minedata.cn/service/";

			minemap.key = "16be596e00c44c86bb1569cb53424dc9";
			minemap.solution = 12877;
			window.minemapCDN = "https://minedata.cn/minemapapi/minemap-CDN"; // minemapCDN 配置

			// 定义空底图样式
			var style = {
				glyphs: "minemap://fonts/{fontstack}/{range}",
				sprite: "minemap://sprite/sprite",
				sources: {},
				layers: [],
				version: 8
			};
			/**
			 * 初始化地图实例
			 */

			var map = new minemap.Map({
				container: "map",
				style: style,
				bearing: -87.18744098264303,
				position: [108.94733550459136, 34.30940496948484, 2000], //现在的球体地图可以选择两种初始化定位方式 position即设定相机的经度、纬度和距离椭球表面的高度（米）
				//或者 center + zoom的方式，这个是表示以地图为屏幕中心点的定位方式， 二者互斥，请大家注意！
				maxZoom: 22 /*地图最大缩放等级*/,
				minZoom: 1 /*地图最小缩放等级*/,
				logarithmicDepthBuffer: true,
				nearDetection: true
			});
			map.repaint = true;

			map.on("load", function () {
				/*添加栅格图*/
				map.addSource("IMAGERY_SOURCE", {
					type: "raster", //数据源类型：栅格数据源
					tiles: ["https://services.minedata.cn/service/data/satellite?x={x}&y={y}&z={z}"], //瓦片服务地址
					tileSize: 256 //瓦片尺寸
				});

				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,
					useMipmap: true,
					sourceLoaded: () => {
						// map.flyTo({
						// 	target: tileset,
						// 	bearing: 0,
						// 	pitch: 0,
						// 	duration: 2000,
						// 	range: 1000
						// });
					},
					/**
					 * 飞行选择
					 * index: 指定飞行目标(优先)
					 * combine: 合并bounds为飞行目标
					 */
					geoBoundsOptions: {
						index: 1,
						combine: true
					},
					allowPick: true,
					lightingModel: minemap.LightingModelType.NONE
				});
			});
		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	#map {
		margin: 0;
		padding: 0;
		width: 100vw;
		height: 100vh;
	}
</style>
```

html 原生使用方式

```html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
		<title>热力图图层</title>
		<link rel="stylesheet" href="https://minedata.cn/nce-static/support/demo/js-3d-ultra/zh/css/demo.css" />
		<!-- 引入MineMap API插件 -->
		<link rel="stylesheet" href="https://minemap.minedata.cn/minemapapi/v4.0.0/minemap.css" />
		<script src="https://minemap.minedata.cn/minemapapi/v4.0.0/minemap.js"></script>
		<style>
			#map {
				width: 100%;
				height: 100%;
			}
		</style>
	</head>
	<body>
		<div id="map"></div>
		<script>
			/**
			 * 全局参数设置
			 */
			minemap.domainUrl = "https://minemap.minedata.cn";
			minemap.dataDomainUrl = "https://minemap.minedata.cn";
			minemap.serverDomainUrl = "https://sd-data.minedata.cn";
			minemap.spriteUrl = "https://minemap.minedata.cn/minemapapi/v4.0.0/sprite/sprite";
			minemap.serviceUrl = "https://service.minedata.cn/service";

			minemap.key = "<您的 key>";
			minemap.solution = 11003;

			var map = new minemap.Map({
				container: "map",
				style: "https://service.minedata.cn/map/solu/style/11003",
				// center:  [116.46,39.92],
				center: [116.40264611530694, 39.94940769430899],
				zoom: 12,
				pitch: 70,
				maxZoom: 17,
				minZoom: 3,
				projection: "MERCATOR"
			});

			/**
			 * 创建地图对象后，开始加载地图资源，地图资源加载完成后触发load事件
			 */
			map.on("load", function () {
				// 增加自定义数据源、自定义图层
				addSources();
				addLayers();
			});

			function addSources() {
				//添加数据源,该热力图效果，数据源类型支持geojson或vector两种形式
				map.addSource("heatmapSource", {
					type: "geojson",
					data: "https://minedata.cn/nce-static/support/demo/js-3d-ultra/zh/assets/heatmap_point.json" /*可以是具体的服务*/
				});
			}

			function addLayers() {
				map.addLayer({
					id: "heatmapLayer",
					type: "heatmap",
					source: "heatmapSource",
					layout: {
						visibility: "visible",
						"display-mode": "3d" // 默认二维展示（“2d”），可选择展示三维（“3d”）
					},
					paint: {
						// 一个热力图数据点的模糊范围，单位是像素，默认值30；要求：值大于等于1，可根据zoom level进行插值设置
						"heatmap-radius": 100,
						//一个热力图单个数据点的热力程度，默认值为1；要求：值大于等于0，支持使用property中某个的热力值
						"heatmap-weight": {
							property: "mag",
							stops: [
								[0, 0],
								[10, 1]
							]
						},
						// 用于统一控制热力值的强度，默认值1；要求：值大于等于0，可根据zoom level进行插值设置
						"heatmap-intensity": 1,
						// 表示热力图颜色阶梯，阶梯的值域范围为0-1，默认值为["interpolate",["linear"],["heatmap-density"],0,"rgba(0, 0, 255, 0)",0.1,"royalblue",0.3,"cyan",0.5,"lime",0.7,"yellow",1,"red"]
						"heatmap-color": [
							"interpolate",
							["linear"],
							["heatmap-density"],
							0,
							"rgba(0, 0, 255, 0)",
							0.1,
							"royalblue",
							0.3,
							"cyan",
							0.5,
							"lime",
							0.7,
							"yellow",
							1,
							"red"
						],
						// 表示热力图的不透明度，默认值1；值域范围0-1，可根据zoom level进行插值设置
						"heatmap-opacity": 1,
						// 表示三维热力图以米为单位的缩放比例，默认值100，仅display-mode为3d时生效
						"heatmap-height-factor": [
							"interpolate",
							["linear"],
							["zoom"],
							0,
							10000,
							10,
							1000,
							15,
							100,
							17,
							10
						]
					}
				});
			}
		</script>
	</body>
</html>
```

## 相关文档

文档[链接](https://minedata.cn/nce-support/webDev/MineMap-3D-Ultra)

## 更新日志

[4.6.7]

1. 文档更新

[4.6.8]

1. 文档更新

[4.6.9]

1. 文档更新

[4.6.10]

1. fix:far 变更后裁剪包围盒未更新的问题
2. fix:将 raster 图层设置为默认背面剔除
3. 设置 fill-pattern 属性值为空字符串和不存在的纹理情况下默认显示填充颜色

[4.6.11]

1. 修复面图层纹理错乱的问题
2. 修复 Marker 未跟随地图变化的问题;
3. 修复 extrusion 图层纯色渲染光照消失的问题

[4.6.12]

1. 修复矢量贴地面纹理尺寸错误的问题
2. 解决有重叠的透明矢量面绘制颜色不正确的 bug
3. 修复经纬度模式下因 zoom 与瓦片层级不一致导致图层不连续的问题
4. geojson-source 数据源最大 zoom 调整为 24，避免一些开发缺少数据的问题