@cennavi-fe/minemap2d NPM

MineMap3DEngine

工程介绍

MineMap 2d 正式版，能够矢量加载、交互.

序号	格式/类型	支持的坐标系/版本/格式
1	mvt	3857、4326
2	geojson
3	image	jpg、png、webp
5	tms
6	wmts	3857、4326

如何使用？

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

or

pnpm install @cennavi-fe/minemap2d

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

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

// ...

以 vue2 举例，放到

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

<script>
	import minemap from "@cennavi-fe/minemap2d";

	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,
				center: [108.94733550459136, 34.30940496948484],
				zoom: 15.7,
				maxZoom: 22 /*地图最大缩放等级*/,
				minZoom: 1 /*地图最小缩放等级*/
			});
			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
				});

			});
		}
	};
</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-api/zh/css/demo.css">
  <!-- 引入MineMap API插件 -->
  <link rel="stylesheet" href="https://minemap.minedata.cn/minemapapi/v2.1.1/minemap.css">
  <script src="https://minemap.minedata.cn/minemapapi/v2.1.1/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/v2.1.1/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],
    zoom: 10,
    pitch: 60,
    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-api/zh/assets/heatmap-track-geo.json"/*可以是具体的服务*/
    });
  }

  function addLayers() {
    map.addLayer({
      "id": "heatmapLayer",
      "type": "heatmap",
      "source": "heatmapSource",
      "layout": {
        "visibility": "visible"
      },
      "paint": {
        // 一个热力图数据点的模糊范围，单位是像素，默认值30；要求：值大于等于1，可根据zoom level进行插值设置
        "heatmap-radius": 30,
        //一个热力图单个数据点的热力程度，默认值为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,
      }
    });
  }

</script>
</body>