@cennavi-fe/minemap
v4.6.12
Published
基于webgl的三维渲染球体地图引擎，支持矢量mvt数据的渲染，支持三维渲染、交互、空间分析以及二三维的标绘
Downloads
6
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]
- 文档更新
[4.6.8]
- 文档更新
[4.6.9]
- 文档更新
[4.6.10]
- fix:far 变更后裁剪包围盒未更新的问题
- fix:将 raster 图层设置为默认背面剔除
- 设置 fill-pattern 属性值为空字符串和不存在的纹理情况下默认显示填充颜色
[4.6.11]
- 修复面图层纹理错乱的问题
- 修复 Marker 未跟随地图变化的问题;
- 修复 extrusion 图层纯色渲染光照消失的问题
[4.6.12]
- 修复矢量贴地面纹理尺寸错误的问题
- 解决有重叠的透明矢量面绘制颜色不正确的 bug
- 修复经纬度模式下因 zoom 与瓦片层级不一致导致图层不连续的问题
- geojson-source 数据源最大 zoom 调整为 24，避免一些开发缺少数据的问题