fj-dc-ui/.svn/pristine/f5/f5b9ba391efe2802b64fecbb97c1e128262f592f.svn-base

import {_longLatTransform} from './mercatorToLngLat'
import {removeLayerById} from './removeLayerById.js'
import { mapConfig } from '../config/mapConfig.js';
var _self;
export function getBiaoJiList(self,tableData){
    _self = self;
    var ol = _self.$ol;
    removeLayerById(_self,'ls_bjGraphicLayer');
    _self.mapObject.getLayers().forEach((val)=>{
        if(val){
            if(val.getProperties().id == "ls_bjGraphicLayer"){
                val.getSource().clear();
            }
        }
    });
    var symbol = new ol.style.Style({
        image: new ol.style.Icon(({
            anchor: [0.5, 0.5],
            scale:0.07,
            src: '/src/views/zongHeXinXiOl/assets/bjR.png'
        }))
    });
    var symbol,iconFeature;
    var features = [];
    tableData.forEach((item)=>{
        if(item.lgtd && item.lttd){
            var pt = self.projTransform(new ol.geom.Point([Number(item.lgtd), Number(item.lttd)]),mapConfig.wkid)
            // var pt = ol.proj.transform([Number(item.lgtd), Number(item.lttd)], "EPSG:4326", "EPSG:3857")
            iconFeature = new ol.Feature({
                geometry: pt,
                name: '标记'
            });
            item['layerId'] = 'ls_bjGraphicLayer';
            iconFeature.setProperties(item);
            iconFeature.setStyle(symbol);
            features.push(iconFeature)
        }
    });
    var vectorSource = new ol.source.Vector({
        features: features
    });
    var vectorLayer = new ol.layer.Vector({
        source: vectorSource,
        id:'ls_bjGraphicLayer'
    });
    _self.mapObject.addLayer(vectorLayer)
}
var bjX,bjY;
export function biaojiHandler(self,x,y){
    _self = self
    var ol = _self.$ol;
    var longLat = _longLatTransform({x:x,y:y})
    bjX = longLat.x;
    bjY = longLat.y;
    var symbol = new ol.style.Style({
        image: new ol.style.Icon(({
            anchor: [0.5, 0.5],
            scale:0.07,
            src: '/src/views/zongHeXinXiOl/assets/bjR.png'
        }))
    });
    var features = [];
    var iconFeature = new ol.Feature({
        geometry: new ol.geom.Point([x, y]),
        name: '标记'
    });
    iconFeature.setStyle(symbol);
    features.push(iconFeature)
    var vectorSource = new ol.source.Vector({
        features: features
    });
    var vectorLayer = new ol.layer.Vector({
        source: vectorSource,
        id:'bjGraphicLayer1'
    });
    _self.mapObject.addLayer(vectorLayer)

    var strHtml;
    if(document.getElementById('popupbj')){
        document.getElementById('popupbj').style.display = 'block'
    }
    var container = document.getElementById('popupbj');
    if(!container){
        return;
    }
    var content = document.getElementById('popup-contentbj');
    var overlay = new ol.Overlay({
        id:'biaojiOverlayId',
        element: container,
        autoPan: true,
        autoPanAnimation: {
            duration: 250
        }
    });
    var strHtml = "<div>"+
                    "<div>"+
                        "<div style='display: flex;padding: 2px;'>"+
                            "<p style='font-size: 14px;padding: 5px;width: 35px;'>名称:</p>"+
                            "<input type='text' id='nameId' style='height: 33px;width: 222px;'>"+
                        "</div>"+
                        "<div style='display: flex;padding: 2px;'>"+
                            "<p style='font-size: 14px;padding: 5px;padding-top: 8px;width: 35px;'>经度:</p>"+
                            "<input type='text' id='longId' style='height: 33px;width: 86px;'value='"+longLat.x.toFixed(6)+"'>"+
                            "<p style='font-size: 14px;padding: 5px;padding-top: 8px;width: 35px;'>纬度:</p>"+
                            "<input type='text' id='latId' style='height: 33px;width: 86px;' value='"+longLat.y.toFixed(6)+"'>"+
                        "</div>"+
                       
                        "<div style='display: flex;padding: 2px;'>"+
                            "<p style='font-size: 14px;padding: 5px;width: 35px;'>备注:</p>"+
                            "<textarea id='noteId' rows='6' cols='28' style='width: 222px;'>"+
                            "</textarea>"+
                        "</div>"+
                    "</div>"+
                    "<div style='margin-top:10px;float: right;'>"+
                        "<button id='cancleBj' type='button' style='margin-right: 20px;width: 50px;' onclick='cancelHandler()'>取消</button>"+
                        "<button id='saveBj' type='button' style='width: 50px;' onclick='submitHandler("+longLat.x+","+longLat.y+")'>保存</button>"+
                    "</div>"+
                "</div>";
    if(strHtml){
        content.innerHTML = strHtml;
        overlay.setPosition([x,y]);
        _self.mapObject.addOverlay(overlay);
        if(document.getElementById('cancleBj')){
            document.getElementById("cancleBj").onclick = cancelHandler;
        }
        if(document.getElementById('saveBj')){
            document.getElementById("saveBj").onclick = submitHandler;
        }
        if(document.getElementById('popupbj')){
            document.getElementById('popupbj').style.display = 'block'
        }
    }
}

function cancelHandler(){
    _self.mapObject.getLayers().forEach((val)=>{
        if(val){
            if(val.getProperties().id == "bjGraphicLayer1"){
                val.getSource().clear();
            }
        }
    });
    removeLayerById(_self,'bjGraphicLayer1');
    if(document.getElementById('popupbj')){
        document.getElementById('popupbj').style.display = 'none'
    }
}
function submitHandler(){
    _self.mapObject.getLayers().forEach((val)=>{
        if(val){
            if(val.getProperties().id == "bjGraphicLayer1"){
                val.getSource().clear();
            }
        }
    });
    removeLayerById(_self,'bjGraphicLayer1');
    _self.saveBjHandler(bjX,bjY);
    // removeLayerById(_self,'biaojiOverlayId');
    
}