GIS-ArcGIS 与 ThreeJs交互联动

一、从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);

}

};