From b2df3e3a7cbbf9400b0611ac9041667959d9186d Mon Sep 17 00:00:00 2001 From: lifan <1479367266@qq.com> Date: Fri, 22 Mar 2024 17:39:53 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20map=E5=8C=85v1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/map/README.md | 2 +- packages/map/es/MapBox.d.ts | 46 +++++++++++ packages/map/es/MapBox.js | 97 +++++++++++++++++++++++ packages/map/es/index.d.ts | 1 + packages/map/es/index.js | 1 + packages/map/es/index.less | 3 + packages/map/lib/MapBox.d.ts | 46 +++++++++++ packages/map/lib/MapBox.js | 131 ++++++++++++++++++++++++++++++++ packages/map/lib/index.d.ts | 1 + packages/map/lib/index.js | 39 ++++++++++ packages/map/lib/index.less | 3 + packages/map/package.json | 5 +- packages/map/src/MapBox.tsx | 94 +++++++++++++++++++++++ packages/map/src/demo/basic.tsx | 13 ++++ packages/map/src/index.less | 3 + packages/map/src/index.md | 2 + packages/map/src/index.ts | 2 +- 17 files changed, 486 insertions(+), 3 deletions(-) create mode 100644 packages/map/es/MapBox.d.ts create mode 100644 packages/map/es/MapBox.js create mode 100644 packages/map/es/index.d.ts create mode 100644 packages/map/es/index.js create mode 100644 packages/map/es/index.less create mode 100644 packages/map/lib/MapBox.d.ts create mode 100644 packages/map/lib/MapBox.js create mode 100644 packages/map/lib/index.d.ts create mode 100644 packages/map/lib/index.js create mode 100644 packages/map/lib/index.less create mode 100644 packages/map/src/MapBox.tsx create mode 100644 packages/map/src/demo/basic.tsx create mode 100644 packages/map/src/index.less diff --git a/packages/map/README.md b/packages/map/README.md index 3f948b0..2e2111a 100644 --- a/packages/map/README.md +++ b/packages/map/README.md @@ -16,5 +16,5 @@ ```js import React from 'react'; -import { TYPE } from '@zhst/map' +import { MapBox } from '@zhst/map' ``` diff --git a/packages/map/es/MapBox.d.ts b/packages/map/es/MapBox.d.ts new file mode 100644 index 0000000..1420ae9 --- /dev/null +++ b/packages/map/es/MapBox.d.ts @@ -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) => void; + onDrawCreate?: () => void; + mapRef?: React.MutableRefObject; + style?: CSSProperties; + children?: JSX.Element | JSX.Element[] | Array; + defaultMode?: string; + setIsReady?: (ready: boolean) => void; +} +declare const MapBox: React.FC; +export default MapBox; diff --git a/packages/map/es/MapBox.js b/packages/map/es/MapBox.js new file mode 100644 index 0000000..fb33fa4 --- /dev/null +++ b/packages/map/es/MapBox.js @@ -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; \ No newline at end of file diff --git a/packages/map/es/index.d.ts b/packages/map/es/index.d.ts new file mode 100644 index 0000000..6581359 --- /dev/null +++ b/packages/map/es/index.d.ts @@ -0,0 +1 @@ +export { default as MapBox } from './MapBox'; diff --git a/packages/map/es/index.js b/packages/map/es/index.js new file mode 100644 index 0000000..1662d0f --- /dev/null +++ b/packages/map/es/index.js @@ -0,0 +1 @@ +export { default as MapBox } from "./MapBox"; \ No newline at end of file diff --git a/packages/map/es/index.less b/packages/map/es/index.less new file mode 100644 index 0000000..ac327e9 --- /dev/null +++ b/packages/map/es/index.less @@ -0,0 +1,3 @@ +.mapboxgl-ctrl-attrib-button { + display: none; +} diff --git a/packages/map/lib/MapBox.d.ts b/packages/map/lib/MapBox.d.ts new file mode 100644 index 0000000..1420ae9 --- /dev/null +++ b/packages/map/lib/MapBox.d.ts @@ -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) => void; + onDrawCreate?: () => void; + mapRef?: React.MutableRefObject; + style?: CSSProperties; + children?: JSX.Element | JSX.Element[] | Array; + defaultMode?: string; + setIsReady?: (ready: boolean) => void; +} +declare const MapBox: React.FC; +export default MapBox; diff --git a/packages/map/lib/MapBox.js b/packages/map/lib/MapBox.js new file mode 100644 index 0000000..1ad604f --- /dev/null +++ b/packages/map/lib/MapBox.js @@ -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 +}); diff --git a/packages/map/lib/index.d.ts b/packages/map/lib/index.d.ts new file mode 100644 index 0000000..6581359 --- /dev/null +++ b/packages/map/lib/index.d.ts @@ -0,0 +1 @@ +export { default as MapBox } from './MapBox'; diff --git a/packages/map/lib/index.js b/packages/map/lib/index.js new file mode 100644 index 0000000..db0e193 --- /dev/null +++ b/packages/map/lib/index.js @@ -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 +}); diff --git a/packages/map/lib/index.less b/packages/map/lib/index.less new file mode 100644 index 0000000..ac327e9 --- /dev/null +++ b/packages/map/lib/index.less @@ -0,0 +1,3 @@ +.mapboxgl-ctrl-attrib-button { + display: none; +} diff --git a/packages/map/package.json b/packages/map/package.json index 964b4af..b074379 100644 --- a/packages/map/package.json +++ b/packages/map/package.json @@ -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" + } } diff --git a/packages/map/src/MapBox.tsx b/packages/map/src/MapBox.tsx new file mode 100644 index 0000000..da0cf41 --- /dev/null +++ b/packages/map/src/MapBox.tsx @@ -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) => void; + onDrawCreate?: () => void; + mapRef?: React.MutableRefObject; + style?: CSSProperties; + children?: JSX.Element | JSX.Element[] | Array; + defaultMode?: string; + setIsReady?: (ready: boolean) => void; +} + +const MapBox: React.FC = (props) => { + const { + style = {}, + children, + mapRef, + onLoad, + defaultMode, + onDrawCreate, + setIsReady, + ...others + } = props || {}; + let mapCneter = MAP_CENTER; + + return ( + //@ts-ignore + { + 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} + + ); +}; + +export default MapBox; diff --git a/packages/map/src/demo/basic.tsx b/packages/map/src/demo/basic.tsx new file mode 100644 index 0000000..ea6315c --- /dev/null +++ b/packages/map/src/demo/basic.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import { MapBox } from '@zhst/map'; + +const demo = () => { + + return ( +
+ +
+ ); +}; + +export default demo; diff --git a/packages/map/src/index.less b/packages/map/src/index.less new file mode 100644 index 0000000..ac327e9 --- /dev/null +++ b/packages/map/src/index.less @@ -0,0 +1,3 @@ +.mapboxgl-ctrl-attrib-button { + display: none; +} diff --git a/packages/map/src/index.md b/packages/map/src/index.md index 6b85ee3..5d1d70f 100644 --- a/packages/map/src/index.md +++ b/packages/map/src/index.md @@ -7,3 +7,5 @@ title: 快速上手 --- +基本用法 + diff --git a/packages/map/src/index.ts b/packages/map/src/index.ts index c3a9c65..6581359 100644 --- a/packages/map/src/index.ts +++ b/packages/map/src/index.ts @@ -1 +1 @@ -export * from './user' +export { default as MapBox } from './MapBox';