nicecode/nicecode-v2
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 完善地图例子，抛出mapConfig定制化参数传入，完善API说明

Browse Source
This commit is contained in:
lifan 2024-03-25 17:22:36 +08:00
parent 6f65746373
commit 0d2a8a232d
18 changed files with 309 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
packages/map/es/MapBox.js
View File

@ -1,5 +1,5 @@
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
var _excluded = ["style", "children", "mapRef", "onLoad", "defaultMode", "onDrawCreate", "setIsReady"];
var _excluded = ["style", "children", "mapRef", "onLoad", "mapCenter", "mapConfig"];
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@ -11,53 +11,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
import 'mapbox-gl/dist/mapbox-gl.css';
import Map from 'react-map-gl';
import "./index.less";
export var mapboxAccessToken = 'pk.eyJ1IjoiZGluZ2xpMTIzIiwiYSI6ImNra204ODhjczBobTgyeHJ6MmJpZHMxNWgifQ.NbKrXh_hb2gvjr5CEMDnyQ';
export var MAP_CENTER = {
longitude: 120.2667694313269,
latitude: 30.180942826533766
}; //地图中心
var MapUrl = 'http://10.0.0.120:30003/map';
export var MapConfig = {
mapboxAccessToken: mapboxAccessToken,
maxZoom: 18,
minZoom: 4,
dragRotate: false,
mapStyle: {
version: 8,
name: 'Mapbox Streets',
// sprite: `${location.origin}/mapbox/sprite`, // 地图图标
glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
// 字体
sources: {
//数据源
'osm-tiles': {
type: 'raster',
//栅格切片。vector:矢量切片
// Z-瓦片层级，一般支持0-18级，越大代表越清晰；
// X-瓦片列号，从西向东（0->360），依次0，1，2，……；
// Y-瓦片行号，从北向南（有些也可能是从南向北），依次0，1，2，……；
tiles: ["".concat(MapUrl, "/api/tilesets/mapfile/{z}/{x}/{y}.png")],
//在线地址，先写死120
tileSize: 256 //切片的最小展示尺寸（可选，单位：像素，默认值为 512，即 1024/2
}
},
layers: [
// 图层。图层指定了如何渲染数据源提供的数据
{
id: 'zhstLayer',
//唯一id
type: 'raster',
//类型 栅格。circle，symbol，line...
source: 'osm-tiles',
// 'source-layer': 'osmtiles',//数据源必须是type:vector
minZoom: 4,
//最小层级
maxZoom: 17,
//最大层级
renderingMode: '2d'
}]
}
};
import { merge } from "./utils";
import { MAP_CENTER, defaultMapConfig } from "./constants";
var MapBox = function MapBox(props) {
var _ref = props || {},
_ref$style = _ref.style,
@ -65,11 +20,11 @@ var MapBox = function MapBox(props) {
children = _ref.children,
mapRef = _ref.mapRef,
_onLoad = _ref.onLoad,
defaultMode = _ref.defaultMode,
onDrawCreate = _ref.onDrawCreate,
setIsReady = _ref.setIsReady,
_ref$mapCenter = _ref.mapCenter,
mapCenter = _ref$mapCenter === void 0 ? MAP_CENTER : _ref$mapCenter,
_ref$mapConfig = _ref.mapConfig,
mapConfig = _ref$mapConfig === void 0 ? {} : _ref$mapConfig,
others = _objectWithoutProperties(_ref, _excluded);
var mapCneter = MAP_CENTER;
return (
/*#__PURE__*/
//@ts-ignore
@ -80,15 +35,14 @@ var MapBox = function MapBox(props) {
}
},
onLoad: function onLoad(e) {
setIsReady && setIsReady(true);
_onLoad && _onLoad(e);
},
style: _objectSpread({
width: '100%',
height: 600
}, style)
}, MapConfig, {
initialViewState: _objectSpread(_objectSpread({}, mapCneter), {}, {
}, merge(defaultMapConfig, mapConfig), {
initialViewState: _objectSpread(_objectSpread({}, mapCenter), {}, {
zoom: 10
})
}, others), children)

17
packages/map/es/MapBox.d.ts → packages/map/es/constants.d.ts vendored
View File

@ -1,13 +1,9 @@
import 'mapbox-gl/dist/mapbox-gl.css';
import type { CSSProperties } from 'react';
import { MapRef } from 'react-map-gl';
import './index.less';
export declare const mapboxAccessToken = "pk.eyJ1IjoiZGluZ2xpMTIzIiwiYSI6ImNra204ODhjczBobTgyeHJ6MmJpZHMxNWgifQ.NbKrXh_hb2gvjr5CEMDnyQ";
export declare const MAP_CENTER: {
longitude: number;
latitude: number;
};
export declare const MapConfig: {
export declare const defaultMapConfig: {
mapboxAccessToken: string;
maxZoom: number;
minZoom: number;
@ -33,14 +29,3 @@ export declare const MapConfig: {
}[];
};
};
interface MapProps {
onLoad?: (e: mapboxgl.MapboxEvent<undefined>) => void;
onDrawCreate?: () => void;
mapRef?: React.MutableRefObject<MapRef | undefined>;
style?: CSSProperties;
children?: JSX.Element | JSX.Element[] | Array<JSX.Element | undefined>;
defaultMode?: string;
setIsReady?: (ready: boolean) => void;
}
declare const MapBox: React.FC<MapProps>;
export default MapBox;

47
packages/map/es/constants.js Normal file
View File

@ -0,0 +1,47 @@
export var mapboxAccessToken = 'pk.eyJ1IjoiZGluZ2xpMTIzIiwiYSI6ImNra204ODhjczBobTgyeHJ6MmJpZHMxNWgifQ.NbKrXh_hb2gvjr5CEMDnyQ';
export var MAP_CENTER = {
longitude: 120.2667694313269,
latitude: 30.180942826533766
}; //地图中心
var MapUrl = 'http://10.0.0.120:30003/map';
export var defaultMapConfig = {
mapboxAccessToken: mapboxAccessToken,
maxZoom: 18,
minZoom: 4,
dragRotate: false,
mapStyle: {
version: 8,
name: 'Mapbox Streets',
// sprite: `${location.origin}/mapbox/sprite`, // 地图图标
glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
// 字体
sources: {
//数据源
'osm-tiles': {
type: 'raster',
//栅格切片。vector:矢量切片
// Z-瓦片层级，一般支持0-18级，越大代表越清晰；
// X-瓦片列号，从西向东（0->360），依次0，1，2，……；
// Y-瓦片行号，从北向南（有些也可能是从南向北），依次0，1，2，……；
tiles: ["".concat(MapUrl, "/api/tilesets/mapfile/{z}/{x}/{y}.png")],
//在线地址，先写死120
tileSize: 256 //切片的最小展示尺寸（可选，单位：像素，默认值为 512，即 1024/2
}
},
layers: [
// 图层。图层指定了如何渲染数据源提供的数据
{
id: 'zhstLayer',
//唯一id
type: 'raster',
//类型 栅格。circle，symbol，line...
source: 'osm-tiles',
// 'source-layer': 'osmtiles',//数据源必须是type:vector
minZoom: 4,
//最小层级
maxZoom: 17,
//最大层级
renderingMode: '2d'
}]
}
};

20
packages/map/es/interface.d.ts vendored Normal file
View File

@ -0,0 +1,20 @@
import { CSSProperties } from "react";
import { MapRef, MapStyle } from "react-map-gl";
export interface MapProps {
onLoad?: (e: mapboxgl.MapboxEvent<undefined>) => void;
mapRef?: React.MutableRefObject<MapRef | undefined>;
style?: CSSProperties;
children?: JSX.Element | JSX.Element[] | Array<JSX.Element | undefined>;
mapConfig?: MapConfigProps;
mapCenter: {
longitude: number;
latitude: number;
};
}
export interface MapConfigProps {
mapboxAccessToken?: string;
minZoom?: number;
maxZoom?: number;
dragRotate?: boolean;
mapStyle?: MapStyle;
}

1
packages/map/es/interface.js Normal file
View File

@ -0,0 +1 @@
export {};

1
packages/map/es/utils.d.ts vendored Normal file
View File

@ -0,0 +1 @@
export declare const merge: (object: any, ...sources: any) => any;

36
packages/map/es/utils.js Normal file
View File

@ -0,0 +1,36 @@
var getRawType = function getRawType(val) {
return Object.prototype.toString.call(val).slice(8, -1);
};
var isPlainObjectOrArray = function isPlainObjectOrArray(val) {
return isPlainObject(val) || Array.isArray(val);
};
var isPlainObject = function isPlainObject(val) {
return getRawType(val) === 'Object';
};
export var merge = function merge(object) {
for (var _len = arguments.length, sources = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
sources[_key - 1] = arguments[_key];
}
for (var _i = 0, _sources = sources; _i < _sources.length; _i++) {
var source = _sources[_i];
for (var key in source) {
if (source[key] === undefined && key in object) {
continue;
}
if (isPlainObjectOrArray(source[key])) {
if (getRawType(object[key] === getRawType(source[key]))) {
if (isPlainObject(object[key])) {
merge(object[key], source[key]);
} else {
object[key] = object[key].concat(source[key]);
}
} else {
object[key] = source[key];
}
} else {
object[key] = source[key];
}
}
}
return object;
};

73
packages/map/lib/MapBox.js
View File

@ -29,76 +29,24 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
// src/MapBox.tsx
var MapBox_exports = {};
__export(MapBox_exports, {
MAP_CENTER: () => MAP_CENTER,
MapConfig: () => MapConfig,
default: () => MapBox_default,
mapboxAccessToken: () => mapboxAccessToken
default: () => MapBox_default
});
module.exports = __toCommonJS(MapBox_exports);
var import_mapbox_gl = require("mapbox-gl/dist/mapbox-gl.css");
var import_react_map_gl = __toESM(require("react-map-gl"));
var import_index = require("./index.less");
var mapboxAccessToken = "pk.eyJ1IjoiZGluZ2xpMTIzIiwiYSI6ImNra204ODhjczBobTgyeHJ6MmJpZHMxNWgifQ.NbKrXh_hb2gvjr5CEMDnyQ";
var MAP_CENTER = {
longitude: 120.2667694313269,
latitude: 30.180942826533766
};
var MapUrl = "http://10.0.0.120:30003/map";
var MapConfig = {
mapboxAccessToken,
maxZoom: 18,
minZoom: 4,
dragRotate: false,
mapStyle: {
version: 8,
name: "Mapbox Streets",
// sprite: `${location.origin}/mapbox/sprite`, // 地图图标
glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
// 字体
sources: {
//数据源
"osm-tiles": {
type: "raster",
//栅格切片。vector:矢量切片
// Z-瓦片层级，一般支持0-18级，越大代表越清晰；
// X-瓦片列号，从西向东（0->360），依次0，1，2，……；
// Y-瓦片行号，从北向南（有些也可能是从南向北），依次0，1，2，……；
tiles: [`${MapUrl}/api/tilesets/mapfile/{z}/{x}/{y}.png`],
//在线地址，先写死120
tileSize: 256
//切片的最小展示尺寸（可选，单位：像素，默认值为 512，即 1024/2
}
},
layers: [
// 图层。图层指定了如何渲染数据源提供的数据
{
id: "zhstLayer",
//唯一id
type: "raster",
//类型 栅格。circle，symbol，line...
source: "osm-tiles",
// 'source-layer': 'osmtiles',//数据源必须是type:vector
minZoom: 4,
//最小层级
maxZoom: 17,
//最大层级
renderingMode: "2d"
}
]
}
};
var import_utils = require("./utils");
var import_constants = require("./constants");
var MapBox = (props) => {
const {
style = {},
children,
mapRef,
onLoad,
defaultMode,
onDrawCreate,
setIsReady,
mapCenter = import_constants.MAP_CENTER,
mapConfig = {},
...others
} = props || {};
let mapCneter = MAP_CENTER;
return (
//@ts-ignore
/* @__PURE__ */ React.createElement(
@ -110,12 +58,11 @@ var MapBox = (props) => {
}
},
onLoad: (e) => {
setIsReady && setIsReady(true);
onLoad && onLoad(e);
},
style: { width: "100%", height: 600, ...style },
...MapConfig,
initialViewState: { ...mapCneter, zoom: 10 },
...(0, import_utils.merge)(import_constants.defaultMapConfig, mapConfig),
initialViewState: { ...mapCenter, zoom: 10 },
...others
},
children
@ -123,9 +70,3 @@ var MapBox = (props) => {
);
};
var MapBox_default = MapBox;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
MAP_CENTER,
MapConfig,
mapboxAccessToken
});

