cione-comp-lib
Version:
`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`
133 lines (132 loc) • 5.49 kB
JavaScript
import "../../../../echarts/lib/echarts.mjs";
import Maptalks3DLayer from "./Maptalks3DLayer.mjs";
import SceneHelper from "../common/SceneHelper.mjs";
import graphicGL from "../../util/graphicGL.mjs";
import displayShadowGLSL from "../../util/shader/displayShadow.glsl.mjs";
import ComponentView from "../../../../echarts/lib/view/Component.mjs";
graphicGL.Shader.import(displayShadowGLSL);
var Maptalks3DView = ComponentView.extend({
type: "maptalks3D",
__ecgl__: true,
init: function(ecModel, api) {
this._groundMesh = new graphicGL.Mesh({
geometry: new graphicGL.PlaneGeometry(),
material: new graphicGL.Material({
shader: new graphicGL.Shader({
vertex: graphicGL.Shader.source("ecgl.displayShadow.vertex"),
fragment: graphicGL.Shader.source("ecgl.displayShadow.fragment")
}),
depthMask: false
}),
renderOrder: -100,
culling: false,
castShadow: false,
$ignorePicking: true,
renderNormal: true
});
},
_initMaptalksLayer: function(mapbox3DModel, api) {
var zr = api.getZr();
this._zrLayer = new Maptalks3DLayer("maptalks3D", zr, mapbox3DModel.get("center"), mapbox3DModel.get("zoom"));
zr.painter.insertLayer(-1e3, this._zrLayer);
this._lightRoot = new graphicGL.Node();
this._sceneHelper = new SceneHelper(this._lightRoot);
this._sceneHelper.initLight(this._lightRoot);
var maptalks2 = this._zrLayer.getMaptalks();
var dispatchInteractAction = this._dispatchInteractAction.bind(this, api, maptalks2);
["zoomend", "zooming", "zoomstart", "dragrotating", "pitch", "pitchend", "movestart", "moving", "moveend", "resize", "touchstart", "touchmove", "touchend", "animating"].forEach(function(eName) {
maptalks2.on(eName, dispatchInteractAction);
});
},
render: function(maptalks3DModel, ecModel, api) {
if (!this._zrLayer) {
this._initMaptalksLayer(maptalks3DModel, api);
}
var mtks = this._zrLayer.getMaptalks();
var urlTemplate = maptalks3DModel.get("urlTemplate");
var baseLayer = mtks.getBaseLayer();
if (urlTemplate !== this._oldUrlTemplate) {
if (!baseLayer) {
baseLayer = new maptalks.TileLayer("maptalks-echarts-gl-baselayer", {
urlTemplate,
subdomains: ["a", "b", "c"],
attribution: maptalks3DModel.get("attribution")
});
mtks.setBaseLayer(baseLayer);
} else {
baseLayer.setOptions({
urlTemplate,
attribution: maptalks3DModel.get("attribution")
});
}
}
this._oldUrlTemplate = urlTemplate;
mtks.setCenter(maptalks3DModel.get("center"));
mtks.setZoom(maptalks3DModel.get("zoom"), {
animation: false
});
mtks.setPitch(maptalks3DModel.get("pitch"));
mtks.setBearing(maptalks3DModel.get("bearing"));
maptalks3DModel.setMaptalks(mtks);
var coordSys = maptalks3DModel.coordinateSystem;
coordSys.viewGL.scene.add(this._lightRoot);
coordSys.viewGL.add(this._groundMesh);
this._updateGroundMesh();
this._sceneHelper.setScene(coordSys.viewGL.scene);
this._sceneHelper.updateLight(maptalks3DModel);
coordSys.viewGL.setPostEffect(maptalks3DModel.getModel("postEffect"), api);
coordSys.viewGL.setTemporalSuperSampling(maptalks3DModel.getModel("temporalSuperSampling"));
this._maptalks3DModel = maptalks3DModel;
},
afterRender: function(maptalks3DModel, ecModel, api, layerGL) {
var renderer = layerGL.renderer;
this._sceneHelper.updateAmbientCubemap(renderer, maptalks3DModel, api);
this._sceneHelper.updateSkybox(renderer, maptalks3DModel, api);
maptalks3DModel.coordinateSystem.viewGL.scene.traverse(function(mesh) {
if (mesh.material) {
mesh.material.define("fragment", "NORMAL_UP_AXIS", 2);
mesh.material.define("fragment", "NORMAL_FRONT_AXIS", 1);
}
});
},
updateCamera: function(maptalks3DModel, ecModel, api, payload) {
maptalks3DModel.coordinateSystem.setCameraOption(payload);
this._updateGroundMesh();
api.getZr().refresh();
},
_dispatchInteractAction: function(api, maptalks2, maptalks3DModel) {
api.dispatchAction({
type: "maptalks3DChangeCamera",
pitch: maptalks2.getPitch(),
zoom: getMapboxZoom(maptalks2.getResolution()) + 1,
center: maptalks2.getCenter().toArray(),
bearing: maptalks2.getBearing(),
maptalks3DId: this._maptalks3DModel && this._maptalks3DModel.id
});
},
_updateGroundMesh: function() {
if (this._maptalks3DModel) {
var coordSys = this._maptalks3DModel.coordinateSystem;
var pt = coordSys.dataToPoint(coordSys.center);
this._groundMesh.position.set(pt[0], pt[1], -1e-3);
var plane = new graphicGL.Plane(new graphicGL.Vector3(0, 0, 1), 0);
var ray1 = coordSys.viewGL.camera.castRay(new graphicGL.Vector2(-1, -1));
var ray2 = coordSys.viewGL.camera.castRay(new graphicGL.Vector2(1, 1));
var pos0 = ray1.intersectPlane(plane);
var pos1 = ray2.intersectPlane(plane);
var scale = pos0.dist(pos1) / coordSys.viewGL.rootNode.scale.x;
this._groundMesh.scale.set(scale, scale, 1);
}
},
dispose: function(ecModel, api) {
if (this._zrLayer) {
this._zrLayer.dispose();
}
api.getZr().painter.delLayer(-1e3);
}
});
const MAX_RES = 2 * 6378137 * Math.PI / (256 * Math.pow(2, 20));
function getMapboxZoom(res) {
return 19 - Math.log(res / MAX_RES) / Math.LN2;
}
export { Maptalks3DView as default };