Browse Source

Merge branch 'master' of http://121.36.37.70:3000/shaojiahao/Jinan_project

非煤矿山灾害智能感知和预警系统
邵佳豪 2 years ago
parent
commit
d2a399c455
  1. 12024
      package-lock.json
  2. 1
      package.json
  3. 233
      src/app/home/statistic-analysis/home/home.component.ts
  4. 4
      src/index.html

12024
package-lock.json generated

File diff suppressed because it is too large Load Diff

1
package.json

@ -40,6 +40,7 @@
"@angular/compiler-cli": "~13.1.0", "@angular/compiler-cli": "~13.1.0",
"@types/jasmine": "~3.10.0", "@types/jasmine": "~3.10.0",
"@types/node": "^12.11.1", "@types/node": "^12.11.1",
"d3": "^7.8.2",
"html-docx-js-typescript": "^0.1.5", "html-docx-js-typescript": "^0.1.5",
"jasmine-core": "~3.10.0", "jasmine-core": "~3.10.0",
"karma": "~6.3.0", "karma": "~6.3.0",

233
src/app/home/statistic-analysis/home/home.component.ts

@ -4,6 +4,7 @@ import { Router } from '@angular/router';
declare var AMap: any; declare var AMap: any;
declare var AMapUI: any; declare var AMapUI: any;
import * as echarts from 'echarts'; import * as echarts from 'echarts';
// import * as d3 from 'd3';
import { NzModalService } from 'ng-zorro-antd/modal'; import { NzModalService } from 'ng-zorro-antd/modal';
import { TaskListComponent } from './task-list/task-list.component'; import { TaskListComponent } from './task-list/task-list.component';
import { UnitListComponent } from './unit-list/unit-list.component'; import { UnitListComponent } from './unit-list/unit-list.component';
@ -758,79 +759,171 @@ export class HomeComponent implements OnInit {
this.completionOfTaskBar.setOption(this.completionOfTaskBarOption); this.completionOfTaskBar.setOption(this.completionOfTaskBarOption);
} }
// map;
// mapInit() {
// //创建地图
// this.map = new AMap.Map('mapbox', {
// cursor: 'default',
// zooms: [8, 16],
// mapStyle: 'amap://styles/light',
// // bubble: true
// });
// let colors = [
// '#EE30B3',
// '#B37CF0',
// '#BD2CE6',
// '#7768EE',
// '#359EEF',
// '#7B95CA',
// '#CAFBF8',
// '#43D0E1',
// '#72C6EF',
// ];
// AMapUI.loadUI(['geo/DistrictExplorer'], (DistrictExplorer) => {
// //创建一个实例
// let districtExplorer = new DistrictExplorer({
// map: this.map,
// eventSupport: true, //打开事件支持
// });
// // let adcode = this.adcode; //行政编码
// let adcode = 370100;
// districtExplorer.loadAreaNode(adcode, (error, areaNode) => {
// //更新地图视野
// this.map.setBounds(areaNode.getBounds(), null, null, true);
// //设置定位节点,支持鼠标位置识别
// //注意节点的顺序,前面的高优先级
// districtExplorer.setAreaNodesForLocating(areaNode);
// //清除已有的绘制内容
// districtExplorer.clearFeaturePolygons();
// //绘制子区域
// districtExplorer.renderSubFeatures(areaNode, (feature, i) => {
// // console.log(111, feature)
// let fillColor = colors[i % colors.length];
// let strokeColor = colors[colors.length - 1 - (i % colors.length)];
// return {
// cursor: 'default',
// bubble: true,
// strokeColor: strokeColor, //线颜色
// strokeOpacity: 1, //线透明度
// strokeWeight: 1, //线宽
// fillColor: fillColor, //填充色
// fillOpacity: 0.8, //填充透明度
// };
// });
// //绘制父区域
// districtExplorer.renderParentFeature(areaNode, {
// cursor: 'default',
// bubble: true,
// strokeColor: 'black', //线颜色
// strokeOpacity: 1, //线透明度
// strokeWeight: 1, //线宽
// fillColor: null, //填充色
// fillOpacity: 0.5, //填充透明度
// });
// // 更新地图视野以适合区划面
// this.map.setFitView(districtExplorer.getAllFeaturePolygons());
// });
// });
// }
countries = [];
map; map;
mapInit() { mapInit() {
//创建地图 const that = this;
this.map = new AMap.Map('mapbox', { var T = window['T'];
cursor: 'default', var d3 = window['d3'];
zooms: [8, 16], this.map = new T.Map('mapbox');
mapStyle: 'amap://styles/light', var countriesOverlay = new T.D3Overlay(this.init, this.redraw);
// bubble: true var countriesOverlay1 = new T.D3Overlay(this.init1, this.redraw1);
this.map.centerAndZoom(new T.LngLat(117.03862, 36.664169), 9);
d3.json(
'https://geo.datav.aliyun.com/areas_v3/bound/370100_full.json',
function (data) {
that.countries = data.features;
console.log(data);
that.map.addOverLay(countriesOverlay);
countriesOverlay.bringToBack();
that.map.addOverLay(countriesOverlay1);
countriesOverlay.bringToBack();
}
);
// console.log(countriesOverlay);
}
init(sel, transform) {
const that = this;
var d3 = window['d3'];
var countries;
new Promise((resolve, reject) => {
d3.json(
'https://geo.datav.aliyun.com/areas_v3/bound/370100_full.json',
function (data) {
that.countries = data.features;
resolve(data);
}
);
}).then(() => {
console.log(countries);
var upd = sel.selectAll('path.geojson').data(this.countries);
upd
.enter()
.append('path')
.attr('class', 'geojson')
.attr('stroke', 'black')
.attr('fill', function (d, i) {
return d3.hsl(Math.random() * 360, 0.9, 0.5);
})
.attr('fill-opacity', '0.5');
}); });
}
let colors = [ redraw(sel, transform) {
'#EE30B3', console.log(transform);
'#B37CF0',
'#BD2CE6', var d3 = window['d3'];
'#7768EE', sel.selectAll('path.geojson').each(function (d, i) {
'#359EEF', d3.select(this).attr('d', transform.pathFromGeojson);
'#7B95CA', // .on("mouseover",function(){
'#CAFBF8', // console.log('这是点击了',);
'#43D0E1', // })
'#72C6EF', });
]; }
init1(sel, transform) {
AMapUI.loadUI(['geo/DistrictExplorer'], (DistrictExplorer) => { const that = this;
//创建一个实例 var d3 = window['d3'];
let districtExplorer = new DistrictExplorer({ new Promise((resolve, reject) => {
map: this.map, d3.json(
eventSupport: true, //打开事件支持 'https://geo.datav.aliyun.com/areas_v3/bound/370100_full.json',
}); function (data) {
that.countries = data.features;
// let adcode = this.adcode; //行政编码 resolve(data);
let adcode = 370100; }
);
districtExplorer.loadAreaNode(adcode, (error, areaNode) => { }).then(() => {
//更新地图视野 var upd = sel.selectAll('path.geojson1').data(this.countries);
this.map.setBounds(areaNode.getBounds(), null, null, true); upd
.enter()
//设置定位节点,支持鼠标位置识别 .append('path')
//注意节点的顺序,前面的高优先级 .attr('class', 'geojson1')
districtExplorer.setAreaNodesForLocating(areaNode); .attr('stroke', 'black')
.attr('fill', function (d, i) {
//清除已有的绘制内容 return d3.hsl(Math.random() * 360, 0.9, 0.5);
districtExplorer.clearFeaturePolygons(); })
.attr('fill-opacity', '0.5');
//绘制子区域 });
districtExplorer.renderSubFeatures(areaNode, (feature, i) => { }
// console.log(111, feature) redraw1(sel, transform) {
let fillColor = colors[i % colors.length]; var d3 = window['d3'];
let strokeColor = colors[colors.length - 1 - (i % colors.length)]; sel.selectAll('path.geojson1').each(function (d, i) {
return { d3.select(this).attr('d', transform.pathFromGeojson);
cursor: 'default',
bubble: true,
strokeColor: strokeColor, //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 1, //线宽
fillColor: fillColor, //填充色
fillOpacity: 0.8, //填充透明度
};
});
//绘制父区域
districtExplorer.renderParentFeature(areaNode, {
cursor: 'default',
bubble: true,
strokeColor: 'black', //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 1, //线宽
fillColor: null, //填充色
fillOpacity: 0.5, //填充透明度
});
// 更新地图视野以适合区划面
this.map.setFitView(districtExplorer.getAllFeaturePolygons());
});
}); });
} }

4
src/index.html

@ -13,7 +13,9 @@
<app-root></app-root> <app-root></app-root>
<div id="viewerjs" style="display:none"></div> <div id="viewerjs" style="display:none"></div>
</body> </body>
<script src="http://api.tianditu.gov.cn/api?v=4.0&tk=0c77efd395c0cd7654d9d808059595ca" type="text/javascript"></script>
<script src="http://cdn.bootcss.com/d3/3.5.17/d3.js " charset="utf-8"></script>
<script src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/D3SvgOverlay.js"></script>
<script type="text/javascript" src="/assets/wordexport/jquery.js"></script> <script type="text/javascript" src="/assets/wordexport/jquery.js"></script>
<script type="text/javascript" src="/assets/wordexport/FileSaver.js"></script> <script type="text/javascript" src="/assets/wordexport/FileSaver.js"></script>
<script type="text/javascript" src="/assets/wordexport/jquery.wordexport.js"></script> <script type="text/javascript" src="/assets/wordexport/jquery.wordexport.js"></script>

Loading…
Cancel
Save