17
packages/map/lib/MapBox.d.ts → packages/map/lib/constants.d.ts vendored
View File

@ -1,13 +1,9 @@
import 'mapbox-gl/dist/mapbox-gl.css';
import type { CSSProperties } from 'react';
import { MapRef } from 'react-map-gl';
import './index.less';
export declare const mapboxAccessToken = "pk.eyJ1IjoiZGluZ2xpMTIzIiwiYSI6ImNra204ODhjczBobTgyeHJ6MmJpZHMxNWgifQ.NbKrXh_hb2gvjr5CEMDnyQ";
export declare const MAP_CENTER: {
longitude: number;
latitude: number;
};
export declare const MapConfig: {
export declare const defaultMapConfig: {
mapboxAccessToken: string;
maxZoom: number;
minZoom: number;
@ -33,14 +29,3 @@ export declare const MapConfig: {
}[];
};
};
interface MapProps {
onLoad?: (e: mapboxgl.MapboxEvent<undefined>) => void;
onDrawCreate?: () => void;
mapRef?: React.MutableRefObject<MapRef | undefined>;
style?: CSSProperties;
children?: JSX.Element | JSX.Element[] | Array<JSX.Element | undefined>;
defaultMode?: string;
setIsReady?: (ready: boolean) => void;
}
declare const MapBox: React.FC<MapProps>;
export default MapBox;

