@deepinnet-components/pc 0.0.50 → 0.0.51

package/dist/Map2D/MapHeatmap/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const memoCom: import("react").MemoExoticComponent<(props: any) => null>;
+export default memoCom;

package/dist/Map2D/MapHeatmap/index.js

@@ -0,0 +1,95 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { memo, useEffect, useState } from 'react';
+import shortid from 'shortid';
+
+// 暂时往外提供颜色参数，因为下面的参数是相对来说比较合理的，如有需要再进行迭代
+
+var MapHeatmap = function MapHeatmap(props) {
+  var map = props.map,
+    _props$data = props.data,
+    data = _props$data === void 0 ? [] : _props$data;
+  var _useState = useState('heatmap::' + (props.id || shortid.generate())),
+    _useState2 = _slicedToArray(_useState, 1),
+    id = _useState2[0];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    sourceOk = _useState4[0],
+    setSourceOk = _useState4[1];
+  function addSource() {
+    var features = [];
+    data.forEach(function (item) {
+      features.push({
+        type: 'Feature',
+        geometry: {
+          type: 'Point',
+          coordinates: item.position
+        },
+        properties: {
+          mag: item.data
+        }
+      });
+    });
+    var featureCollectionData = {
+      type: 'FeatureCollection',
+      features: features
+    };
+    var source = map.getSource(id);
+    if (source) {
+      source.setData(featureCollectionData);
+    } else {
+      map.addSource(id, {
+        type: 'geojson',
+        data: featureCollectionData
+      });
+    }
+    setSourceOk(true);
+  }
+  function addLayer() {
+    map.addLayer({
+      id: id,
+      type: 'heatmap',
+      source: id,
+      layout: {
+        visibility: 'visible'
+      },
+      paint: {
+        // 一个热力图数据点的模糊范围，单位是像素，默认值30；要求：值大于等于1，可根据zoom level进行插值设置
+        'heatmap-radius': 30,
+        //一个热力图单个数据点的热力程度，默认值为1；要求：值大于等于0，支持使用property中某个的热力值
+        'heatmap-weight': {
+          property: 'mag',
+          stops: [[0, 0], [10, 1], [100, 3]]
+        },
+        // 用于统一控制热力值的强度，默认值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
+      }
+    });
+  }
+  useEffect(function () {
+    if (!map) return;
+    addSource();
+  }, [map, data]);
+  useEffect(function () {
+    if (!map || !sourceOk) return;
+    addLayer();
+  }, [map, sourceOk]);
+  useEffect(function () {
+    return function () {
+      try {
+        map === null || map === void 0 || map.removeLayerAndSource(id);
+      } catch (error) {}
+    };
+  }, []);
+  return null;
+};
+var memoCom = /*#__PURE__*/memo(MapHeatmap);
+export default memoCom;

package/dist/Map2D/demo/mapHeatmap.d.ts

@@ -0,0 +1,7 @@
+/**
+ * title:
+ * description:
+ */
+import React from 'react';
+declare const App: () => React.JSX.Element;
+export default App;

package/dist/Map2D/demo/mapHeatmap.js

@@ -0,0 +1,84 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+/**
+ * title:
+ * description:
+ */
+
+import { Map2D } from "../..";
+import { Button } from 'antd';
+import React, { useEffect, useState } from 'react';
+var Map = Map2D.Map,
+  MapHeatmap = Map2D.MapHeatmap;
+function generateRandomPoints(center, count, range) {
+  var _center = _slicedToArray(center, 2),
+    centerLng = _center[0],
+    centerLat = _center[1];
+  var points = [];
+  for (var i = 0; i < count; i++) {
+    var randomLng = centerLng + (Math.random() * 2 - 1) * range;
+    var randomLat = centerLat + (Math.random() * 2 - 1) * range;
+    points.push([randomLng, randomLat]);
+  }
+  return points;
+}
+function getRandomInt(min, max) {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+var App = function App() {
+  var _useState = useState('map' + Math.random()),
+    _useState2 = _slicedToArray(_useState, 1),
+    mapId = _useState2[0];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    map = _useState4[0],
+    setMap = _useState4[1];
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    list = _useState6[0],
+    setList = _useState6[1];
+  function getList() {
+    var arr = generateRandomPoints([118.859358, 28.970404], 100, 0.02);
+    setList(arr.map(function (item) {
+      return {
+        position: item,
+        data: getRandomInt(50, 100)
+      };
+    }));
+  }
+  useEffect(function () {
+    getList();
+  }, []);
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    show = _useState8[0],
+    setShow = _useState8[1]; // 这是测试代码
+
+  if (!show) {
+    return /*#__PURE__*/React.createElement(Button, {
+      onClick: function onClick() {
+        setShow(true);
+      }
+    }, "\u5C55\u793A\u6848\u4F8B");
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: '100%',
+      height: 500
+    }
+  }, /*#__PURE__*/React.createElement(Map, {
+    setMap: setMap,
+    id: mapId,
+    onClick: function onClick(e) {
+      console.log([Number(e.lngLat.lng.toFixed(6)), Number(e.lngLat.lng.toFixed(6))]);
+    }
+  }), !!map && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MapHeatmap, {
+    map: map,
+    data: list
+  })));
+};
+export default App;

package/dist/Map2D/index.d.ts

@@ -8,6 +8,7 @@ declare const Map2D: {
     MapMarkerMulti: any;
     PolygonEdit: import("react").FC<any>;
     PolylineEdit: import("react").FC<any>;
+    MapHeatmap: import("react").MemoExoticComponent<(props: any) => null>;
     Utils: typeof Utils;
 };
 export default Map2D;

package/dist/Map2D/index.js

@@ -5,6 +5,7 @@ import MapPolyline from "./MapPolyline";
 import MapPolygon from "./MapPolygon";
 import PolygonEdit from "./PolygonEdit";
 import PolylineEdit from "./PolylineEdit";
+import MapHeatmap from "./MapHeatmap";
 import * as Utils from "./utils";
 var Map2D = {
   Map: Map,
@@ -14,6 +15,7 @@ var Map2D = {
   MapMarkerMulti: MapMarkerMulti,
   PolygonEdit: PolygonEdit,
   PolylineEdit: PolylineEdit,
+  MapHeatmap: MapHeatmap,
   Utils: Utils
 };
 export default Map2D;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deepinnet-components/pc",
-  "version": "0.0.50",
+  "version": "0.0.51",
   "description": "A react library developed with dumi",
   "license": "MIT",
   "module": "dist/index.js",