❤
npm
Sign UpSign In

@cennavi-fe/minemap

4.6.12 • Public • Published

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 的数据请求和渲染

如何使用？

# 安装依赖
npm install @cennavi-fe/minemap

or

pnpm install @cennavi-fe/minemap

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

import Vue from "vue";
import App from "./App.vue";
// 引入 minemap css 依赖
import "@cennavi-fe/minemap/esm/minemap.css";

// ...

以 vue2 举例，放到

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

<script>
	import minemap from "@cennavi-fe/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 原生使用方式

<!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>

相关文档

文档链接

更新日志

[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，避免一些开发缺少数据的问题

Readme

Keywords

Package Sidebar

Install

npm i @cennavi-fe/minemap

Weekly Downloads

1

Version

4.6.12

License

ISC

Unpacked Size

4.14 MB

Total Files

4

Last publish

Collaborators

  • wuhaoyuan
  • zhoumingrui
  • hhui90068
  • wb9527
  • ndwgg
Try on RunKit
Report malware