Package Exports

@minemap3d/minemap
@minemap3d/minemap/esm/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@minemap3d/minemap) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

MineMap3DEngine

[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 @minemap3d/minemap

or

pnpm install @minemap3d/minemap

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

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

// ...

以 vue2 举例，放到

<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 原生使用方式

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

JSPM

@minemap3d/minemap