~~~
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);
}
});
});
}
~~~
- 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说明文档
- 色斑图加透明