openlayers4_map_view.js · 代碼梳理

~~~ var build_openlayers4_map_component = function(scope, element, $compile, $timeout, $sce){ var component = scope.component; var html = []; html.push('<div id="mapContainer" style="width:100%;height:100%;" class="map" ondragover="DragHandler.allowDrop(event)">'); var el = $compile(html.join(""))( scope ); element.html(el); //刷新控件渲染，可直接將designer.js中的方法復制過來 var refreshChartView = function(){ // 對象數據 var map // var k = component.config; var k = component.context; var data = component.context.data; var lineArr = new Array(); var dimensions = component.config.datasourceConfig.dimensions; var measures = component.config.datasourceConfig.measures; // console.log(data) if (data == null) { return } console.log(data) var measureIdx = 0; if (component.config.receiveMeasureLink != null && component.config.receiveMeasureLink === true) { var newMeasures = scope.getSelectedLinkMeasure(component, component.config.datasourceConfig.measures); for (var i = 0; i < measures.length; i++) { if (newMeasures[i] != null) { measureIdx = i; break } } } var chartData = []; var chartDataMap = []; for (var i = 0; i < data.length; i++) { var dimValue = data[i][dimensions[dimensions.length - 1].name]; if (VSUtils.isEmpty(dimValue)) { continue } chartData.push([dimValue,data[i][measures[measureIdx].name] == null ? 0 : data[i][measures[measureIdx].name]]); chartDataMap.push(dimValue) } k.linelayers = new ol.layer.Vector({ source: scope.component.context.vsource, style: new ol.style.Style({ fill: new ol.style.Fill({ color: '#66cc00' }), stroke: new ol.style.Stroke({ color: '#66cc00', width: 4 }) }) }); if (chartData.length == 0) { chartData = [""]; chartDataMap = [""] } // console.log(chartData) for(var i = 0;i<chartData.length;i++){ // console.log(parseFloat(chartData[i][0].split(',')[0])) // console.log(parseFloat(chartData[i][0].split(',')[1])) lineArr.push([parseFloat(chartData[i][0].split(',')[1]), parseFloat(chartData[i][0].split(',')[0])]); } //軌跡line layer scope.component.context.vsource = new ol.source.Vector({ type: 'LineString', features: [] }); scope.component.context.linelayers = new ol.layer.Vector({ source: k.vsource, style: new ol.style.Style({ fill: new ol.style.Fill({ color: '#66cc00' }), stroke: new ol.style.Stroke({ color: '#66cc00', width: 2 }) }) }); //地圖基礎參數 k.center = [116.403963,39.915125]; k.source = new ol.source.Vector({ wrapX: false }); k.projection = new ol.proj.Projection({ code: 'EPSG:4326', units: 'degrees', axisOrientation: 'neu' }); k.view = new ol.View({ projection: k.projection, center: k.center, zoom: 16 }); k.layers = [new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'http://webrd03.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8' }), }),k.linelayers]; //樣式，供上述代碼調用 k.iconStyle = new ol.style.Style({ image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({ anchor: [0.5, 0.8], anchorXUnits: 'fraction', anchorYUnits: 'pi/xels', opacity: 0.75, src: 'http://webapi.amap.com/theme/v1.3/markersn/mark_b.png' })) }); k.startStyle = new ol.style.Style({ image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({ anchor: [0.5, 0.8], opacity: 0.8, src: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png', // anchorXUnits: 'fraction', // anchorYUnits: 'pixels', // opacity: 0.75, })) }); k.endStyle = new ol.style.Style({ image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({ src: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png', anchor: [0.5, 0.8], })) }); // 實例化 k.map = new ol.Map({ logo: false, target: document.getElementById('mapContainer'), layers: k.layers, view: k.view }); // console.log(lineArr) // 上來清空畫的路線 // console.log(k) // k.linelayers.getSource().clear(true); // 調用畫線函數 // console.log(lineArr) AddLayer(lineArr); // 畫線方法 function AddLayer() { try { k.lineFeature = new ol.Feature({//路線 geometry: new ol.geom.LineString(lineArr), }); k.linelayers.getSource().addFeature(k.lineFeature); k.startFeature = new ol.Feature({//起點 geometry: new ol.geom.Point(lineArr[0]), population: 4000, rainfall: 500 }); k.startFeature.setStyle(k.startStyle); k.linelayers.getSource().addFeature(k.startFeature); k.endFeature = new ol.Feature({//終點 geometry: new ol.geom.Point(lineArr[lineArr.length-1]), population: 4000, rainfall: 500 }); k.endFeature.setStyle(k.endStyle); k.linelayers.getSource().addFeature(k.endFeature); k.extent = k.linelayers.getSource().getExtent();//合適比例縮放居中 k.view.fit(k.extent,undefined); // map.getSize() } catch(e){ console.log(e); } } // console.log(k) map = new ol.Map({ logo: false, target: document.getElementById('mapContainer'), layers: k.layers, view: k.view }); //TODO: 使用新數據對控件進行渲染 }; var internalFindKvValue = function(component, value){ if (component.config.kvKeys != null) { for (var v in component.config.kvKeys) { if (component.config.kvKeys[v] === value) { return component.config.kvValues[v] } } } return value } //接收控件刷新數據的事件 scope.$on(event_refreshComponentData, function(target, param){ scope.queryComponentData(param, { onSuccess: function(){ refreshChartView(scope, element, component, $compile); } }); }); } ~~~