Skip to content

S
supervise-front
Commit 91953ac7 by niuxiaolin
Options

latest

parent 9fdd0822
Showing with 191 additions and 24 deletions
src/app/dynamic-script.service.ts
......@@ -12,6 +12,7 @@ export const ScriptStore: Scripts[] = [
{ name: 'mapv', src: '/assets/mapv.min.js' },
{ name: 'jsencrypt', src: '/assets/jsencrypt.min.js' },
{ name: 'jswebcontrol', src: '/assets/jsWebControl-1.0.0.min.js' },
{ name: 'bound', src: '/assets/AreaRestriction.js' },
{name:'jquery',src:"/assets/jquery-1.12.4.min.js"}
];
......
src/app/main/main.component.html
<baidu-map #map [options]="opts">
<polyline [points]="points" [options]="polylineOptions" (loaded)="polylineLoaded($event)"
(clicked)="polylineClicked($event)"></polyline>
</baidu-map>
<!-- <baidu-map #map [options]="opts">
<polyline [points]="points" [options]="polylineOptions" (loaded)="polylineLoaded($event)"
(clicked)="polylineClicked($event)"></polyline>
</baidu-map> -->
<div id="map_container"></div>
<div class="main">
<div class="left">
<fieldset>
......@@ -41,11 +41,7 @@
<section *ngIf="highShow" class="sub">
<div class="item" *ngFor="let prj of projects;let i=index">
<label (click)="highLight(i,prj,'p');setPrj(prj);">{{prj.name}} </label>
<!-- <section class="sub">
<label (click)=" highLight(i,sec,'s');setCamera(sec);" *ngFor="let sec of prj.secs;let i=index">{{sec.name}}
</label>
</section> -->
</div>
</section>
......
src/app/main/main.component.less
......@@ -55,7 +55,7 @@
}
.left{
width: 292px;
position: absolute;
top: 188px;
......@@ -185,4 +185,14 @@ fieldset{
.tooltip:hover .tooltiptext {
visibility: visible;
}
#map_container {
// width: 1000px;
// height: 900px;
// overflow: hidden;
// margin: 0;
width: 100%;
height: 900px;
display: block;
}
\ No newline at end of file
src/app/main/main.component.ts
......@@ -14,11 +14,12 @@ import { ActivatedRoute, Router } from '@angular/router';
import { IdService } from '../services/id.service';
import { SelfMapService } from '../services/map.service';
declare var map: any;
var map=null;
declare var BMap: any;
declare var BMapLib: any;
declare var drawingManager: any;
declare var BMAP_HYBRID_MAP:any;
declare var BMAP_NORMAL_MAP:any;
declare var mapv;
const enum CordType {
PROJ,
......@@ -38,7 +39,20 @@ export interface DialogData {
templateUrl: './main.component.html',
styleUrls: ['./main.component.less']
})
export class MainComponent implements OnInit {
export class MainComponent implements OnInit,AfterViewInit {
ngAfterViewInit(): void {
map = new BMap.Map("map_container",{mapType: BMAP_NORMAL_MAP}); //设置卫星图为底图
var point = new BMap.Point(112.43176242674386, 37.78663390039693); // 创建点坐标
map.centerAndZoom(point,10);
var mapStyle ={
style : "dark" //设置地图风格为高端黑
}
//map.setMapStyle(mapStyle);
// 初始化地图,设置中心点坐标和地图级别。
//map.addControl(new BMap.NavigationControl());
map.enableScrollWheelZoom(); // 启用滚轮放大缩小。
map.enableKeyboard(); // 启用键盘操作。
}
cameraSum: any={};
allsecs: any=[];
curive:boolean = false;
......@@ -114,6 +128,9 @@ export class MainComponent implements OnInit {
var newPolyLine = new window.BMap.Polyline(toPoints, { strokeColor: proj.lineStyle, strokeWeight: proj.lineWidth });
(newPolyLine as any).id = (proj.course ? "p" : "s") + proj.id;
map.addOverlay(newPolyLine);
// var newPoints = this.corToPoint(proj.coordinate);
// this.m.animationLine(newPoints);
......@@ -144,9 +161,9 @@ export class MainComponent implements OnInit {
this.http.get<any>(this.s.basePath + "/course/list").subscribe(res => {
this.courses = res.data;
//加载全局线路
setTimeout(() => {
this.loadPolys(res,false);
}, 5000);
setTimeout(() => {
this.loadPolys(res,false);
}, 5000);
});
this.http.get<any>(this.s.basePath + "/scetion/list").subscribe(res => {
this.allsecs = res.data;
......@@ -288,11 +305,11 @@ export class MainComponent implements OnInit {
this.setBound();
(window as any).map.setMapStyleV2({ styleJson: theme });
(window as any).map.setMapStyle({ styleJson: theme });
map.enableScrollWheelZoom(true);
map.centerAndZoom("山西省",11);
//map.centerAndZoom("山西省",3);
this.dynamicScriptLoader.load('geouti','mapv').then();
this.dynamicScriptLoader.load('geouti','mapv','bound').then();
if (this.debug) {
this.dynamicScriptLoader.load('drawing').then(data => {
......@@ -354,9 +371,9 @@ export class MainComponent implements OnInit {
public polylineClicked({ polyline }): void {
console.log('polyline clicked', polyline)
}
// public polylineClicked({ polyline }): void {
// console.log('polyline clicked', polyline)
// }
closeModal(id: string) {
this.modalService.close(id);
......
src/app/video/video.component.ts
......@@ -128,7 +128,7 @@ export class VideoComponent implements OnInit {
});
}
preview() {
var cameraIndexCode ="862edc0a09734e83a69101f69f840e0d"; //获取输入的监控点编号值，必填
var cameraIndexCode ="6cfa7e248e574165b00a1f271a4f3e5f"; //获取输入的监控点编号值，必填
var streamMode = 0; //主子码流标识：0-主码流，1-子码流
var transMode = 1; //传输协议：0-UDP，1-TCP
var gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用
......@@ -149,7 +149,7 @@ export class VideoComponent implements OnInit {
})
}
preview2() {
var cameraIndexCode ="bb44edc4e843421da68f33699e7203f2"; //获取输入的监控点编号值，必填
var cameraIndexCode ="1094ced4e88c4ab4ba32d2a0aec583d4"; //获取输入的监控点编号值，必填
var streamMode = 0; //主子码流标识：0-主码流，1-子码流
var transMode = 1; //传输协议：0-UDP，1-TCP
var gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用
......
src/assets/AreaRestriction.js 0 → 100644
/**
* @fileoverview 百度地图浏览区域限制类，对外开放。
* 允许开发者输入限定浏览的地图区域的Bounds值，
* 则地图浏览者只能在限定区域内浏览地图。
* 基于Baidu Map API 1.2。
*
* @author Baidu Map Api Group
* @version 1.2
*/
/**
* @namespace BMap的所有library类均放在BMapLib命名空间下
*/
var BMapLib = window.BMapLib = BMapLib || {};
(function() {
/**
* @exports AreaRestriction as BMapLib.AreaRestriction
*/
var AreaRestriction =
/**
* AreaRestriction类，静态类，不用实例化
* @class AreaRestriction类提供的都是静态方法，勿需实例化即可使用。
*/
BMapLib.AreaRestriction = function(){
}
/**
* 是否已经对区域进行过限定的标识
* @private
* @type {Boolean}
*/
var _isRestricted = false;
/**
* map对象
* @private
* @type {BMap}
*/
var _map = null;
/**
* 开发者需要限定的区域
* @private
* @type {BMap.Bounds}
*/
var _bounds = null;
/**
* 对可浏览地图区域的限定方法
* @param {BMap} map map对象
* @param {BMap.Bounds} bounds 开发者需要限定的区域
*
* @return {Boolean} 完成了对区域的限制即返回true，否则为false
*/
AreaRestriction.setBounds = function(map, bounds){
// 验证输入值的合法性
if (!map ||
!bounds ||
!(bounds instanceof BMap.Bounds)) {
throw "请检查传入参数值的合法性";
return false;
}
if (_isRestricted) {
this.clearBounds();
}
_map = map;
_bounds = bounds;
// 添加地图的moving事件，用以对浏览区域的限制
_map.addEventListener("moveend", this._mapMoveendEvent);
_isRestricted = true;
return true;
};
/**
* 需要绑定在地图移动事件中的操作，主要控制出界时的地图重新定位
* @param {Event} e e对象
*
* @return 无返回值
*/
AreaRestriction._mapMoveendEvent = function(e) {
// 如果当前完全没有出界，则无操作
if (_bounds.containsBounds(_map.getBounds())) {
return;
}
// 两个需要对比的bound区域的边界值
var curBounds = _map.getBounds(),
curBoundsSW = curBounds.getSouthWest(),
curBoundsNE = curBounds.getNorthEast(),
_boundsSW = _bounds.getSouthWest(),
_boundsNE = _bounds.getNorthEast();
// 需要计算定位中心点的四个边界
var boundary = {n : 0, e : 0, s : 0, w : 0};
// 计算需要定位的中心点的上方边界
boundary.n = (curBoundsNE.lat < _boundsNE.lat) ?
curBoundsNE.lat :
_boundsNE.lat;
// 计算需要定位的中心点的右边边界
boundary.e = (curBoundsNE.lng < _boundsNE.lng) ?
curBoundsNE.lng :
_boundsNE.lng;
// 计算需要定位的中心点的下方边界
boundary.s = (curBoundsSW.lat < _boundsSW.lat) ?
_boundsSW.lat :
curBoundsSW.lat;
// 计算需要定位的中心点的左边边界
boundary.w = (curBoundsSW.lng < _boundsSW.lng) ?
_boundsSW.lng :
curBoundsSW.lng;
// 设置新的中心点
var center = new BMap.Point(boundary.w + (boundary.e - boundary.w) / 2,
boundary.s + (boundary.n - boundary.s) / 2);
setTimeout(function() {
_map.panTo(center, {noAnimation : "no"});
}, 1);
};
/**
* 清除对地图浏览区域限定的状态
* @return 无返回值
*/
AreaRestriction.clearBounds = function(){
if (!_isRestricted) {
return;
}
_map.removeEventListener("moveend", this._mapMoveendEvent);
_isRestricted = false;
};
})();
\ No newline at end of file
src/assets/apiv2.0_satellite.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
src/assets/getmodules 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
src/index.html
......@@ -7,6 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="assets/apiv2.0_satellite.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
<style>
body{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment