shaojiahao
/
Jinan_project
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

地图改为天地图

非煤矿山灾害智能感知和预警系统
jingbowen 2 years ago
parent
53d55e172d
commit
6c8327a7ac
4 changed files with 12155 additions and 107 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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
View File

File diff suppressed because it is too large Load Diff

1
package.json
Unescape View File

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

233
src/app/home/statistic-analysis/home/home.component.ts
Unescape View File

@ -4,6 +4,7 @@ import { Router } from '@angular/router';
declare var AMap: any;
declare var AMapUI: any;
import * as echarts from 'echarts';
// import * as d3 from 'd3';
import { NzModalService } from 'ng-zorro-antd/modal';
import { TaskListComponent } from './task-list/task-list.component';
import { UnitListComponent } from './unit-list/unit-list.component';
@ -755,79 +756,171 @@ export class HomeComponent implements OnInit {
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;
mapInit() {
//创建地图
this.map = new AMap.Map('mapbox', {
cursor: 'default',
zooms: [8, 16],
mapStyle: 'amap://styles/light',
// bubble: true
const that = this;
var T = window['T'];
var d3 = window['d3'];
this.map = new T.Map('mapbox');
var countriesOverlay = new T.D3Overlay(this.init, this.redraw);
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 = [
'#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());
});
}
redraw(sel, transform) {
console.log(transform);
var d3 = window['d3'];
sel.selectAll('path.geojson').each(function (d, i) {
d3.select(this).attr('d', transform.pathFromGeojson);
// .on("mouseover",function(){
// console.log('这是点击了',);
// })
});
}
init1(sel, transform) {
const that = this;
var d3 = window['d3'];
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(() => {
var upd = sel.selectAll('path.geojson1').data(this.countries);
upd
.enter()
.append('path')
.attr('class', 'geojson1')
.attr('stroke', 'black')
.attr('fill', function (d, i) {
return d3.hsl(Math.random() * 360, 0.9, 0.5);
})
.attr('fill-opacity', '0.5');
});
}
redraw1(sel, transform) {
var d3 = window['d3'];
sel.selectAll('path.geojson1').each(function (d, i) {
d3.select(this).attr('d', transform.pathFromGeojson);
});
}

4
src/index.html
Unescape View File

@ -13,7 +13,9 @@
<app-root></app-root>
<div id="viewerjs" style="display:none"></div>
</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/FileSaver.js"></script>
<script type="text/javascript" src="/assets/wordexport/jquery.wordexport.js"></script>

Write Preview
Loading…
Cancel
Save