@orca-fe/x-map
Version:
148 lines (147 loc) • 6.75 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 EmptyInstance_1 = tslib_1.__importDefault(require("./instance/EmptyInstance"));
const yichangData_1 = tslib_1.__importDefault(require("./example/yichangData"));
const ThreeLayer_1 = tslib_1.__importDefault(require("./layers/ThreeLayer"));
const ExtrudePolygonObject_1 = tslib_1.__importDefault(require("./layers/markers/ExtrudePolygonObject"));
const BaseMarker_1 = tslib_1.__importDefault(require("./layers/markers/BaseMarker"));
const BaseLayer_1 = tslib_1.__importDefault(require("./layers/BaseLayer"));
(function () {
var _a;
return tslib_1.__awaiter(this, void 0, void 0, function* () {
const mapDom = document.getElementById('map');
const viewport = {
lng: 111.318718,
lat: 30.519864,
pitch: 50,
rotate: -30,
zoom: 9,
};
if (mapDom) {
const map = new Map_1.default(mapDom, {
motion: true,
mapInstance: new EmptyInstance_1.default(),
defaultViewport: viewport,
threeCenter: [viewport.lng, viewport.lat],
minZoom: 8,
maxZoom: 11,
limit: [
[109, 29.5],
[113, 31.5],
],
});
(_a = document.getElementById('btnReset')) === null || _a === void 0 ? void 0 : _a.addEventListener('click', () => {
map.flyTo(viewport);
});
const threeLayer = new ThreeLayer_1.default();
map.add(threeLayer);
const markerLayer = new BaseLayer_1.default();
map.add(markerLayer);
// 增加平行光源
threeLayer.three.addDirectionalLight({
color: 0xeeefef,
direction: [-200000, -200000, 500000],
intensity: 1,
});
const loader = new three_1.TextureLoader();
// 地面材质
const ground = loader.load('/ground.png');
ground.repeat.set(0.000005, 0.000005);
ground.wrapT = three_1.RepeatWrapping;
ground.wrapS = three_1.RepeatWrapping;
// 地面地型材质
const groundBump = loader.load('/ground-bump.png');
groundBump.repeat.set(0.000005, 0.000005);
groundBump.wrapT = three_1.RepeatWrapping;
groundBump.wrapS = three_1.RepeatWrapping;
// 侧边材质
const sideTexture = loader.load('/side-texture.png');
sideTexture.repeat.set(-1 / 13000, -1 / 13000);
sideTexture.wrapT = three_1.RepeatWrapping;
sideTexture.wrapS = three_1.RepeatWrapping;
// 地理围栏材质
const wallTexture = loader.load('/wall.png');
wallTexture.wrapT = three_1.RepeatWrapping;
wallTexture.wrapS = three_1.RepeatWrapping;
wallTexture.repeat.set(-1 / 3000, -1 / 3000);
// 增加一个点光源
const pointLight = new three_1.PointLight(0xbbccaa, 1, 10000);
pointLight.position.set(-200000, 200000, 100000);
threeLayer.three.scene.add(pointLight);
// 点光源的视觉提示（如果需要隐藏点光源那个菱形，则不要加入场景）
const pointLightHelper = new three_1.PointLightHelper(pointLight, 10000);
threeLayer.three.scene.add(pointLightHelper);
yichangData_1.default.slice(0).forEach((distData) => {
const polygon = new ExtrudePolygonObject_1.default({
pointerEvents: true,
z: 10,
fill: {
// 地面的底色
color: 0x223344,
opacity: 1,
},
border: {
// 区域边界的底色
color: 0x66ccff,
opacity: 0.9,
},
// 多边形数据
polygonGeoJson: distData.geometry,
// 地面材质配置
polygonMaterialParameters: {
map: ground,
emissive: 0x112233,
bumpMap: groundBump,
},
// 侧面材质配置
polygonSideMaterialParameters: {
color: 0xaaccff,
emissive: 0x000000,
map: sideTexture,
opacity: 1,
},
// 厚度相关配置
extrudeOptions: {
depth: 13000,
bevelEnabled: false,
},
// 墙体材质配置
wall: {
opacity: 0.5,
height: 3000,
texture: wallTexture,
},
});
threeLayer.add(polygon);
// 地名
const div = document.createElement('div');
div.innerText = distData.properties.name;
div.style.padding = '4px 12px';
div.style.backgroundColor = '#004279';
div.style.color = '#ffffff';
div.style.border = '1px solid #1199ff';
div.style.whiteSpace = 'nowrap';
div.style.position = 'absolute';
div.style.transform = 'translate(-50%, -100%)';
const marker = new BaseMarker_1.default(distData.properties.centroid);
marker.dom.appendChild(div);
markerLayer.add(marker);
// 鼠标事件
polygon.on('click', () => {
console.warn('clicked', distData);
});
polygon.on('mouseenter', () => {
div.style.backgroundColor = '#166eb6';
polygon.updateFill({ color: 0xaaccff, opacity: 1 }, { color: 0xffffff, opacity: 1 });
});
polygon.on('mouseleave', () => {
div.style.backgroundColor = '#004279';
polygon.updateFill({ color: 0x223344, opacity: 1 }, { color: 0xaaccff, opacity: 1 });
});
});
}
});
}());