@orca-fe/x-map
Version:
168 lines (167 loc) • 7.48 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const Map_1 = tslib_1.__importDefault(require("./core/Map"));
const BaseLayer_1 = tslib_1.__importDefault(require("./layers/BaseLayer"));
const ThreeLayer_1 = tslib_1.__importDefault(require("./layers/ThreeLayer"));
const AMapInstance_1 = tslib_1.__importDefault(require("./instance/AMapInstance"));
const load_script_1 = tslib_1.__importDefault(require("./utils/load-script"));
const MapBoxGLInstance_1 = tslib_1.__importDefault(require("./instance/MapBoxGLInstance"));
const BaseMarker_1 = tslib_1.__importDefault(require("./layers/markers/BaseMarker"));
const PolygonObject_1 = tslib_1.__importDefault(require("./layers/markers/PolygonObject"));
const ThreeHeatmapLayer_1 = tslib_1.__importDefault(require("./layers/ThreeHeatmapLayer"));
const gaode_heatmap_data_1 = tslib_1.__importDefault(require("./gaode-heatmap-data"));
(function () {
return tslib_1.__awaiter(this, void 0, void 0, function* () {
const mapDom = document.getElementById('map');
const viewport = {
center: [113.042363, 23.09061],
lng: 113.042363,
lat: 23.09061,
pitch: 0,
rotate: 0,
zoom: 10,
};
let instance;
let map;
const btnInit = document.getElementById('btnInit');
const btnDispose = document.getElementById('btnDispose');
if (btnInit && btnDispose) {
btnInit.addEventListener('click', () => tslib_1.__awaiter(this, void 0, void 0, function* () {
if (mapDom) {
const gaode = false;
if (gaode) {
yield (0, load_script_1.default)('http://webapi.amap.com/maps?v=1.4.15&key=fc4ade9c195bc7ff4f45f5b90c438328');
instance = new AMapInstance_1.default();
}
else {
instance = new MapBoxGLInstance_1.default({
style: 'mapbox://styles/nicokam/ckrwwvr9345rb17qk4aezrmnv',
accessToken: 'pk.eyJ1Ijoibmljb2thbSIsImEiOiJjazA3dWNwdGs0MnV5M251dDhqN3FhNGV6In0.Wtu8Lw9TzpEpYbb1TY_XGw',
});
}
map = new Map_1.default(mapDom, {
motion: true,
mapInstance: instance,
defaultViewport: viewport,
threeCenter: [113.203775, 23.109852],
});
}
}));
btnDispose.addEventListener('click', () => {
if (map) {
map.destroy();
map = null;
instance = null;
}
});
}
// test: markerLayer
const btnAddMarker = document.getElementById('btnAddMarker');
const btnRemoveMarker = document.getElementById('btnRemoveMarker');
if (btnAddMarker && btnRemoveMarker) {
let markerLayer = null;
const markers = [];
let markerIndex = 0;
btnAddMarker.addEventListener('click', () => {
if (map && instance) {
if (markers.length === 0) {
markerLayer = new BaseLayer_1.default();
map.add(markerLayer);
}
const bounds = map.getBounds();
const lng = Math.random() * (bounds[0][0] - bounds[1][0]) + bounds[1][0];
const lat = Math.random() * (bounds[0][1] - bounds[1][1]) + bounds[1][1];
const marker = new BaseMarker_1.default([lng, lat]);
marker.dom.style.backgroundColor = '#FFFFFF';
marker.dom.style.padding = '20px';
marker.dom.innerText = `${markerIndex}`;
markerIndex += 1;
markers.push(marker);
if (markerLayer)
markerLayer.add(marker);
}
});
btnRemoveMarker.addEventListener('click', () => {
if (map && markerLayer && markers.length > 0) {
const marker = markers.shift();
if (marker)
markerLayer.remove(marker);
if (markers.length === 0) {
map.remove(markerLayer);
}
}
});
}
// test: threeLayer
const btnAddPolygon = document.getElementById('btnAddPolygon');
const btnRemovePolygon = document.getElementById('btnRemovePolygon');
if (btnAddPolygon && btnRemovePolygon) {
let threeLayer = null;
let show = false;
btnAddPolygon.addEventListener('click', () => {
if (!show && map) {
threeLayer = new ThreeLayer_1.default();
const polygon = new PolygonObject_1.default({
fill: {
color: 0x1199ff,
opacity: 0.4,
},
border: {
color: 0x1199ff,
},
polygonGeoJson: {
type: 'Polygon',
coordinates: [
[
[113.04, 23.09],
[113.06, 23.09],
[113.06, 23.12],
[113.04, 23.12],
],
],
},
});
threeLayer.add(polygon);
map.add(threeLayer);
show = true;
}
});
btnRemovePolygon.addEventListener('click', () => {
if (show && threeLayer && map) {
map.remove(threeLayer);
threeLayer.destroy();
threeLayer = null;
show = false;
}
});
}
// test: heatmap
const btnAddHeatmap = document.getElementById('btnAddHeatmap');
if (btnAddHeatmap) {
let heatmapLayer = null;
let show = false;
btnAddHeatmap.addEventListener('click', () => {
if (map) {
if (show) {
if (heatmapLayer) {
map.remove(heatmapLayer);
heatmapLayer.destroy();
heatmapLayer = null;
}
show = false;
}
else {
heatmapLayer = new ThreeHeatmapLayer_1.default({
minZoom: 10,
maxZoom: 13,
data: gaode_heatmap_data_1.default,
});
map.add(heatmapLayer);
show = true;
}
}
});
}
});
}());