~~~
//請勿修改此處命名參數
vsPluginComponentModule.factory('$vcPlugin_extwidgets_openlayers4_map', ['$vsPluginRegister', '$timeout', function ($vsPluginRegister, $timeout) {
var factory = {
//配置面板中顯示[數據]配置
showDataCategory: true,
//配置面板中顯示[邊框]配置
showBorderCategory: true,
//配置面板中顯示[基本]配置
showBasicCategory: true,
//配置面板中顯示[浮動]配置
showFixedCategory: true,
//配置面板中顯示[事件]配置
showEventCategory: true,
//配置面板中顯示[標題]配置
showTitleCategory: true,
/* 控件的初始化 */
init: function(scope, element, component, $compile){
scope.element = element;
scope.component = component;
//控件的圖形維度數量
scope.component.config.chartDimensionCount = 1;
//當控件尺寸改變時，改變echarts的尺寸
component.context.resize = function(){
$timeout(function(){
// console.log('234243')
}, 100);
}
},
/*
* 構建數據描述，此方法中對控件的數據進行處理
*/
buildDataDescription: function(dataDescription, scope, element, component, $compile){
//接收控件刷新數據的事件
scope.$on(event_refreshComponentData, function(target, param){
//如果刷新數據事件的發出者是當前控件，不處理本次通知
if(param.component != null && scope.component.id === param.component.id){
return;
}
scope.queryComponentData(param, {
onSuccess: function(){
refreshChartView(scope, element, component, $compile);
}
});
});
},
/*
* 構建圖形描述，此方法中定義控件的配置面板
*/
buildChartDescription: function(scope, element, component, $compile){
scope.component = component;
//控件需要的HTML
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.append(el);
/*
* 構建[設置]配置面板
*/
buildSettingDescription(scope, element, component, $compile);
/*
* TODO: 可構建更多配置面板
* 例如：buildOtherDescription(scope, element, component, $compile);
*/
}
};
var buildSettingDescription = function(scope, element, component, $compile){
scope.element = element;
scope.component = component;
scope.calculateBackgroundSize = function (i) {
return element.width() > element.height() ? "auto 100%" : "100% auto"
};
var html = [];
html.push('<div id="mapContainer" class="map" ondragover="DragHandler.allowDrop(event)">');
var h = $compile(html.join(""))(scope);
element.html(h);
//軌跡line layer
scope.component.context.vsource = new ol.source.Vector({
type: 'LineString',
features: []
});
scope.component.context.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
})
})
});
//地圖基礎參數
scope.component.context.center = [116.403963,39.915125];
scope.component.context.source = new ol.source.Vector({
wrapX: false
});
scope.component.context.projection = new ol.proj.Projection({
code: 'EPSG:4326',
units: 'degrees',
axisOrientation: 'neu'
});
scope.component.context.view = new ol.View({
projection: scope.component.context.projection,
center: scope.component.context.center,
zoom: 16
});
scope.component.context.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'
}),
}),scope.component.context.linelayers];
//樣式，供上述代碼調用
scope.component.context.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'
}))
});
scope.component.context.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,
}))
});
scope.component.context.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],
}))
});
// 實例化
scope.component.context.map = new ol.Map({
logo: false,
target: document.getElementById('mapContainer'),
layers: scope.component.context.layers,
view: scope.component.context.view
});
}
//刷新控件渲染
var refreshChartView = function(scope, element, component, $compile){
// 對象數據
var map
// var k = component.config;
var k = component.context;
var data = component.context.data;
// console.log(data)
var lineArr = new Array();
var dimensions = component.config.datasourceConfig.dimensions;
var measures = component.config.datasourceConfig.measures;
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)
}
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])]);
}
// 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);
}
}
//接收控件刷新數據的事件
scope.$on(event_refreshComponentData, function(target, param){
scope.queryComponentData(param, {
onSuccess: function(){
refreshChartView(scope, element, component, $compile);
}
});
});
};
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
}
//請勿修改此處命名參數
$vsPluginRegister.register("extwidgets", "openlayers4_map", factory);
}]);
~~~
- video
- treemap
- mian.html文件注釋
- 配置項tab
- 配置項屬性
- internalRefreshAxisMdelData函數梳理
- 函數配置項-engine文件
- 替換數據源流程
- design.js
- 樹圖
- 下鉆 廢棄
- 人體圖
- 下鉆地圖
- 行列互轉
- 預覽樣式
- logo旁邊的報表名
- echarts 組件生成圖片
- 數據集樣式
- 頭部 黑色head
- 手機 ipad 圖片
- k線圖部分
- 平臺管理css樣式
- 目錄css和平板的邊距
- 設計頁-數據源-目錄
- 數據集 - 查看數據表 -按鈕和目錄樣式
- 報表列表頁按鈕css
- 角色管理頁按鈕css
- 推送通知按鈕css
- 子賬號按鈕css
- 數據連接
- openlayers地圖線路圖
- openlayers4_map_designer.js
- openlayers4_map_view.js
- 說明
- 常用圖標小bug
- echarts 氣泡地圖
- echarts 線路軌跡圖
- 導出pdf
- 可視化sql--css
- 表格滾動
- 主題色
- 時間軸
- 分享彈框
- 管理平臺header和菜單
- 報表平臺和菜單
- 初始化組件顏色
- 其他彈框
- olap分析樣式-廢棄
- 3d地圖柱狀圖
- 關系圖
- olap分析
- 地區地圖
- k線圖相關屬性設置
- 世界地圖
- 時間軸（new）
- 選擇省份下轉地圖
- 選擇省市飛線地圖
- 面積預警地圖默認顏色
- 組件覆層開關組件
- 汽車儀表盤bug
- 雷達圖bug修復不能分享的問題
- 餅狀 條形圖 自動播放
- 臨時用
- 自動輪播
- 方形元素 按鈕浮動報錯
- 面積預警地圖整合可選擇省市區
- 下鉆地圖添加返回按鈕
- 下鉆地圖修復預警bug
- 基本時間組件
- 添加時鐘組件
- 3d地球組件
- 盒須圖
- 組件加載動畫
- 報表背景漸變色
- 主題模板
- 沒用
- 3機房第三方組件
- 設計
- 分享
- 3d機房需要的靜態資源
- cesium地球需要的文件以及樣式
- cesium地球
- 設計頁
- 分享頁
- 圖標條形圖
- 世豪-前端代碼整理
- component.css 文件新添加
- 雜項
- index.jsp
- designer.css 樣式暫時不整理 里面比較雜
- vs-common.js 新加生成html2canvas pdf
- vs-component-basic.js 完
- vs-component-datasource.js 完
- vs-component-engine.js 完
- vs-component-widget-grid.js 完
- vs-component-widget-square.js 完
- vs-designer.js 完
- vs-designer-component.js 完
- vs-designer-report.js 完
- vs-designer-reportpage.js 完
- vs-component-echarts.js 完
- main.html 完
- component.html 新加組件設置頁模板
- 以前的報表頁設置控制器---做個記錄
- 大概修改過的代碼
- 2019-5-8 修改皮膚控制器
- 選擇模板
- 桑基圖2019-11-20
- bug 修正 2019-11-21
- 插圖柱狀圖
- cesiumchart組件
- gis 地圖 聯動 彈框 圖標
- 動態面積圖添加按鈕類配置項
- 玫瑰圖形組件
- cesium 圖形 和three.js 沖突的bug
- gis 地圖 默認圖層
- 網格標簽
- gis 點圖 值域
- gis 面圖 值域
- 按鈕圖標添加提示框
- 百度地圖
- 剩余的組件
- gulp說明文檔
- 色斑圖加透明