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

feat: map包v1

Browse Source
This commit is contained in:
lifan 2024-03-22 17:39:53 +08:00
parent caf7869f15
commit b2df3e3a7c
17 changed files with 486 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/map/README.md
View File

@ -16,5 +16,5 @@
```js
import React from 'react';
import { TYPE } from '@zhst/map'
import { MapBox } from '@zhst/map'
```

46
packages/map/es/MapBox.d.ts vendored Normal file
View File

@ -0,0 +1,46 @@
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: {
mapboxAccessToken: string;
maxZoom: number;
minZoom: number;
dragRotate: boolean;
mapStyle: {
version: number;
name: string;
glyphs: string;
sources: {
'osm-tiles': {
type: string;
tiles: string[];
tileSize: number;
};
};
layers: {
id: string;
type: string;
source: string;
minZoom: number;
maxZoom: number;
renderingMode: string;
}[];
};
};
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;

97
packages/map/es/MapBox.js Normal file
View File

@ -0,0 +1,97 @@
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"];
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; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
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'
}]
}
};
var MapBox = function MapBox(props) {
var _ref = props || {},
_ref$style = _ref.style,
style = _ref$style === void 0 ? {} : _ref$style,
children = _ref.children,
mapRef = _ref.mapRef,
_onLoad = _ref.onLoad,
defaultMode = _ref.defaultMode,
onDrawCreate = _ref.onDrawCreate,
setIsReady = _ref.setIsReady,
others = _objectWithoutProperties(_ref, _excluded);
var mapCneter = MAP_CENTER;
return (
/*#__PURE__*/
//@ts-ignore
React.createElement(Map, _extends({
ref: function ref(e) {
if (mapRef) {
mapRef.current = e;
}
},
onLoad: function onLoad(e) {
setIsReady && setIsReady(true);
_onLoad && _onLoad(e);
},
style: _objectSpread({
width: '100%',
height: 600
}, style)
}, MapConfig, {
initialViewState: _objectSpread(_objectSpread({}, mapCneter), {}, {
zoom: 10
})
}, others), children)
);
};
export default MapBox;

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

@ -0,0 +1 @@
export { default as MapBox } from './MapBox';

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

@ -0,0 +1 @@
export { default as MapBox } from "./MapBox";

3
packages/map/es/index.less Normal file
View File

@ -0,0 +1,3 @@
.mapboxgl-ctrl-attrib-button {
display: none;
}

46
packages/map/lib/MapBox.d.ts vendored Normal file
View File

@ -0,0 +1,46 @@
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: {
mapboxAccessToken: string;
maxZoom: number;
minZoom: number;
dragRotate: boolean;
mapStyle: {
version: number;
name: string;
glyphs: string;
sources: {
'osm-tiles': {
type: string;
tiles: string[];
tileSize: number;
};
};
layers: {
id: string;
type: string;
source: string;
minZoom: number;
maxZoom: number;
renderingMode: string;
}[];
};
};
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;

131
packages/map/lib/MapBox.js Normal file
View File

@ -0,0 +1,131 @@
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/MapBox.tsx
var MapBox_exports = {};
__export(MapBox_exports, {
MAP_CENTER: () => MAP_CENTER,
MapConfig: () => MapConfig,
default: () => MapBox_default,
mapboxAccessToken: () => mapboxAccessToken
});
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 MapBox = (props) => {
const {
style = {},
children,
mapRef,
onLoad,
defaultMode,
onDrawCreate,
setIsReady,
...others
} = props || {};
let mapCneter = MAP_CENTER;
return (
//@ts-ignore
/* @__PURE__ */ React.createElement(
import_react_map_gl.default,
{
ref: (e) => {
if (mapRef) {
mapRef.current = e;
}
},
onLoad: (e) => {
setIsReady && setIsReady(true);
onLoad && onLoad(e);
},
style: { width: "100%", height: 600, ...style },
...MapConfig,
initialViewState: { ...mapCneter, zoom: 10 },
...others
},
children
)
);
};
var MapBox_default = MapBox;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
MAP_CENTER,
MapConfig,
mapboxAccessToken
});

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

@ -0,0 +1 @@
export { default as MapBox } from './MapBox';

39
packages/map/lib/index.js Normal file
View File

@ -0,0 +1,39 @@
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.ts
var src_exports = {};
__export(src_exports, {
MapBox: () => import_MapBox.default
});
module.exports = __toCommonJS(src_exports);
var import_MapBox = __toESM(require("./MapBox"));
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
MapBox
});

3
packages/map/lib/index.less Normal file
View File

@ -0,0 +1,3 @@
.mapboxgl-ctrl-attrib-button {
display: none;
}

5
packages/map/package.json
View File

@ -36,5 +36,8 @@
"access": "public",
"registry": "http://10.0.0.77:4874"
},
"dependencies": {}
"dependencies": {
"react-map-gl": "^7.1.7",
"mapbox-gl": "^2.15.0"
}
}

94
packages/map/src/MapBox.tsx Normal file
View File

@ -0,0 +1,94 @@
import 'mapbox-gl/dist/mapbox-gl.css';
import type { CSSProperties } from 'react';
import Map, { MapRef } from 'react-map-gl';
import './index.less';
export const mapboxAccessToken =
'pk.eyJ1IjoiZGluZ2xpMTIzIiwiYSI6ImNra204ODhjczBobTgyeHJ6MmJpZHMxNWgifQ.NbKrXh_hb2gvjr5CEMDnyQ';
export const MAP_CENTER = {
longitude: 120.2667694313269,
latitude: 30.180942826533766,
}; //地图中心
const MapUrl = 'http://10.0.0.120:30003/map';
export const 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',
},
],
},
};
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;
}
const MapBox: React.FC<MapProps> = (props) => {
const {
style = {},
children,
mapRef,
onLoad,
defaultMode,
onDrawCreate,
setIsReady,
...others
} = props || {};
let mapCneter = MAP_CENTER;
return (
//@ts-ignore
<Map
ref={(e) => {
if (mapRef) {
mapRef.current = e!;
}
}}
onLoad={(e) => {
setIsReady && setIsReady(true);
onLoad && onLoad(e);
}}
style={{ width: '100%', height: 600, ...style }}
{...MapConfig}
initialViewState={{ ...mapCneter, zoom: 10 }}
{...others}
>
{children}
</Map>
);
};
export default MapBox;

13
packages/map/src/demo/basic.tsx Normal file
View File

@ -0,0 +1,13 @@
import React from 'react';
import { MapBox } from '@zhst/map';
const demo = () => {
return (
<div>
<MapBox/>
</div>
);
};
export default demo;

3
packages/map/src/index.less Normal file
View File

@ -0,0 +1,3 @@
.mapboxgl-ctrl-attrib-button {
display: none;
}

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

@ -7,3 +7,5 @@ title: 快速上手
---
<embed src="../README.md" ></embed>
<code src="./demo/basic.tsx">基本用法</code>

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

@ -1 +1 @@
export * from './user'
export { default as MapBox } from './MapBox';