@orca-fe/x-map
Version:
161 lines (160 loc) • 7.36 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
/* eslint-disable @typescript-eslint/no-explicit-any */
const BaseInstance_1 = tslib_1.__importDefault(require("./BaseInstance"));
const defaultStyle = {
version: 8,
// glyphs:
// "https://api.mapbox.com/fonts/v1/mapbox/{fontstack}/{range}.pbf?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA",
sources: {
'empty-layer': {
type: 'raster',
// eslint-disable-next-line max-len
tiles: ['data:image/png;base64,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'],
tileSize: 256,
},
'raster-tiles': {
type: 'raster',
tiles: [
// "http://47.110.124.65:8003/v3/tile?x={x}&y={y}&z={z}",
// "http://a.tile.openstreetmap.org/{z}/{x}/{y}.png",
// "http://b.tile.openstreetmap.org/{z}/{x}/{y}.png",
// "http://c.tile.openstreetmap.org/{z}/{x}/{y}.png",
'//webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
'//webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
'//webrd03.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
'//webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
],
tileSize: 256,
minzoom: 3,
maxzoom: 17,
},
},
layers: [
{
id: 'empty-layer',
type: 'raster',
source: 'empty-layer',
minzoom: 1,
maxzoom: 22,
},
{
id: 'simple-tiles',
type: 'raster',
source: 'raster-tiles',
minzoom: 1,
maxzoom: 22,
},
],
};
/**
* mapbox-gl
*/
class MapBoxGLInstance extends BaseInstance_1.default {
constructor(mapboxOptions = {}) {
super();
this.changeTheme = ( /* theme */) => { };
this.mapboxOptions = mapboxOptions;
}
init(id, options) {
// @ts-expect-error
const { mapboxgl } = window;
const { viewport } = options;
const { lng, lat, zoom, pitch, rotate } = viewport;
const mapOptions = {
center: { lng, lat },
zoom,
pitch,
bearing: rotate,
};
this.dom = typeof id === 'string' ? document.getElementById(id) : id;
this.map = new mapboxgl.Map(Object.assign(Object.assign({ container: id, style: Object.assign({}, defaultStyle), minZoom: 0, maxZoom: 22 }, mapOptions), this.mapboxOptions));
return new Promise((resolve) => {
this.map.on('load', () => {
resolve();
this.emit('load');
});
});
}
destroy() {
this.map.remove();
this.emit('unloaded');
super.destroy();
}
lnglatToPixel([lng, lat]) {
const { x, y } = this.map.project([Number(lng), Number(lat)]);
return [x, y];
}
pixelToLnglat([x, y]) {
const { x: _x, lng, y: _y, lat } = this.map.unproject([x, y]);
return [lng !== null && lng !== void 0 ? lng : _x, lat !== null && lat !== void 0 ? lat : _y];
}
resize() {
this.map.resize();
}
getZoom() {
return this.map.getZoom();
}
setZoom(zoom) {
return this.map.setZoom(zoom);
}
setZoomAndCenter(zoom, [lng, lat]) {
this.map.jumpTo({ center: [lng, lat], zoom });
}
zoomIn() {
this.map.zoomIn();
}
zoomOut() {
this.map.zoomOut();
}
// setBounds = ({ maxLng, minLng, maxLat, minLat }) => {
// this.map.fitBounds([
// [minLng, minLat],
// [maxLng, maxLat],
// ]);
// };
//
// getBounds = () => {
// if (this.dom) {
// const { width = 100, height = 100 } = this.dom.getBoundingClientRect();
// return toBounds([
// this.pixelToLnglat([0, 0]),
// this.pixelToLnglat([0, height]),
// this.pixelToLnglat([width, height]),
// this.pixelToLnglat([width, 0]),
// ]);
// }
// const { _sw, _ne } = this.map.getBounds();
// return toBounds([_sw, _ne]);
// };
panTo([lng, lat]) {
this.map.easeTo({ center: [lng, lat] });
}
getCenter() {
const { lng, lat } = this.map.getCenter();
return [lng, lat];
}
setCenter([lng, lat]) {
this.map.jumpTo({ center: [lng, lat] });
}
getPitch() {
return this.map.getPitch();
}
setPitch(pitch) {
return this.map.setPitch(pitch);
}
/**
* 设置旋转角度
*/
setRotate(deg, options = { animate: false }, ...other) {
this.map.rotateTo(deg, options, ...other);
}
/**
* 获取旋转角度
*/
getRotate() {
return this.map.getBearing();
}
}
exports.default = MapBoxGLInstance;