81
packages/map/lib/constants.js Normal file
View File

@ -0,0 +1,81 @@
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/constants.ts
var constants_exports = {};
__export(constants_exports, {
MAP_CENTER: () => MAP_CENTER,
defaultMapConfig: () => defaultMapConfig,
mapboxAccessToken: () => mapboxAccessToken
});
module.exports = __toCommonJS(constants_exports);
var mapboxAccessToken = "pk.eyJ1IjoiZGluZ2xpMTIzIiwiYSI6ImNra204ODhjczBobTgyeHJ6MmJpZHMxNWgifQ.NbKrXh_hb2gvjr5CEMDnyQ";
var MAP_CENTER = {
longitude: 120.2667694313269,
latitude: 30.180942826533766
};
var MapUrl = "http://10.0.0.120:30003/map";
var defaultMapConfig = {
mapboxAccessToken,
maxZoom: 18,
minZoom: 4,
dragRotate: false,
mapStyle: {
version: 8,
name: "Mapbox Streets",
// sprite: `${location.origin}/mapbox/sprite`, // 地图图标
glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
// 字体
sources: {
//数据源
"osm-tiles": {
type: "raster",
//栅格切片。vector:矢量切片
// Z-瓦片层级，一般支持0-18级，越大代表越清晰；
// X-瓦片列号，从西向东（0->360），依次0，1，2，……；
// Y-瓦片行号，从北向南（有些也可能是从南向北），依次0，1，2，……；
tiles: [`${MapUrl}/api/tilesets/mapfile/{z}/{x}/{y}.png`],
//在线地址，先写死120
tileSize: 256
//切片的最小展示尺寸（可选，单位：像素，默认值为 512，即 1024/2
}
},
layers: [
// 图层。图层指定了如何渲染数据源提供的数据
{
id: "zhstLayer",
//唯一id
type: "raster",
//类型 栅格。circle，symbol，line...
source: "osm-tiles",
// 'source-layer': 'osmtiles',//数据源必须是type:vector
minZoom: 4,
//最小层级
maxZoom: 17,
//最大层级
renderingMode: "2d"
}
]
}
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
MAP_CENTER,
defaultMapConfig,
mapboxAccessToken
});

