How to use @supermap/iclient-common - 10 common examples

let that = this, 
        url = layerInfo.url.trim();
        if(layerInfo.layerType  === "TILE"){
           // 直接使用动态投影方式请求数据
           let projection = {
            epsgCode: that.baseProjection.split(":")[1]
        }
        url += `.json?prjCoordSys=${JSON.stringify(projection)}`;
        }else{
            url += (url.indexOf('?') > -1 ? '&SERVICE=WMS&REQUEST=GetCapabilities' : '?SERVICE=WMS&REQUEST=GetCapabilities');
        }
        let options = {
            withCredentials: this.withCredentials,
            withoutFormatSuffix: true
        };
        FetchRequest.get(url, null, options).then(function (response) {
            return layerInfo.layerType  === "TILE" ? response.json() : response.text();
        }).then(function (result) {
            if (layerInfo.layerType === "TILE") {
                layerInfo.extent = [result.bounds.left, result.bounds.bottom, result.bounds.right, result.bounds.top];
                layerInfo.projection = `EPSG:${result.prjCoordSys.epsgCode}`;

                callback(layerInfo);
            } else {
                layerInfo.projection = that.baseProjection;
                callback(layerInfo);
            }
        });
    }

static getMeterPerMapUnit(mapUnit) {
        var earchRadiusInMeters = 6378137;
        var meterPerMapUnit;
        if (mapUnit === Unit.METER) {
            meterPerMapUnit = 1;
        } else if (mapUnit === Unit.DEGREE) {
            // 每度表示多少米。
            meterPerMapUnit = Math.PI * 2 * earchRadiusInMeters / 360;
        } else if (mapUnit === Unit.KILOMETER) {
            meterPerMapUnit = 1.0E-3;
        } else if (mapUnit === Unit.INCH) {
            meterPerMapUnit = 1 / 2.5399999918E-2;
        } else if (mapUnit === Unit.FOOT) {
            meterPerMapUnit = 0.3048;
        } else {
            return meterPerMapUnit;
        }
        return meterPerMapUnit;
    }

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