npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@cennavi-fe/minemap

v4.6.12

Published

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

Downloads

21

Readme

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