20
packages/map/lib/interface.d.ts vendored Normal file
View File

@ -0,0 +1,20 @@
import { CSSProperties } from "react";
import { MapRef, MapStyle } from "react-map-gl";
export interface MapProps {
onLoad?: (e: mapboxgl.MapboxEvent<undefined>) => void;
mapRef?: React.MutableRefObject<MapRef | undefined>;
style?: CSSProperties;
children?: JSX.Element | JSX.Element[] | Array<JSX.Element | undefined>;
mapConfig?: MapConfigProps;
mapCenter: {
longitude: number;
latitude: number;
};
}
export interface MapConfigProps {
mapboxAccessToken?: string;
minZoom?: number;
maxZoom?: number;
dragRotate?: boolean;
mapStyle?: MapStyle;
}

17
packages/map/lib/interface.js Normal file
View File

@ -0,0 +1,17 @@
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/interface.ts
var interface_exports = {};
module.exports = __toCommonJS(interface_exports);

1
packages/map/lib/utils.d.ts vendored Normal file
View File

@ -0,0 +1 @@
export declare const merge: (object: any, ...sources: any) => any;

60
packages/map/lib/utils.js Normal file
View File

@ -0,0 +1,60 @@
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/utils.ts
var utils_exports = {};
__export(utils_exports, {
merge: () => merge
});
module.exports = __toCommonJS(utils_exports);
var getRawType = (val) => {
return Object.prototype.toString.call(val).slice(8, -1);
};
var isPlainObjectOrArray = (val) => {
return isPlainObject(val) || Array.isArray(val);
};
var isPlainObject = (val) => {
return getRawType(val) === "Object";
};
var merge = (object, ...sources) => {
for (const source of sources) {
for (const key in source) {
if (source[key] === void 0 && key in object) {
continue;
}
if (isPlainObjectOrArray(source[key])) {
if (getRawType(object[key] === getRawType(source[key]))) {
if (isPlainObject(object[key])) {
merge(object[key], source[key]);
} else {
object[key] = object[key].concat(source[key]);
}
} else {
object[key] = source[key];
}
} else {
object[key] = source[key];
}
}
}
return object;
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
merge
});

