@orca-fe/x-map
Version:
146 lines (145 loc) • 6.33 kB
JavaScript
import { __awaiter } from "tslib";
import { PointLight, PointLightHelper, RepeatWrapping, TextureLoader } from 'three';
import Map from './core/Map';
import EmptyInstance from './instance/EmptyInstance';
import yichangeData from './example/yichangData';
import ThreeLayer from './layers/ThreeLayer';
import ExtrudePolygonObject from './layers/markers/ExtrudePolygonObject';
import BaseMarker from './layers/markers/BaseMarker';
import BaseLayer from './layers/BaseLayer';
(function () {
var _a;
return __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(mapDom, {
motion: true,
mapInstance: new EmptyInstance(),
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();
map.add(threeLayer);
const markerLayer = new BaseLayer();
map.add(markerLayer);
// 增加平行光源
threeLayer.three.addDirectionalLight({
color: 0xeeefef,
direction: [-200000, -200000, 500000],
intensity: 1,
});
const loader = new TextureLoader();
// 地面材质
const ground = loader.load('/ground.png');
ground.repeat.set(0.000005, 0.000005);
ground.wrapT = RepeatWrapping;
ground.wrapS = RepeatWrapping;
// 地面地型材质
const groundBump = loader.load('/ground-bump.png');
groundBump.repeat.set(0.000005, 0.000005);
groundBump.wrapT = RepeatWrapping;
groundBump.wrapS = RepeatWrapping;
// 侧边材质
const sideTexture = loader.load('/side-texture.png');
sideTexture.repeat.set(-1 / 13000, -1 / 13000);
sideTexture.wrapT = RepeatWrapping;
sideTexture.wrapS = RepeatWrapping;
// 地理围栏材质
const wallTexture = loader.load('/wall.png');
wallTexture.wrapT = RepeatWrapping;
wallTexture.wrapS = RepeatWrapping;
wallTexture.repeat.set(-1 / 3000, -1 / 3000);
// 增加一个点光源
const pointLight = new PointLight(0xbbccaa, 1, 10000);
pointLight.position.set(-200000, 200000, 100000);
threeLayer.three.scene.add(pointLight);
// 点光源的视觉提示（如果需要隐藏点光源那个菱形，则不要加入场景）
const pointLightHelper = new PointLightHelper(pointLight, 10000);
threeLayer.three.scene.add(pointLightHelper);
yichangeData.slice(0).forEach((distData) => {
const polygon = new ExtrudePolygonObject({
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(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 });
});
});
}
});
}());