一、從GIS觸發Three場景
MapFeatureLayer.on("click", function (evt) {
graphicsLayerOfMouse.clear();
var HighlightGraphic = new Graphic(evt.graphic.geometry, highlightSymbol);
graphicsLayerOfMouse.add(HighlightGraphic);
OpenInfoDlg(evt);
var graphicObject = evt.graphic;
Find3DSpaceObjects(graphicObject);
});
//根據地圖拾取的目標，在三維空間中查詢對應四至體
Find3DSpaceObjects = function (graphicObject) {
try {
if (SelectedResults == undefined) {
for (var i = 0; i < MapFeatureLayer.graphics.length; i++) {
var feature = MapFeatureLayer.graphics[i];
if (graphicObject.attributes["FID"] == feature.attributes["FID"]) {
objects[i].material.color.setHex(Math.random() * 0xffffff);
break;
}
}
}
else {
for (var i = 0; i < SelectedResults.length; i++) {
var curObject = SelectedResults[i];
var feature = curObject.feature;
if (graphicObject.attributes["FID"] == feature.attributes["FID"]) {
objects[i].material.color.setHex(Math.random() * 0xffffff);
break;
}
}
}
} catch (error) {
console.log(error);
}
}
SelectedResults 是查詢出來在地圖上顯示的要素類數組
MapFeatureLayer.graphics 是缺省加載FeatureLayer返回的要素
二、從Three場景觸發GIS
為ThreeJs添加鼠標點擊事件
document.addEventListener('mousedown', onDocumentMouseDown, false);
事件函數體：
var SelectedIndex = -1;
function onDocumentMouseDown(event) {
if (SelectedIndex != -1) {
restoreObj(SelectedIndex);
}
if (event.target == renderer.domElement) {
event.preventDefault();
mouse.x = (event.offsetX / renderer.domElement.clientWidth) * 2 - 1;
mouse.y = - (event.offsetY / renderer.domElement.clientHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
var intersects = raycaster.intersectObjects(objects);
if (intersects.length > 0) {
intersects[0].object.material.color.setHex(Math.random() * 0xffffff);
if (intersects[0].object.DataObject != undefined) {
OpenInfoDlgShow(intersects[0].object.DataObject);
try {
SelectedIndex = intersects[0].object.DataIndex;
showObj(SelectedIndex);
} catch (error) {
console.log(error);
}
}
else {
console.log("未綁定數據");
}
}
}
}
對應的地圖方法：
showObj = function (index) {
try {
if (SelectedResults != undefined) {
var curObject = SelectedResults[index];
var feature = curObject.feature;
console.log(curObject);
var HighlightGraphic = new Graphic(feature.geometry, highlightSymbol);
labelLayer.add(HighlightGraphic);
var pt = feature.geometry;
var font = new esri.symbol.Font();
font.setSize("10pt");
font.setWeight(esri.symbol.Font.WEIGHT_BOLD);
var text = new esri.symbol.TextSymbol(feature.attributes.Name);
text.setAlign(esri.symbol.TextSymbol.ALIGN_START);
text.setFont(font);
text.setOffset(2, -15);
text.setColor(new dojo.Color([255, 0, 0, 1]));
var labelGraphic = new esri.Graphic(pt, text);
labelLayer.add(labelGraphic);
}
else {
MapFeatureLayer.graphics[index].symbol = highlightSymbol;
MapFeatureLayer.redraw();
var pt = ReservoirMapLayer.graphics[index].geometry;
var font = new esri.symbol.Font();
font.setSize("10pt");
font.setWeight(esri.symbol.Font.WEIGHT_BOLD);
var text = new esri.symbol.TextSymbol(MapFeatureLayer.graphics[index].attributes.Name);
text.setAlign(esri.symbol.TextSymbol.ALIGN_START);
text.setFont(font);
text.setOffset(2, -15);
text.setColor(new dojo.Color([255, 0, 0, 1]));
var labelGraphic = new esri.Graphic(pt, text);
labelLayer.add(labelGraphic);
}
} catch (error) {
console.log(error);
}
};
restoreObj = function (index) {
try {
labelLayer.clear();
MapFeatureLayer.graphics[index].symbol = symbolOfDefaultReservoir;
MapFeatureLayer.redraw();
} catch (error) {
console.log(error);
}
};