@orca-fe/x-map
Version:
302 lines (301 loc) • 13.6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const three_1 = require("three");
const Map_1 = tslib_1.__importDefault(require("./core/Map"));
const BaseLayer_1 = tslib_1.__importDefault(require("./layers/BaseLayer"));
const PointMarker_1 = tslib_1.__importDefault(require("./layers/markers/PointMarker"));
const ThreeLayer_1 = tslib_1.__importDefault(require("./layers/ThreeLayer"));
const SvgLayer_1 = tslib_1.__importDefault(require("./layers/SvgLayer"));
const SvgPolyline_1 = tslib_1.__importDefault(require("./layers/svg/SvgPolyline"));
const SvgArcLine_1 = tslib_1.__importDefault(require("./layers/svg/SvgArcLine"));
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 BuildingObject_1 = tslib_1.__importDefault(require("./layers/markers/BuildingObject"));
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"));
const TextureObject_1 = tslib_1.__importDefault(require("./layers/markers/TextureObject"));
const coord_1 = require("./utils/coord");
const IconObject_1 = tslib_1.__importDefault(require("./layers/markers/IconObject"));
(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,
};
if (mapDom) {
const gaode = false;
let instance;
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',
});
}
const centerLng = 113.03;
const centerLat = 23.05;
const lngLimit = 100;
const latLimit = 20.4;
const centerMercator = (0, coord_1.lonLat2Mercator)([centerLng, centerLat]);
const map = new Map_1.default(mapDom, {
limit: [
[centerLng - lngLimit, centerLat - latLimit],
[centerLng + lngLimit, centerLat + latLimit],
],
motion: true,
mapInstance: instance,
// mapInstance: new EmptyInstance(),
defaultViewport: viewport,
threeCenter: [113.203775, 23.109852],
});
const layer = new BaseLayer_1.default();
mapDom.addEventListener('click', (e) => {
console.warn(map.pixelToLnglat([e.clientX, e.clientY]));
});
// for (let lng = 0; lng < 40 * gap; lng += gap)
// for (let lat = 0; lat < 20 * gap; lat += gap) {
// const p = new PointMarker(mercator2LonLat([lng, lat]));
// layer.add(p);
// }
// }
const p = new PointMarker_1.default([121, 31]);
layer.add(p);
map.add(layer);
const threeLayer = new ThreeLayer_1.default();
map.add(threeLayer);
// polygon
const polygon = new PolygonObject_1.default({
pointerEvents: true,
z: 200,
polygonGeoJson: {
type: 'Polygon',
coordinates: [
[
[113 + 0, 23 + 0],
[113 + 0, 23 + 1],
[113 + 1, 23 + 1],
[113 + 1, 23 + 0],
[113 + 0, 23 + 0],
],
],
},
fill: {
color: 0xffcccc,
opacity: 0.3,
},
});
polygon.on('mouseenter', () => {
polygon.updateFill({ color: 0xffcccc, opacity: 1 });
});
polygon.on('mouseleave', () => {
polygon.updateFill({ color: 0xffcccc, opacity: 0.3 });
});
// threeLayer.add(polygon);
const textureSize = 100000;
// Texture
fetch('/nanhai-border-simple.json')
.then(resp => resp.json())
.then((json) => {
const hole = new three_1.Shape();
json.geometry.coordinates[0].forEach((points, index) => {
let [x, y] = (0, coord_1.lonLat2Mercator)(points);
x -= centerMercator[0];
y -= centerMercator[1];
x /= textureSize * 2;
y /= textureSize * 2;
if (index === 0)
hole.moveTo(x, y);
else
hole.lineTo(x, y);
});
const shape = new three_1.Shape();
shape.moveTo(-0.5, -0.5);
shape.lineTo(-0.5, 0.5);
shape.lineTo(0.5, 0.5);
shape.lineTo(0.5, -0.5);
shape.lineTo(-0.5, -0.5);
shape.holes.push(hole);
const texture = new three_1.TextureLoader().load('/map-cross-line.png');
texture.wrapS = three_1.RepeatWrapping;
texture.wrapT = three_1.RepeatWrapping;
texture.center = new three_1.Vector2(0.5, 0.5);
texture.repeat = new three_1.Vector2((textureSize * 2) / 10000, (textureSize * 2) / 10000);
const textureObject = new TextureObject_1.default({
geometry: new three_1.ShapeBufferGeometry(shape),
src: texture,
z: 0,
bounds: [
(0, coord_1.mercator2LonLat)([centerMercator[0] - textureSize, centerMercator[1] - textureSize]),
(0, coord_1.mercator2LonLat)([centerMercator[0] + textureSize, centerMercator[1] + textureSize]),
],
});
threeLayer.add(textureObject);
});
// 加载 建筑物
// fetch('/building.json').then(resp => resp.json())
// .then((json) => {
// const res = json.features.slice(0).map(({ geometry, properties }) => ({
// path: geometry.coordinates[0].map(gcj02towgs84).map(lonLat2Mercator),
// height: properties.floor,
// }));
// const buildings = new BuildingObject({
// buildings: res,
// fill: {
// color: 0x58699b,
// // color: 0xff0000,
// opacity: 0.8,
// },
// });
// threeLayer.add(buildings);
// });
fetch('/china.txt')
.then(resp => resp.text())
.then((res) => {
const list = res.split('|').map(p => ({
height: 10,
path: p.split(';').map((p) => {
const [lng, lat] = p.split(',');
const point = [Number(lng), Number(lat)];
return point;
}),
}));
const buildings = new BuildingObject_1.default({
pointerEvents: false,
// polygonGeoJson: {
// type: 'MultiPolygon',
// coordinates: list,
// },
buildings: list,
fill: {
color: 0x1199ff,
opacity: 0.2,
},
});
threeLayer.add(buildings);
});
// const p2 = [
// new PointMarker(limit[0] as Point, { color: 'blue', size: '50' }),
// new PointMarker(limit[1] as Point, { color: 'blue', size: '50' }),
// ];
// const p4 = [new PointMarker([0, 0]), new PointMarker([0, 0]), new PointMarker([0, 0]), new PointMarker([0, 0])];
// p2.forEach((p) => {
// layer.add(p);
// });
// p4.forEach((p) => {
// layer.add(p);
// });
// setInterval(() => {
// const { bounds } = map.controller.getLimitViewport();
// p2[0].setPosition(bounds[0] as [number, number]);
// p2[1].setPosition(bounds[1] as [number, number]);
// // p4[0].setPosition(r[0] as [number, number]);
// // p4[1].setPosition(r[1] as [number, number]);
// // p4[2].setPosition(r[2] as [number, number]);
// // p4[3].setPosition(r[3] as [number, number]);
// map.updateLayers();
// }, 3000);
// svg
const svgLayer = new SvgLayer_1.default();
const svgPolygon = new SvgPolyline_1.default({
path: [
[121.1, 31.1],
[121.2, 31.2],
[121.3, 31.1],
],
});
const svgLine = new SvgArcLine_1.default({
from: [120, 30],
to: [121, 31],
style: {
stroke: '#FF0000',
},
});
svgLayer.add(svgPolygon);
svgLayer.add(svgLine);
// map.add(svgLayer);
// window.c = map;
const btnFlyTo = document.getElementById('btnFlyTo');
if (btnFlyTo) {
btnFlyTo.addEventListener('click', () => {
// map.panTo([121.1, 31.1]);
map.flyTo({
lng: 110 + Math.random() * 10,
lat: 25 + Math.random() * 10,
zoom: 2 + Math.random() * 6,
rotate: Math.random() * 360,
pitch: Math.random() * 60,
});
// map.mapInstance.map.flyTo({
// center: [110 + Math.random() * 10, 25 + Math.random() * 10],
// zoom: 6 + Math.random() * 6,
// bearing: Math.random() * 360,
// pitch: Math.random() * 60,
// });
});
}
const heatmapLayer = new ThreeHeatmapLayer_1.default({
minZoom: 10,
maxZoom: 13,
data: gaode_heatmap_data_1.default,
});
heatmapLayer.setOpacity(0.8);
// map.add(heatmapLayer);
const iconObject = new IconObject_1.default({
src: '/icon.png',
checkedSrc: '/icon-check.png',
hoverSrc: '/icon-check.png',
width: 50,
height: 50,
minZoom: 10,
maxZoom: 18,
pointerEvents: true,
z: 2,
data: new Array(10000)
.fill(0)
.map((_, index) => [Math.random() * 5 + viewport.center[0], Math.random() * 5 + viewport.center[1]]),
});
// iconObject.on('click', (event, intersection) => {
// console.log(event, intersection, intersection.instanceId);
// });
threeLayer.add(iconObject);
threeLayer.startAnimate();
const btnTest = document.getElementById('btnTest');
if (btnTest) {
const polygon = new PolygonObject_1.default({
border: {
color: 0x1199ff,
opacity: 1,
},
});
threeLayer.add(polygon);
btnTest.addEventListener('click', () => {
const bounds = map.getBounds();
const coordinates = [
[
[bounds[0][0], bounds[0][1]],
[bounds[0][0], bounds[1][1]],
[bounds[1][0], bounds[1][1]],
[bounds[1][0], bounds[0][1]],
[bounds[0][0], bounds[0][1]],
],
];
polygon.setPolygon({
type: 'Polygon',
coordinates,
});
});
}
}
});
}());