2
packages/map/src/MapBox.tsx
View File

@ -1,5 +1,5 @@
import 'mapbox-gl/dist/mapbox-gl.css';
import Map, { MapRef } from 'react-map-gl';
import Map from 'react-map-gl';
import './index.less';
import { MapProps } from './interface';
import { merge } from './utils';

2
packages/map/src/index.md
View File

@ -14,7 +14,7 @@ title: 快速上手
| --- | --- | --- | --- | --- |
| mapRef | 标题 | React.MutableRefObject<MapRef或undefined> | '' | - |
| style | 地图样式 | cssProperties | {} | - |
| mapCenter | 地图中心点 | {longitude: number, latitude: number} | {longitude: 120.2667694313269, latitude: 30.180942826533766} | - |
| children | 内部元素 | JSX.Element或JSX.Element[]或Array<JSX.Element或undefined> | {} | - |
| mapConfig | 地图配置 | MapConfigProps | defaultMapConfig | - |
| onLoad | 地图加载事件 | function | ()=>{} | - |
| onDrawCreate | 地图绘制事件 | string | '' | - |

1
packages/map/src/interface.ts
View File

@ -7,6 +7,7 @@ export interface MapProps {
style?: CSSProperties;
children?: JSX.Element | JSX.Element[] | Array<JSX.Element | undefined>;
mapConfig?: MapConfigProps
mapCenter: {longitude: number, latitude: number}
}
export interface MapConfigProps {

8
packages/map/src/utils.ts
View File

@ -1,16 +1,16 @@
const getRawType = (val) => {
const getRawType = (val: any) => {
return Object.prototype.toString.call(val).slice(8, -1)
}
const isPlainObjectOrArray = (val) => {
const isPlainObjectOrArray = (val: any) => {
return isPlainObject(val) || Array.isArray(val)
}
const isPlainObject = (val) => {
const isPlainObject = (val: any) => {
return getRawType(val) === 'Object'
}
export const merge = (object, ...sources) => {
export const merge = (object: any, ...sources: any) => {
for(const source of sources) {
for(const key in source) {
if(source[key] === undefined && key in object) {