97 lines
5.5 KiB
JavaScript
97 lines
5.5 KiB
JavaScript
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; |