Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
this.layerSelectObj = layerSelectObj;
layerSelectControl.appendChild(layerSelectTool);
// 图层选中div
let layerSelectName = layerSelectTool.children[1].children[0];
layerSelectName.id = 'layerSelectName';
// 图层下拉框select
let layersSelect = layerSelectTool.children[1].children[2].children[0].children[0];
layersSelect.id = 'layersSelect';
// ISOLINE
// 提取字段
let div = L.DomUtil.create('div', 'component-analysis__container__analysistype', analysisTypeContainer);
let isolineDiv = L.DomUtil.create('div', 'component-clientcomputation__isoline', div);
let fieldsOptions = {
'optionsArr': [''],
'labelName': Lang.i18n('text_label_extractField'),
'optionsClickCb': this.fieldsSelectOnchange
};
let fieldsSelectControl = L.DomUtil.create('div', 'component-analysis__selecttool', isolineDiv);
let fieldsSelectObj = new Select(fieldsOptions);
let fieldsSelectTool = fieldsSelectObj.getElement();
this.fieldsSelectObj = fieldsSelectObj;
let fieldsSelectName = fieldsSelectTool.children[1].children[0];
fieldsSelectName.id = 'fieldsSelectName';
let fieldsSelect = fieldsSelectTool.children[1].children[2].children[0].children[0];
fieldsSelect.id = 'fieldsSelect';
fieldsSelectControl.appendChild(fieldsSelectTool);
// 提取值
let textareaContainer = L.DomUtil.create('div', 'component-analysis__container', isolineDiv);
let textareaSpan = L.DomUtil.create('span', 'component-textarea__name', textareaContainer);
let analysingContainer = L.DomUtil.create('div', 'component-analysis__analysisbtn--analysing-container hidden', runBtn);
let analysisingBtn = L.DomUtil.create('div', 'component-analysis__analysisbtn--analysising', analysingContainer);
analysisingBtn.style.width = '200px';
let svgContainer = L.DomUtil.create('div', 'component-analysis__svg-container', analysisingBtn);
svgContainer.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="16px" width="16px" class="component-analysis__svg-rotate">
<path d="M 0 0 v -8 A 8 8 0 1 1 -8.00 0 z" transform="translate(8,8)" fill="#FFF" id="ring"></path>
<circle fill="#38ADF5" r="6" cy="8" cx="8"></circle>
<rect style="fill: rgb(255, 255, 255); stroke-width: 0;" height="2" width="2" ry="2" rx="2" y="0" x="8" class="svg-top"></rect>
<rect style="fill: rgb(255, 255, 255); stroke-width: 0;" height="2" width="2" ry="2" rx="2" y="8" x="0" class="svg-left"></rect>
</svg>`;
L.DomUtil.create('span', '', analysisingBtn).innerHTML = Lang.i18n('btn_analyzing');
// 删除按钮
let deleteLayersBtn = L.DomUtil.create('button', 'component-analysis__analysisbtn--analysis component-analysis__analysisbtn--deletelayers', runBtn);
deleteLayersBtn.id = 'deleteLayersBtn';
deleteLayersBtn.innerHTML = Lang.i18n('btn_emptyTheAnalysisLayer');
// 交互
// 弹框
this.messageBox = new MessageBox();
// 数据集下拉框 onchange 事件
this.datasetSelectOnchange = datasetSelectOnchange.bind(this);
function datasetSelectOnchange(option) {
this.messageBox.closeView();
if (this.dataHash) {
weightFieldsSelect.innerHTML = '';
// 获取当前选中数据集类型
let datasetUrl = this.dataHash[option.title];
// 判断当前选中数据集是否支持该选中分析类,并填充分析权重字段
let _me = this;
'spanName': Lang.i18n('text_label_queryRange'),
'value': ''
}];
for (let i in inputOptions) {
this._creatInputBox(inputOptions[i], analysisSelectControl)
}
let queryRangeInput = analysisSelectControl.children[3].children[1];
queryRangeInput.setAttribute('placeholder', Lang.i18n('text_label_queryRangeTips'));
queryRangeInput.title = Lang.i18n('text_label_queryRangeTips');
// 网格大小
let gridSizeUnitSelectOptions = {
'optionsArr': ['Meter', 'Kilometer', 'Yard', 'Foot', 'Mile']
};
let gridSizeOptions = {
'labelName': Lang.i18n('text_label_gridSizeInMeters'),
'selectOptions': gridSizeUnitSelectOptions
};
let gridSizeContainer = this._creatUnitSelectBox(gridSizeOptions, analysisSelectControl);
let gridSizeInput = gridSizeContainer.children[1].children[0];
gridSizeInput.value = '1000';
let gridSizeUnitSelectName = gridSizeContainer.children[1].children[1].children[0].children[0].children[0];
// 搜索半径
let searchRadiusUnitSelectOptions = {
'optionsArr': ['Meter', 'Kilometer', 'Yard', 'Foot', 'Mile']
};
let searchRadiusOptions = {
'labelName': Lang.i18n('text_label_searchRadius'),
'selectOptions': searchRadiusUnitSelectOptions
};
let searchRadiusContainer = this._creatUnitSelectBox(searchRadiusOptions, analysisSelectControl);
_initView: function () {
// 初始化 ViewModel:
this.viewModel = new DataServiceQueryViewModel(this.dataServiceUrl);
this.messageBox = new MessageBox();
// 组件 container
let container = (new CommonContainer({title: Lang.i18n('title_dataServiceQuery')})).getElement();
container.classList.add('component-servicequery__container');
container.children[0].classList.add('component-servicequery__title');
let componentContentContainer = container.children[1];
componentContentContainer.classList.add('component-content--scroll');
componentContentContainer.classList.add('data-services');
// 组件内容 container
let analyusisTypeContainer = L.DomUtil.create('div', 'component-analysis__container', componentContentContainer);
let analysisType = L.DomUtil.create('div', 'component-servicequery__analysistype', analyusisTypeContainer);
let analysisLayer = L.DomUtil.create('div', 'component-analysis__container__analysisLayer', analysisType);
let queryModelOptionsArr, getFeatureModeArr = this.options.getFeatureMode;
// 获取查询模式
if (!getFeatureModeArr || JSON.stringify(getFeatureModeArr) == '{}') {
queryModelOptionsArr = ['ID', 'SQL', 'BOUNDS', 'BUFFER', 'SPATIAL'];
} else {
queryModelOptionsArr = getFeatureModeArr;
let layerSelectName = document.getElementById('layerSelectName');
let analysisMethod = dropDownItems.children[i].getAttribute('data-value');
let currentFillData = {};
switch (analysisMethod) {
case 'buffer':
isolineDiv.classList.add('hidden');
bufferDiv.classList.remove('hidden');
componentContentContainer.style.height = '422px';
resultLayersName.value = Lang.i18n('text_label_buffer') + layerSelectName.title;
currentFillData = this.fillData['point'];
break;
case 'isolines':
isolineDiv.classList.remove('hidden');
bufferDiv.classList.add('hidden');
componentContentContainer.style.height = '712px';
resultLayersName.value = Lang.i18n('text_label_isolines') + layerSelectName.title;
currentFillData = this.fillData['point'];
break;
}
// 清空 layersSelect;
// 清空 layersSelect;
if (this.currentFillData === currentFillData) {
return;
}
layersSelect.innerHTML = '';
if (JSON.stringify(currentFillData) == '{}') {
resultLayersName.value = '';
layerSelectName.title = '';
layerSelectName.innerHTML = '';
return;
}
// 缓冲半径
let bufferDiv = L.DomUtil.create('div', 'component-clientcomputation__buffer hidden', div);
let bufferRadius = L.DomUtil.create('div', 'component-clientcomputation__buffer--radius', bufferDiv);
let bufferRadiusSpan = L.DomUtil.create('span', '', bufferRadius);
bufferRadiusSpan.innerHTML = Lang.i18n('text_label_bufferRadius');
let bufferRadiusDiv = L.DomUtil.create('div', '', bufferRadius);
let bufferRadiusInput = L.DomUtil.create('input', 'buffer-radius-input', bufferRadiusDiv);
bufferRadiusInput.id = 'bufferRadiusInput';
bufferRadiusInput.value = '10';
bufferRadiusInput.setAttribute('placeholder', Lang.i18n('text_label_defaultkilometers'));
let bufferUnit = L.DomUtil.create('div', 'component-clientcomputation__buffer--unit', bufferRadiusDiv);
bufferUnit.id = 'bufferUnit';
// 半径单位选择下拉框
let bufferUnitOptions = {
'optionsArr': [Lang.i18n('text_option_kilometer')],
'labelName': Lang.i18n('text_label_unit')
};
let bufferUnitSelectTool = (new Select(bufferUnitOptions)).getElement();
let bufferUnitSelectName = bufferUnitSelectTool.children[1].children[0];
bufferUnitSelectName.id = 'bufferUnitSelectName';
let bufferUnitSelect = bufferUnitSelectTool.children[1].children[2].children[0].children[0];
bufferUnitSelect.id = 'bufferUnitSelect';
bufferUnitSelectTool.children[0].style.display = 'none';
bufferUnit.appendChild(bufferUnitSelectTool);
// 保留原对象字段属性
let saveFieldDiv = L.DomUtil.create('div', '', bufferRadius);
let saveAttrsContainer = L.DomUtil.create('div', 'component-clientcomputation__buffer--issaveattrs', saveFieldDiv);
saveAttrsContainer.id = 'saveAttrsContainer';
let saveAttrsCheckbox = L.DomUtil.create('div', 'checkbox checkbox-fault', saveAttrsContainer);
saveAttrsCheckbox.id = 'saveAttrsCheckbox';
return;
}
let layserArr = [];
for (let layerName in currentFillData) {
layserArr.push(layerName);
}
layerSelectName.title = layserArr[0];
layerSelectName.innerHTML = layserArr[0];
this._createOptions(layersSelect, layserArr);
// 设置 layer select option 点击事件
this.layerSelectObj.optionClickEvent(layersSelect, layerSelectName, this.layersSelectOnchange);
if (analysisMethod === 'buffer') {
resultLayersName.value = Lang.i18n('text_label_buffer') + layserArr[0];
} else if (analysisMethod === 'isolines') {
resultLayersName.value = Lang.i18n('text_label_isolines') + layserArr[0];
}
// 当前选中图层数据
this.currentData = currentFillData[layerSelectName.title];
this.currentFillData = currentFillData;
}
}
// 网格面类型选中值 & option attr设置
let gridTypeSelectName = analysisSelectControl.children[1].children[1].children[0];
gridTypeSelectName.setAttribute('data-value', '0');
let gridTypeSelect = analysisSelectControl.children[1].children[1].children[2].children[0].children[0];
let gridTypeDV = ['0', '1'];
this._setEleAtribute(gridTypeDV, 'data-value', gridTypeSelect.children);
// 权重值选中值
let weightFieldsSelectName = analysisSelectControl.children[2].children[1].children[0];
let weightFieldsSelect = analysisSelectControl.children[2].children[1].children[2].children[0].children[0];
// 分析范围 & 网格大小 & 搜索半径 & 面积单位
// 分析范围
let inputOptions = [{
'spanName': Lang.i18n('text_label_queryRange'),
'value': ''
}];
for (let i in inputOptions) {
this._creatInputBox(inputOptions[i], analysisSelectControl)
}
let queryRangeInput = analysisSelectControl.children[3].children[1];
queryRangeInput.setAttribute('placeholder', Lang.i18n('text_label_queryRangeTips'));
queryRangeInput.title = Lang.i18n('text_label_queryRangeTips');
// 网格大小
let gridSizeUnitSelectOptions = {
'optionsArr': ['Meter', 'Kilometer', 'Yard', 'Foot', 'Mile']
};
let gridSizeOptions = {
'labelName': Lang.i18n('text_label_gridSizeInMeters'),
'selectOptions': gridSizeUnitSelectOptions
rangeContentParamInput.classList.add('hidden');
rangeContentModelSelectTool.classList.add('hidden');
}
}
// 结果图层
let resultLayerContainer = L.DomUtil.create('div', '', analysisType);
let resultLayerSpan = L.DomUtil.create('span', '', resultLayerContainer);
resultLayerSpan.innerHTML = Lang.i18n('text_label_resultLayerName');
let resultLayerInput = L.DomUtil.create('input', 'component-distributeanalysis__input', resultLayerContainer);
// 分析 & 分析中 & 取消 按钮
let runBtnContainer = L.DomUtil.create('div', 'component-analysis__container__analysisbtn', analysisTypeContainer);
let runBtn = L.DomUtil.create('div', 'component-analysis__analysisbtn', runBtnContainer);
let analysisBtn = L.DomUtil.create('button', 'component-analysis__analysisbtn--analysis', runBtn);
analysisBtn.innerHTML = Lang.i18n('btn_analyze');
let analysingContainer = L.DomUtil.create('div', 'component-analysis__analysisbtn--analysing-container hidden', runBtn);
let analysisingBtn = L.DomUtil.create('div', 'component-analysis__analysisbtn--analysising', analysingContainer);
analysisingBtn.style.width = '200px';
let svgContainer = L.DomUtil.create('div', 'component-analysis__svg-container', analysisingBtn);
svgContainer.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="16px" width="16px" class="component-analysis__svg-rotate">
<path d="M 0 0 v -8 A 8 8 0 1 1 -8.00 0 z" transform="translate(8,8)" fill="#FFF" id="ring"></path>
<circle fill="#38ADF5" r="6" cy="8" cx="8"></circle>
<rect style="fill: rgb(255, 255, 255); stroke-width: 0;" height="2" width="2" ry="2" rx="2" y="0" x="8" class="svg-top"></rect>
<rect style="fill: rgb(255, 255, 255); stroke-width: 0;" height="2" width="2" ry="2" rx="2" y="8" x="0" class="svg-left"></rect>
</svg>`;
L.DomUtil.create('span', '', analysisingBtn).innerHTML = Lang.i18n('btn_analyzing');
// 删除按钮
let deleteLayersBtn = L.DomUtil.create('button', 'component-analysis__analysisbtn--analysis component-analysis__analysisbtn--deletelayers', runBtn);
deleteLayersBtn.id = 'deleteLayersBtn';
deleteLayersBtn.innerHTML = Lang.i18n('btn_emptyTheAnalysisLayer');
_initView() {
//初始化 view
const uploadContent = L.DomUtil.create('div', 'component-openfile');
uploadContent.id = 'openFile';
this.fileSelect = L.DomUtil.create('div', '', uploadContent);
this.label = L.DomUtil.create('label', 'component-openfile__span--select', this.fileSelect);
this.label.htmlFor = "input_file";
L.DomUtil.create('div', 'supermapol-icons-upload', this.label);
const fileSpan = L.DomUtil.create('span', 'component-openfile__span', this.label);
fileSpan.appendChild(document.createTextNode(Lang.i18n('text_chooseFile')));
this.fileInput = L.DomUtil.create('input', 'component-openfile__input', this.fileSelect);
this.fileInput.id = "input_file";
this.fileInput.type = "file";
this.fileInput.accept = ".json,.geojson,.csv,.xls,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
this.fileInput.onchange = (fileEventObject) => {
this.messageBox.closeView();
this.viewModel.readFile(fileEventObject);
};
//增加提示框:
this.messageBox = new MessageBox();
//添加监听
this.viewModel.on("filesizeexceed", (e) => {
this.messageBox.showView(e.message, e.messageType);