Openlayers+EasyUI Tree 동적 구현 그래 픽 제어
5703 단어 OpenlayersEasyUITree그래 픽 컨트롤
기능 소개
주요 기능
openlayers 3.0 과 easyUI tree 기능 에 따라 그래 픽 디 스 플레이 제어 기능 을 실현 하고 서브 노드 에 이 르 러 하나의 그래 픽 디 스 플레이 를 실현 하 며 부모 노드 는 모든 그래 픽 디 스 플레이 를 실현 합 니 다.
페이지 디 스 플레이
주 코드
HTML+CSS
#xuanfu1 {
position: absolute;
top: 50px;
right: 40px;
background-color: rgba(134,149,237,0.7);
width: 170px;
height: 300px;
z-index: 1;
}
<div id="main">
<div id="xuanfu1">
<ul id="tt" class="easyui-tree" data-options="checkbox:true"></ul>
</div>
<div id="map" style="height: 100%;width:100%;position:relative;background:#ffffff"></div>
</div>
JS
$(document).ready(function () {
$.ajax({
url: "TCKZDataQuery",
success: function (data) {
var datatrans= JSON.parse(data);
var dataArr = datatrans.rows;
CreatTree(dataArr); //
AddLayers(dataArr); //
},
});
TCKZguanlian(); //
})
//----------- ----------
function CreatTree(dataArr) {
$('#tt').tree({
data: [{
id: 1,
text: ' ',
state: 'open',
}, {
id: 2,
text: ' ',
state: 'open',
children: [{
id: 21,
text: ' ',
checked: true,
}, {
id: 22,
text: ' ',
checked: true,
}]
}, {
id: 3,
text: ' ',
checked: true,
}
]
});
var node = $('#tt').tree('find', 1);
var nodes = [{ id: '11', text: ' ', checked: true }];
if (node) {
for (i = 0; i < dataArr.length; i++) {
var kejian;
if (dataArr[i].VISIBLE == 'true') {
kejian = true;
} else {
kejian = false;
}
nodes.push({ id: dataArr[i].ID, text: dataArr[i].TCM, checked: kejian });
}
$('#tt').tree('append', {
parent: node.target,
data: nodes
});
}
}
//----------- ------------
function TCKZguanlian(){
$("#tt").tree({
onCheck: function (node) {
var nodechi = $('#tt').tree('find', node.id);
var nodechildren = $('#tt').tree("getChildren", nodechi.target);
var AllLayers = map.getLayers().a;
if (nodechildren == null || nodechildren=='') { //
for (i = 0; i < AllLayers.length; i++) {
var tcname1 = node.text;
var tcname2 = AllLayers[i].get('title');
if (tcname1 == tcname2) {
AllLayers[i].setVisible(node.checked);
}
}
} else { //
for (j = 0; j < nodechildren.length; j++) {
var tcname1 = nodechildren[j].text;
for (i = 0; i < AllLayers.length; i++) {
var tcname2 = AllLayers[i].get('title');
if (tcname1 == tcname2) {
AllLayers[i].setVisible(node.checked);
}
}
}
}
}
})
}
//
var map = new ol.Map({
controls: ol.control.defaults({
attribution: false
}).extend([
//
new ol.control.MousePosition({
projection: 'EPSG:4326',
coordinateFormat: ol.coordinate.createStringXY(5)//
}),
new ol.control.OverviewMap(),//
new ol.control.ScaleLine(),//
new ol.control.ZoomSlider(),//
]),
target: 'map',
layers: [
//
new ol.layer.Tile({
title: ' ', // wms ,geoserver
visible: true,
source: new ol.source.TileWMS({
url: 'http://127.0.0.1:8085/geoserver/lzjgjt/wms',
params: {
'FORMAT': 'image/png',
'VERSION': '1.1.1',
tiled: true,
"LAYERS": 'lzjgjt:xianlu_polyline',
"exceptions": 'application/vnd.ogc.se_inimage',
tilesOrigin: 93.408493 + "," + 32.439911
}
})
}),
//
new ol.layer.Tile({
title: ' ',
visible: true,
source: new ol.source.TileWMS({
url: 'http://127.0.0.1:8085/geoserver/lzjgjt/wms',
params: {
'FORMAT': 'image/png',
'VERSION': '1.1.1',
tiled: true,
"LAYERS": 'lzjgjt:chezhan_point',
"exceptions": 'application/vnd.ogc.se_inimage',
tilesOrigin: 93.487889 + "," + 32.441091
}
})
}),
],
view: new ol.View({
center: ol.proj.fromLonLat([104.06684, 34.39373]),
zoom: 6,
//
minZoom: 4,
maxZoom: 16,
})
});
C#
#region
public ActionResult TCKZDataQuery()
{
string sql = " select * from TUCENG_DIC t ";
string jsonData = GetJeJsonData(db.Database.Connection.ConnectionString, sql, Request);
return Content(jsonData);
}
#endregion
그래 픽 데이터 형식이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
React가 지원되지 않는 UI 라이브러리에서도 구성 요소로 그리기캔버스에서 그림과 도형을 그릴 수 있지만, 캔버스에서 Element을 그릴 수 있는 Overlay 기능이 있습니다. 다만, 오픈라이어스는 리액트를 지원하지 않기 때문에 일반적으로 설치하면 document.create...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.