GIS-ArcGIS 与 ThreeJs交互联动
交互 ArcGIS 联动 GIS
2023-09-11 14:17:09 时间
一、从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);
}
};
相关文章
- jq的ajax交互封装
- 使用Exchanger实现两个线程之间的数据交互
- 交互设计师:拒绝纯加法、拒绝自我妥协
- html父子页面(弹框)的实现和交互[通信]
- 〖Python 数据库开发实战 - Python与MySQL交互篇④〗- 数据库连接池技术
- 〖Python 数据库开发实战 - Python与Redis交互篇⑯〗- 综合案例 - 新闻管理系统第二阶段完结 - “app.py“ 模块收尾及案例演示
- 现实交互动作和现实环境交互的魅力
- css定位实现星级展示没有交互
- 前后台交互经常使用的技术汇总(后台:Java技术,前台:Js或者Jquery)
- 深入浅出matplotlib(71): 界面交互之按钮
- webshell后门中执行交互命令看到的sysmon数据采集和检测
- 2020年的UWP(5)——UWP和Desktop Extension的双向交互