@cennavi-fe/minemap2d

v2.1.2

Published

2 months ago

基于webgl的二维地图引擎，基于mapbox0.49的深度化定制版本

Downloads

0High
0Medium
0Low

webgl1 webgis bigdata ogc mvt dynamic-traffic-line traffic-eye geojson

MineMap3DEngine

[TOC]

工程介绍

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>

更新日志

[2.1.1-20240306]

文档更新

[2.1.1-20240307]

文档更新

[2.1.2]

正式修改为小版本发布的形式，去掉时间戳
修正部分自动替换的路径中出现双斜杠时有些服务器找不到资源的问题

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

MineMap3DEngine

Contents

工程介绍

如何使用？

相关文档

更新日志