@orca-fe/x-map
Version:
166 lines (165 loc) • 6.94 kB
JavaScript
import { __awaiter } from "tslib";
import Map from './core/Map';
import BaseLayer from './layers/BaseLayer';
import ThreeLayer from './layers/ThreeLayer';
import AMapInstance from './instance/AMapInstance';
import loadScript from './utils/load-script';
import MapBoxGLInstance from './instance/MapBoxGLInstance';
import BaseMarker from './layers/markers/BaseMarker';
import PolygonObject from './layers/markers/PolygonObject';
import ThreeHeatmapLayer from './layers/ThreeHeatmapLayer';
import heatmapData from './gaode-heatmap-data';
(function () {
return __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', () => __awaiter(this, void 0, void 0, function* () {
if (mapDom) {
const gaode = false;
if (gaode) {
yield loadScript('http://webapi.amap.com/maps?v=1.4.15&key=fc4ade9c195bc7ff4f45f5b90c438328');
instance = new AMapInstance();
}
else {
instance = new MapBoxGLInstance({
style: 'mapbox://styles/nicokam/ckrwwvr9345rb17qk4aezrmnv',
accessToken: 'pk.eyJ1Ijoibmljb2thbSIsImEiOiJjazA3dWNwdGs0MnV5M251dDhqN3FhNGV6In0.Wtu8Lw9TzpEpYbb1TY_XGw',
});
}
map = new Map(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();
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([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();
const polygon = new PolygonObject({
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({
minZoom: 10,
maxZoom: 13,
data: heatmapData,
});
map.add(heatmapLayer);
show = true;
}
}
});
}
});
}());