latest

.gitignore

-# See http://help.github.com/ignore-files/ for more about ignoring files.
-
-# compiled output
-/dist
-/tmp
-/out-tsc
-# Only exists if Bazel was run
-/bazel-out
-
-# dependencies
-/node_modules
-
-# profiling files
-chrome-profiler-events.json
-speed-measure-plugin.json
-
-# IDEs and editors
-/.idea
-.project
-.classpath
-.c9/
-*.launch
-.settings/
-*.sublime-workspace
-
-# IDE - VSCode
-.vscode/*
-!.vscode/settings.json
-!.vscode/tasks.json
-!.vscode/launch.json
-!.vscode/extensions.json
-.history/*
-
-# misc
-/.sass-cache
-/connect.lock
-/coverage
-/libpeerconnection.log
-npm-debug.log
-yarn-error.log
-testem.log
-/typings
-
-# System Files
-.DS_Store
-Thumbs.db
+wwwroot/*.js
+node_modules
+typings
+dist

.swagger-codegen/VERSION

+2.4.8-SNAPSHOT
\ No newline at end of file

CanvasLayer.js

+/**
+ * 一直覆盖在当前地图视野的Canvas对象
+ *
+ * @author nikai (@胖嘟嘟的骨头, nikai@baidu.com)
+ *
+ * @param 
+ * {
+ *     map 地图实例对象
+ * }
+ */ 
+    
+function CanvasLayer(options){
+    this.options = options || {};
+    this.paneName = this.options.paneName || 'labelPane';
+    this.zIndex = this.options.zIndex || 0;
+    this._map = options.map;
+    this._lastDrawTime = null;
+    this.show();
+}
+
+CanvasLayer.prototype = new BMap.Overlay();
+
+CanvasLayer.prototype.initialize = function(map){
+    this._map = map;
+    var canvas = this.canvas = document.createElement("canvas");
+    canvas.style.cssText = "position:absolute;"
+                            + "left:0;" 
+                            + "top:0;"
+                            + "z-index:" + this.zIndex + ";";
+    this.adjustSize();
+    map.getPanes()[this.paneName].appendChild(canvas);
+    var that = this;
+    map.addEventListener('resize', function () {
+        that.adjustSize();
+        that._draw();
+    });
+    return this.canvas;
+}
+
+CanvasLayer.prototype.adjustSize = function(){
+    var size = this._map.getSize();
+    var canvas = this.canvas;
+    canvas.width = size.width;
+    canvas.height = size.height;
+    canvas.style.width = canvas.width + "px";
+    canvas.style.height = canvas.height + "px";
+}
+
+CanvasLayer.prototype.draw = function(){
+    if (!this._lastDrawTime || new Date() - this._lastDrawTime > 10) {
+        this._draw();
+    }
+    this._lastDrawTime = new Date();
+}
+
+CanvasLayer.prototype._draw = function(){
+    var map = this._map;
+    var size = map.getSize();
+    var center = map.getCenter();
+    if (center) {
+        var pixel = map.pointToOverlayPixel(center);
+        this.canvas.style.left = pixel.x - size.width / 2 + 'px';
+        this.canvas.style.top = pixel.y - size.height / 2 + 'px';
+        this.dispatchEvent('draw');
+        this.options.update && this.options.update.call(this);
+    }
+}
+
+CanvasLayer.prototype.getContainer = function(){
+    return this.canvas;
+}
+
+CanvasLayer.prototype.show = function(){
+    if (!this.canvas) {
+        this._map.addOverlay(this);
+    }
+    this.canvas.style.display = "block";
+}
+
+CanvasLayer.prototype.hide = function(){
+    this.canvas.style.display = "none";
+    //this._map.removeOverlay(this);
+}
+
+CanvasLayer.prototype.setZIndex = function(zIndex){
+    this.canvas.style.zIndex = zIndex;
+}
+
+CanvasLayer.prototype.getZIndex = function(){
+    return this.zIndex;
+}

README.md

-# Map
+## @
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.3.9.
+### swagger api
+```
+java -jar .\modules\swagger-codegen-cli\target\swagger-codegen-cli.jar generate -i http://localhost:8080/v2/api-docs -l typescript-angular -o D:\projects\map
+```
 
-## Development server
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+### publishing
 
-## Code scaffolding
+First build the package than run ```npm publish```
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+### consuming
 
-## Build
+Navigate to the folder of your consuming project and run one of next commands.
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
+_published:_
 
-## Running unit tests
+```
+npm install @ --save
+```
 
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+_without publishing (not recommended):_
 
-## Running end-to-end tests
+```
+npm install PATH_TO_GENERATED_PACKAGE --save
+```
 
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+_using `npm link`:_
 
-## Further help
+In PATH_TO_GENERATED_PACKAGE:
+```
+npm link
+```
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+In your project:
+```
+npm link 
+```
+
+__Note for Windows users:__ The Angular CLI has troubles to use linked npm packages.
+Please refer to this issue https://github.com/angular/angular-cli/issues/8284 for a solution / workaround.
+Published packages are not effected by this issue.
+
+
+#### General usage
+
+In your Angular project:
+
+
+```
+// without configuring providers
+import { ApiModule } from '';
+import { HttpClientModule } from '@angular/common/http';
+
+
+@NgModule({
+    imports: [
+        ApiModule,
+        // make sure to import the HttpClientModule in the AppModule only,
+        // see https://github.com/angular/angular/issues/20575
+        HttpClientModule
+    ],
+    declarations: [ AppComponent ],
+    providers: [],
+    bootstrap: [ AppComponent ]
+})
+export class AppModule {}
+```
+
+```
+// configuring providers
+import { ApiModule, Configuration, ConfigurationParameters } from '';
+
+export function apiConfigFactory (): Configuration => {
+  const params: ConfigurationParameters = {
+    // set configuration parameters here.
+  }
+  return new Configuration(params);
+}
+
+@NgModule({
+    imports: [ ApiModule.forRoot(apiConfigFactory) ],
+    declarations: [ AppComponent ],
+    providers: [],
+    bootstrap: [ AppComponent ]
+})
+export class AppModule {}
+```
+
+```
+import { DefaultApi } from '';
+
+export class AppComponent {
+	 constructor(private apiGateway: DefaultApi) { }
+}
+```
+
+Note: The ApiModule is restricted to being instantiated once app wide.
+This is to ensure that all services are treated as singletons.
+
+#### Using multiple swagger files / APIs / ApiModules
+In order to use multiple `ApiModules` generated from different swagger files,
+you can create an alias name when importing the modules
+in order to avoid naming conflicts:
+```
+import { ApiModule } from 'my-api-path';
+import { ApiModule as OtherApiModule } from 'my-other-api-path';
+import { HttpClientModule } from '@angular/common/http';
+
+
+@NgModule({
+  imports: [
+    ApiModule,
+    OtherApiModule,
+    // make sure to import the HttpClientModule in the AppModule only,
+    // see https://github.com/angular/angular/issues/20575
+    HttpClientModule
+  ]
+})
+export class AppModule {
+
+}
+```
+
+
+### Set service base path
+If different than the generated base path, during app bootstrap, you can provide the base path to your service. 
+
+```
+import { BASE_PATH } from '';
+
+bootstrap(AppComponent, [
+    { provide: BASE_PATH, useValue: 'https://your-web-service.com' },
+]);
+```
+or
+
+```
+import { BASE_PATH } from '';
+
+@NgModule({
+    imports: [],
+    declarations: [ AppComponent ],
+    providers: [ provide: BASE_PATH, useValue: 'https://your-web-service.com' ],
+    bootstrap: [ AppComponent ]
+})
+export class AppModule {}
+```
+
+
+#### Using @angular/cli
+First extend your `src/environments/*.ts` files by adding the corresponding base path:
+
+```
+export const environment = {
+  production: false,
+  API_BASE_PATH: 'http://127.0.0.1:8080'
+};
+```
+
+In the src/app/app.module.ts:
+```
+import { BASE_PATH } from '';
+import { environment } from '../environments/environment';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [ ],
+  providers: [{ provide: BASE_PATH, useValue: environment.API_BASE_PATH }],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }
+```  
\ No newline at end of file

angular.json

@@ -13,6 +13,7 @@
           "style": "less"
         }
       },
+      
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
@@ -29,7 +30,10 @@
             "styles": [
               "src/styles.less"
             ],
-            "scripts": [],
+            
+            "scripts":[
+        
+            ],
             "es5BrowserSupport": true
           },
           "configurations": {
@@ -64,6 +68,7 @@
           "options": {
             "browserTarget": "map:build"
           },
+       
           "configurations": {
             "production": {
               "browserTarget": "map:build:production"

api-docs.json

+{"swagger":"2.0","info":{"description":"简单优雅的风格","version":"1.0","title":"智慧监控平台文档","termsOfService":"no terms of serviceUrl"},"host":"localhost:8080","basePath":"/","tags":[{"name":"摄像头","description":"Camera Controller"},{"name":"标段","description":"Scetion Controller"},{"name":"路线","description":"Course Controller"},{"name":"项目","description":"Project Controller"}],"paths":{"/camera/add":{"post":{"tags":["摄像头"],"summary":"新增","operationId":"addUsingPOST","consumes":["application/json"],"produces":["*/*"],"parameters":[{"name":"id","in":"query","required":false,"type":"integer","format":"int32"},{"name":"section","in":"query","required":false,"type":"string"},{"name":"name","in":"query","required":false,"type":"string"},{"name":"coordinate","in":"query","required":false,"type":"string"},{"name":"delFlag","in":"query","required":false,"type":"integer","format":"int32"}],"responses":{"200":{"description":"请求正常完成","schema":{"$ref":"#/definitions/ResultBean«int»"}},"201":{"description":"Created"},"400":{"description":"请求中有语法问题，或不能满足请求"},"401":{"description":"Unauthorized"},"403":{"description":"Forbidden"},"404":{"description":"Not Found"},"500":{"description":"服务器出现异常"}}}},"/camera/delete":{"delete":{"tags":["摄像头"],"summary":"删除","operationId":"deleteUsingDELETE","produces":["*/*"],"parameters":[{"name":"id","in":"query","description":"id","required":false,"type":"integer","format":"int32"}],"responses":{"200":{"description":"请求正常完成","schema":{"$ref":"#/definitions/ResultBean«Camera»"}},"204":{"description":"No Content"},"400":{"description":"请求中有语法问题，或不能满足请求"},"401":{"description":"Unauthorized"},"403":{"description":"Forbidden"},"500":{"description":"服务器出现异常"}}}},"/camera/get/{id}":{"get":{"tags":["摄像头"],"summary":"获取摄像头信息","description":"获取摄像头信息","operationId":"getUsingGET","produces":["*/*","application/json"],"parameters":[{"name":"id","in":"path","description":"摄像头id是数字","required":true,"type":"string"}],"responses":{"200":{"description":"请求正常完成","schema":{"$ref":"#/definitions/Camera"}},"400":{"description":"请求中有语法问题，或不能满足请求"},"401":{"description":"Unauthorized"},"403":{"description":"Forbidden"},"404":{"description":"Not Found"},"500":{"description":"服务器出现异常"}}}},"/camera/list":{"get":{"tags":["摄像头"],"summary":"获取摄像头列表","operationId":"listUsingGET","produces":["*/*"],"parameters":[{"name":"id","in":"query","required":false,"type":"integer","format":"int32"},{"name":"section","in":"query","required":false,"type":"string"},{"name":"name","in":"query","required":false,"type":"string"},{"name":"coordinate","in":"query","required":false,"type":"string"},{"name":"delFlag","in":"query","required":false,"type":"integer","format":"int32"}],"responses":{"200":{"description":"请求正常完成","schema":{"$ref":"#/definitions/ResultBean«List«Camera»»"}},"400":{"description":"请求中有语法问题，或不能满足请求"},"401":{"description":"Unauthorized"},"403":{"description":"Forbidden"},"404":{"description":"Not Found"},"500":{"description":"服务器出现异常"}}}},"/camera/update":{"put":{"tags":["摄像头"],"summary":"修改","operationId":"updateUsingPUT","consumes":["application/json"],"produces":["*/*"],"parameters":[{"name":"id","in":"query","required":false,"type":"integer","format":"int32"},{"name":"section","in":"query","required":false,"type":"string"},{"name":"name","in":"query","required":false,"type":"string"},{"name":"coordinate","in":"query","required":false,"type":"string"},{"name":"delFlag","in":"query","required":false,"type":"integer","format":"int32"}],"responses":{"200":{"description":"请求正常完成","schema":{"$ref":"#/definitions/ResultBean«Camera»"}},"201":{"description":"Created"},"400":{"description":"请求中有语法问题，或不能满足请求"},"401":{"description":"Unauthorized"},"403":{"description":"Forbidden"},"404":{"description":"Not Found"},"500":{"description":"服务器出现异常"}}}},"/course/add":{"post":{"tags":["路线"],"summary":"新增","operationId":"addUsingPOST_1","consumes":["application/json"],"produces":["*/*"],"parameters":[{"name":"id","in":"query","required":false,"type":"integer","format":"int32"},{"name":"name","in":"query","required":false,"type":"string"},{"name":"lineStyle","in":"query","required":false,"type":"string"},{"name":"lineWidth","in":"query","required":false,"type":"integer","format":"int32"},{"name":"mark","in":"query","required":false,"type":"integer","format":"int32"},{"name":"delFlag","in":"query","required":false,"type":"integer","format":"int32"}],"responses":{"200":{"description":"请求正常完成","schema":{"$ref":"#/definitions/ResultBean«int»"}},"201":{"description":"Created"},"400":{"description":"请求中有语法问题，或不能满足请求"},"401":{"description":"Unauthorized"},"403":{"description":"Forbidden"},"404":{"description":"Not Found"},"500":{"description":"服务器出现异常"}}}},"/course/delete":{"delete":{"tags":["路线"],"summary":"删除","operationId":"deleteUsingDELETE_1","produces":["*/*"],"parameters":[{"name":"id","in":"query","description":"id","required":false,"type":"integer","format":"int32"}],"responses":{"200":{"description":"请求正常完成","schema":{"$ref":"#/definitions/ResultBean«Course»"}},"204":{"description":"No Content"},"400":{"description":"请求中有语法问题，或不能满足请求"},"401":{"description":"Unauthorized"},"403":{"description":"Forbidden"},"500":{"description":"服务器出现异常"}}}},"/course/get/{id}":{"get":{"tags":["路线"],"summary":"获取路线信息","description":"获取路线信息","operationId":"getUsingGET_1","produces":["*/*","application/json"],"parameters":[{"name":"id","in":"path","description":"路线id是数字","required":true,"type":"string"}],"responses":{"200":{"description":"请求正常完成","schema":{"$ref":"#/definitions/Course"}},"400":{"description":"请求中有语法问题，或不能满足请求"},"401":{"description":"Unauthorized"},"403":{"description":"Forbidden"},"404":{"description":"Not Found"},"500":{"description":"服务器出现异常"}}}},"/course/list":{"get":{"tags":["路线"],"summary":"获取路线列表","operationId":"listUsingGET_1","produces":["*/*"],"parameters":[{"name":"id","in":"query","required":false,"type":"integer","format":"int32"},{"name":"name","in":"query","required":false,"type":"string"},{"name":"lineStyle","in":"query","required":false,"type":"string"},{"name":"lineWidth","in":"query","required":false,"type":"integer","format":"int32"},{"name":"mark","in":"query","required":false,"type":"integer","format":"int32"},{"name":"delFlag","in":"query","required":false,"type":"integer","format":"int32"}],"responses":{"200":{"description":"请求正常完成","schema":{"$ref":"#/definitions/ResultBean«List«Course»»"}},"400":{"description":"请求中有语法问题，或不能满足请求"},"401":{"description":"Unauthorized"},"403":{"description":"Forbidden"},"404":{"description":"Not Found"},"500":{"description":"服务器出现异常"}}}},"/course/update":{"put":{"tags":["路线"],"summary":"修改","operationId":"updateUsingPUT_1","consumes":["application/json"],"produces":["*/*"],"parameters":[{"name":"id","in":"query","required":false,"type":"integer","format":"int32"},{"name":"name","in":"query","required":false,"type":"string"},{"name":"lineStyle","in":"query","required":false,"type":"string"},{"name":"lineWidth","in":"query","required":false,"type":"integer","format":"int32"},{"name":"mark","in":"query","required":false,"type":"integer","format":"int32"},{"name":"delFlag","in":"query","required":false,"type":"integer","format":"int32"}],"responses":{"200":{"description":"请求正常完成","schema":{"$ref":"#/definitions/ResultBean«Course»"}},"201":{"description":"Created"},"400":{"description":"请求中有语法问题，或不能满足请求"},"401":{"description":"Unauthorized"},"403":{"description":"Forbidden"},"404":{"description":"Not Found"},"500":{"description":"服务器出现异常"}}}},"/project/add":{"post":{"tags":["项目"],"summary":"新增","operationId":"addUsingPOST_2","consumes":["application/json"],"produces":["*/*"],"parameters":[{"name":"id","in":"query","required":false,"type":"integer","format":"int32"},{"name":"course","in":"query","required":false,"type":"string"},{"name":"name","in":"query","required":false,"type":"string"},{"name":"mileage","in":"query","required":false,"type":"number","format":"double"},{"name":"capital","in":"query","required":false,"type":"number","format":"double"},{"name":"lineStyle","in":"query","required":false,"type":"string"},{"name":"lineWidth","in":"query","required":false,"type":"integer","format":"int32"},{"name":"delFlag","in":"query","required":false,"type":"integer","format":"int32"}],"responses":{"200":{"description":"请求正常完成","schema":{"$ref":"#/definitions/ResultBean«int»"}},"201":{"description":"Created"},"400":{"description":"请求中有语法问题，或不能满足请求"},"401":{"description":"Unauthorized"},"403":{"description":"Forbidden"},"404":{"description":"Not Found"},"500":{"description":"服务器出现异常"}}}},"/project/delete":{"delete":{"tags":["项目"],"summary":"删除","operationId":"deleteUsingDELETE_2","produces":["*/*"],"parameters":[{"name":"id","in":"query","description":"id","required":false,"type":"integer","format":"int32"}],"responses":{"200":{"description":"请求正常完成","schema":{"$ref":"#/definitions/ResultBean«Project»"}},"204":{"description":"No Content"},"400":{"description":"请求中有语法问题，或不能满足请求"},"401":{"description":"Unauthorized"},"403":{"description":"Forbidden"},"500":{"description":"服务器出现异常"}}}},"/project/get/{id}":{"get":{"tags":["项目"],"summary":"获取项目信息","description":"获取项目信息","operationId":"getUsingGET_2","produces":["*/*","application/json"],"parameters":[{"name":"id","in":"path","description":"项目id是数字","required":true,"type":"string"}],"responses":{"200":{"description":"请求正常完成","schema":{"$ref":"#/definitions/Project"}},"400":{"description":"请求中有语法问题，或不能满足请求"},"401":{"description":"Unauthorized"},"403":{"description":"Forbidden"},"404":{"description":"Not Found"},"500":{"description":"服务器出现异常"}}}},"/project/list":{"get":{"tags":["项目"],"summary":"获取项目列表","operationId":"listUsingGET_2","produces":["*/*"],"parameters":[{"name":"id","in":"query","required":false,"type":"integer","format":"int32"},{"name":"course","in":"query","required":false,"type":"string"},{"name":"name","in":"query","required":false,"type":"string"},{"name":"mileage","in":"query","required":false,"type":"number","format":"double"},{"name":"capital","in":"query","required":false,"type":"number","format":"double"},{"name":"lineStyle","in":"query","required":false,"type":"string"},{"name":"lineWidth","in":"query","required":false,"type":"integer","format":"int32"},{"name":"delFlag","in":"query","required":false,"type":"integer","format":"int32"}],"responses":{"200":{"description":"请求正常完成","schema":{"$ref":"#/definitions/ResultBean«List«Project»»"}},"400":{"description":"请求中有语法问题，或不能满足请求"},"401":{"description":"Unauthorized"},"403":{"description":"Forbidden"},"404":{"description":"Not Found"},"500":{"description":"服务器出现异常"}}}},"/project/update":{"put":{"tags":["项目"],"summary":"修改","operationId":"updateUsingPUT_2","consumes":["application/json"],"produces":["*/*"],"parameters":[{"name":"id","in":"query","required":false,"type":"integer","format":"int32"},{"name":"course","in":"query","required":false,"type":"string"},{"name":"name","in":"query","required":false,"type":"string"},{"name":"mileage","in":"query","required":false,"type":"number","format":"double"},{"name":"capital","in":"query","required":false,"type":"number","format":"double"},{"name":"lineStyle","in":"query","required":false,"type":"string"},{"name":"lineWidth","in":"query","required":false,"type":"integer","format":"int32"},{"name":"delFlag","in":"query","required":false,"type":"integer","format":"int32"}],"responses":{"200":{"description":"请求正常完成","schema":{"$ref":"#/definitions/ResultBean«Project»"}},"201":{"description":"Created"},"400":{"description":"请求中有语法问题，或不能满足请求"},"401":{"description":"Unauthorized"},"403":{"description":"Forbidden"},"404":{"description":"Not Found"},"500":{"description":"服务器出现异常"}}}},"/scetion/add":{"post":{"tags":["标段"],"summary":"新增","operationId":"addUsingPOST_3","consumes":["application/json"],"produces":["*/*"],"parameters":[{"name":"id","in":"query","required":false,"type":"integer","format":"int32"},{"name":"project","in":"query","required":false,"type":"string"},{"name":"name","in":"query","required":false,"type":"string"},{"name":"coordinate","in":"query","required":false,"type":"string"},{"name":"mileage","in":"query","required":false,"type":"number","format":"double"},{"name":"lineStyle","in":"query","required":false,"type":"string"},{"name":"lineWidth","in":"query","required":false,"type":"integer","format":"int32"},{"name":"delFlag","in":"query","required":false,"type":"integer","format":"int32"}],"responses":{"200":{"description":"请求正常完成","schema":{"$ref":"#/definitions/ResultBean«int»"}},"201":{"description":"Created"},"400":{"description":"请求中有语法问题，或不能满足请求"},"401":{"description":"Unauthorized"},"403":{"description":"Forbidden"},"404":{"description":"Not Found"},"500":{"description":"服务器出现异常"}}}},"/scetion/delete":{"delete":{"tags":["标段"],"summary":"删除","operationId":"deleteUsingDELETE_3","produces":["*/*"],"parameters":[{"name":"id","in":"query","description":"id","required":false,"type":"integer","format":"int32"}],"responses":{"200":{"description":"请求正常完成","schema":{"$ref":"#/definitions/ResultBean«Scetion»"}},"204":{"description":"No Content"},"400":{"description":"请求中有语法问题，或不能满足请求"},"401":{"description":"Unauthorized"},"403":{"description":"Forbidden"},"500":{"description":"服务器出现异常"}}}},"/scetion/get/{id}":{"get":{"tags":["标段"],"summary":"获取标段信息","description":"获取标段信息","operationId":"getUsingGET_3","produces":["*/*","application/json"],"parameters":[{"name":"id","in":"path","description":"标段id是数字","required":true,"type":"string"}],"responses":{"200":{"description":"请求正常完成","schema":{"$ref":"#/definitions/Scetion"}},"400":{"description":"请求中有语法问题，或不能满足请求"},"401":{"description":"Unauthorized"},"403":{"description":"Forbidden"},"404":{"description":"Not Found"},"500":{"description":"服务器出现异常"}}}},"/scetion/list":{"get":{"tags":["标段"],"summary":"获取标段列表","operationId":"listUsingGET_3","produces":["*/*"],"parameters":[{"name":"id","in":"query","required":false,"type":"integer","format":"int32"},{"name":"project","in":"query","required":false,"type":"string"},{"name":"name","in":"query","required":false,"type":"string"},{"name":"coordinate","in":"query","required":false,"type":"string"},{"name":"mileage","in":"query","required":false,"type":"number","format":"double"},{"name":"lineStyle","in":"query","required":false,"type":"string"},{"name":"lineWidth","in":"query","required":false,"type":"integer","format":"int32"},{"name":"delFlag","in":"query","required":false,"type":"integer","format":"int32"}],"responses":{"200":{"description":"请求正常完成","schema":{"$ref":"#/definitions/ResultBean«List«Scetion»»"}},"400":{"description":"请求中有语法问题，或不能满足请求"},"401":{"description":"Unauthorized"},"403":{"description":"Forbidden"},"404":{"description":"Not Found"},"500":{"description":"服务器出现异常"}}}},"/scetion/update":{"put":{"tags":["标段"],"summary":"修改","operationId":"updateUsingPUT_3","consumes":["application/json"],"produces":["*/*"],"parameters":[{"name":"id","in":"query","required":false,"type":"integer","format":"int32"},{"name":"project","in":"query","required":false,"type":"string"},{"name":"name","in":"query","required":false,"type":"string"},{"name":"coordinate","in":"query","required":false,"type":"string"},{"name":"mileage","in":"query","required":false,"type":"number","format":"double"},{"name":"lineStyle","in":"query","required":false,"type":"string"},{"name":"lineWidth","in":"query","required":false,"type":"integer","format":"int32"},{"name":"delFlag","in":"query","required":false,"type":"integer","format":"int32"}],"responses":{"200":{"description":"请求正常完成","schema":{"$ref":"#/definitions/ResultBean«Scetion»"}},"201":{"description":"Created"},"400":{"description":"请求中有语法问题，或不能满足请求"},"401":{"description":"Unauthorized"},"403":{"description":"Forbidden"},"404":{"description":"Not Found"},"500":{"description":"服务器出现异常"}}}}},"definitions":{"Camera":{"type":"object","properties":{"coordinate":{"type":"string"},"delFlag":{"type":"integer","format":"int32"},"id":{"type":"integer","format":"int32"},"name":{"type":"string"},"section":{"type":"string"}},"title":"Camera"},"Course":{"type":"object","properties":{"delFlag":{"type":"integer","format":"int32"},"id":{"type":"integer","format":"int32"},"lineStyle":{"type":"string"},"lineWidth":{"type":"integer","format":"int32"},"mark":{"type":"integer","format":"int32"},"name":{"type":"string"}},"title":"Course"},"Project":{"type":"object","properties":{"capital":{"type":"number","format":"double"},"course":{"type":"string"},"delFlag":{"type":"integer","format":"int32"},"id":{"type":"integer","format":"int32"},"lineStyle":{"type":"string"},"lineWidth":{"type":"integer","format":"int32"},"mileage":{"type":"number","format":"double"},"name":{"type":"string"}},"title":"Project"},"ResultBean«Camera»":{"type":"object","properties":{"code":{"type":"integer","format":"int32"},"data":{"$ref":"#/definitions/Camera"},"msg":{"type":"string"}},"title":"ResultBean«Camera»"},"ResultBean«Course»":{"type":"object","properties":{"code":{"type":"integer","format":"int32"},"data":{"$ref":"#/definitions/Course"},"msg":{"type":"string"}},"title":"ResultBean«Course»"},"ResultBean«List«Camera»»":{"type":"object","properties":{"code":{"type":"integer","format":"int32"},"data":{"type":"array","items":{"$ref":"#/definitions/Camera"}},"msg":{"type":"string"}},"title":"ResultBean«List«Camera»»"},"ResultBean«List«Course»»":{"type":"object","properties":{"code":{"type":"integer","format":"int32"},"data":{"type":"array","items":{"$ref":"#/definitions/Course"}},"msg":{"type":"string"}},"title":"ResultBean«List«Course»»"},"ResultBean«List«Project»»":{"type":"object","properties":{"code":{"type":"integer","format":"int32"},"data":{"type":"array","items":{"$ref":"#/definitions/Project"}},"msg":{"type":"string"}},"title":"ResultBean«List«Project»»"},"ResultBean«List«Scetion»»":{"type":"object","properties":{"code":{"type":"integer","format":"int32"},"data":{"type":"array","items":{"$ref":"#/definitions/Scetion"}},"msg":{"type":"string"}},"title":"ResultBean«List«Scetion»»"},"ResultBean«Project»":{"type":"object","properties":{"code":{"type":"integer","format":"int32"},"data":{"$ref":"#/definitions/Project"},"msg":{"type":"string"}},"title":"ResultBean«Project»"},"ResultBean«Scetion»":{"type":"object","properties":{"code":{"type":"integer","format":"int32"},"data":{"$ref":"#/definitions/Scetion"},"msg":{"type":"string"}},"title":"ResultBean«Scetion»"},"ResultBean«int»":{"type":"object","properties":{"code":{"type":"integer","format":"int32"},"data":{"type":"integer","format":"int32"},"msg":{"type":"string"}},"title":"ResultBean«int»"},"Scetion":{"type":"object","properties":{"coordinate":{"type":"string"},"delFlag":{"type":"integer","format":"int32"},"id":{"type":"integer","format":"int32"},"lineStyle":{"type":"string"},"lineWidth":{"type":"integer","format":"int32"},"mileage":{"type":"number","format":"double"},"name":{"type":"string"},"project":{"type":"string"}},"title":"Scetion"}}}
\ No newline at end of file

git_push.sh

+#!/bin/sh
+# ref: https://help.github.com/articles/adding-an-existing-project-to-github-using-the-command-line/
+#
+# Usage example: /bin/sh ./git_push.sh wing328 swagger-petstore-perl "minor update"
+
+git_user_id=$1
+git_repo_id=$2
+release_note=$3
+
+if [ "$git_user_id" = "" ]; then
+    git_user_id="GIT_USER_ID"
+    echo "[INFO] No command line input provided. Set \$git_user_id to $git_user_id"
+fi
+
+if [ "$git_repo_id" = "" ]; then
+    git_repo_id="GIT_REPO_ID"
+    echo "[INFO] No command line input provided. Set \$git_repo_id to $git_repo_id"
+fi
+
+if [ "$release_note" = "" ]; then
+    release_note="Minor update"
+    echo "[INFO] No command line input provided. Set \$release_note to $release_note"
+fi
+
+# Initialize the local directory as a Git repository
+git init
+
+# Adds the files in the local repository and stages them for commit.
+git add .
+
+# Commits the tracked changes and prepares them to be pushed to a remote repository. 
+git commit -m "$release_note"
+
+# Sets the new remote
+git_remote=`git remote`
+if [ "$git_remote" = "" ]; then # git remote not defined
+
+    if [ "$GIT_TOKEN" = "" ]; then
+        echo "[INFO] \$GIT_TOKEN (environment variable) is not set. Using the git credential in your environment."
+        git remote add origin https://github.com/${git_user_id}/${git_repo_id}.git
+    else
+        git remote add origin https://${git_user_id}:${GIT_TOKEN}@github.com/${git_user_id}/${git_repo_id}.git
+    fi
+
+fi
+
+git pull origin master
+
+# Pushes (Forces) the changes in the local repository up to the remote repository
+echo "Git pushing to https://github.com/${git_user_id}/${git_repo_id}.git"
+git push origin master 2>&1 | grep -v 'To https'
+

package-lock.json

@@ -121,14 +121,6 @@
         "rxjs": "6.3.3"
       }
     },
-    "@angular/animations": {
-      "version": "7.2.15",
-      "resolved": "https://registry.npm.taobao.org/@angular/animations/download/@angular/animations-7.2.15.tgz",
-      "integrity": "sha1-mAwfUjp51LfLRFCPV/ugby4Icvo=",
-      "requires": {
-        "tslib": "^1.9.0"
-      }
-    },
     "@angular/cli": {
       "version": "7.3.9",
       "resolved": "https://registry.npm.taobao.org/@angular/cli/download/@angular/cli-7.3.9.tgz?cache=0&sync_timestamp=1563411123554&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40angular%2Fcli%2Fdownload%2F%40angular%2Fcli-7.3.9.tgz",
@@ -997,6 +989,14 @@
       "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
       "dev": true
     },
+    "angular2-baidu-map": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npm.taobao.org/angular2-baidu-map/download/angular2-baidu-map-4.7.0.tgz",
+      "integrity": "sha1-6xZRqjqd5subXXbbKErtHyJRGs0=",
+      "requires": {
+        "tslib": "^1.7.1"
+      }
+    },
     "ansi-colors": {
       "version": "3.2.4",
       "resolved": "https://registry.npm.taobao.org/ansi-colors/download/ansi-colors-3.2.4.tgz",

package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "ng serve --proxy--config proxy.json",
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",
@@ -11,7 +11,6 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~7.2.0",
     "@angular/common": "~7.2.0",
     "@angular/compiler": "~7.2.0",
     "@angular/core": "~7.2.0",
@@ -19,6 +18,7 @@
     "@angular/platform-browser": "~7.2.0",
     "@angular/platform-browser-dynamic": "~7.2.0",
     "@angular/router": "~7.2.0",
+    "angular2-baidu-map": "^4.7.0",
     "core-js": "^2.5.4",
     "rxjs": "~6.3.3",
     "tslib": "^1.9.0",

proxy.json

+
+
+[
+    {
+      "context": [
+        "/project",
+        "/scetion",
+        "/course",
+        "/camera"
+      ],
+      "target": "http://localhost:8080",
+      "secure": false
+    }
+  ]
\ No newline at end of file

src/app/api/.gitignore

+wwwroot/*.js
+node_modules
+typings
+dist

src/app/api/.swagger-codegen-ignore

+# Swagger Codegen Ignore
+# Generated by swagger-codegen https://github.com/swagger-api/swagger-codegen
+
+# Use this file to prevent files from being overwritten by the generator.
+# The patterns follow closely to .gitignore or .dockerignore.
+
+# As an example, the C# client generator defines ApiClient.cs.
+# You can make changes and tell Swagger Codgen to ignore just this file by uncommenting the following line:
+#ApiClient.cs
+
+# You can match any string of characters against a directory, file or extension with a single asterisk (*):
+#foo/*/qux
+# The above matches foo/bar/qux and foo/baz/qux, but not foo/bar/baz/qux
+
+# You can recursively match patterns against a directory, file or extension with a double asterisk (**):
+#foo/**/qux
+# This matches foo/bar/qux, foo/baz/qux, and foo/bar/baz/qux
+
+# You can also negate patterns with an exclamation (!).
+# For example, you can ignore all files in a docs folder with the file extension .md:
+#docs/*.md
+# Then explicitly reverse the ignore rule for a single file:
+#!docs/README.md

src/app/api/.swagger-codegen/VERSION

+2.4.8-SNAPSHOT
\ No newline at end of file

src/app/api/README.md

+## @
+
+### Building
+
+To install the required dependencies and to build the typescript sources run:
+```
+npm install
+npm run build
+```
+
+### publishing
+
+First build the package than run ```npm publish```
+
+### consuming
+
+Navigate to the folder of your consuming project and run one of next commands.
+
+_published:_
+
+```
+npm install @ --save
+```
+
+_without publishing (not recommended):_
+
+```
+npm install PATH_TO_GENERATED_PACKAGE --save
+```
+
+_using `npm link`:_
+
+In PATH_TO_GENERATED_PACKAGE:
+```
+npm link
+```
+
+In your project:
+```
+npm link 
+```
+
+__Note for Windows users:__ The Angular CLI has troubles to use linked npm packages.
+Please refer to this issue https://github.com/angular/angular-cli/issues/8284 for a solution / workaround.
+Published packages are not effected by this issue.
+
+
+#### General usage
+
+In your Angular project:
+
+
+```
+// without configuring providers
+import { ApiModule } from '';
+import { HttpClientModule } from '@angular/common/http';
+
+
+@NgModule({
+    imports: [
+        ApiModule,
+        // make sure to import the HttpClientModule in the AppModule only,
+        // see https://github.com/angular/angular/issues/20575
+        HttpClientModule
+    ],
+    declarations: [ AppComponent ],
+    providers: [],
+    bootstrap: [ AppComponent ]
+})
+export class AppModule {}
+```
+
+```
+// configuring providers
+import { ApiModule, Configuration, ConfigurationParameters } from '';
+
+export function apiConfigFactory (): Configuration => {
+  const params: ConfigurationParameters = {
+    // set configuration parameters here.
+  }
+  return new Configuration(params);
+}
+
+@NgModule({
+    imports: [ ApiModule.forRoot(apiConfigFactory) ],
+    declarations: [ AppComponent ],
+    providers: [],
+    bootstrap: [ AppComponent ]
+})
+export class AppModule {}
+```
+
+```
+import { DefaultApi } from '';
+
+export class AppComponent {
+	 constructor(private apiGateway: DefaultApi) { }
+}
+```
+
+Note: The ApiModule is restricted to being instantiated once app wide.
+This is to ensure that all services are treated as singletons.
+
+#### Using multiple swagger files / APIs / ApiModules
+In order to use multiple `ApiModules` generated from different swagger files,
+you can create an alias name when importing the modules
+in order to avoid naming conflicts:
+```
+import { ApiModule } from 'my-api-path';
+import { ApiModule as OtherApiModule } from 'my-other-api-path';
+import { HttpClientModule } from '@angular/common/http';
+
+
+@NgModule({
+  imports: [
+    ApiModule,
+    OtherApiModule,
+    // make sure to import the HttpClientModule in the AppModule only,
+    // see https://github.com/angular/angular/issues/20575
+    HttpClientModule
+  ]
+})
+export class AppModule {
+
+}
+```
+
+
+### Set service base path
+If different than the generated base path, during app bootstrap, you can provide the base path to your service. 
+
+```
+import { BASE_PATH } from '';
+
+bootstrap(AppComponent, [
+    { provide: BASE_PATH, useValue: 'https://your-web-service.com' },
+]);
+```
+or
+
+```
+import { BASE_PATH } from '';
+
+@NgModule({
+    imports: [],
+    declarations: [ AppComponent ],
+    providers: [ provide: BASE_PATH, useValue: 'https://your-web-service.com' ],
+    bootstrap: [ AppComponent ]
+})
+export class AppModule {}
+```
+
+
+#### Using @angular/cli
+First extend your `src/environments/*.ts` files by adding the corresponding base path:
+
+```
+export const environment = {
+  production: false,
+  API_BASE_PATH: 'http://127.0.0.1:8080'
+};
+```
+
+In the src/app/app.module.ts:
+```
+import { BASE_PATH } from '';
+import { environment } from '../environments/environment';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [ ],
+  providers: [{ provide: BASE_PATH, useValue: environment.API_BASE_PATH }],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }
+```  
\ No newline at end of file

src/app/api/api.module.ts

+import { NgModule, ModuleWithProviders, SkipSelf, Optional } from '@angular/core';
+import { Configuration } from './configuration';
+import { HttpClient } from '@angular/common/http';
+
+
+import { DefaultService } from './api/default.service';
+
+@NgModule({
+  imports:      [],
+  declarations: [],
+  exports:      [],
+  providers: [
+    DefaultService ]
+})
+export class ApiModule {
+    public static forRoot(configurationFactory: () => Configuration): ModuleWithProviders {
+        return {
+            ngModule: ApiModule,
+            providers: [ { provide: Configuration, useFactory: configurationFactory } ]
+        };
+    }
+
+    constructor( @Optional() @SkipSelf() parentModule: ApiModule,
+                 @Optional() http: HttpClient) {
+        if (parentModule) {
+            throw new Error('ApiModule is already loaded. Import in your base AppModule only.');
+        }
+        if (!http) {
+            throw new Error('You need to import the HttpClientModule in your AppModule! \n' +
+            'See also https://github.com/angular/angular/issues/20575');
+        }
+    }
+}

src/app/api/api/api.ts

+export * from './default.service';
+import { DefaultService } from './default.service';
+export const APIS = [DefaultService];

src/app/api/api/default.service.ts

+/**
+ * 智慧监控平台文档
+ * 简单优雅的风格
+ *
+ * OpenAPI spec version: 1.0
+ * 
+ *
+ * NOTE: This class is auto generated by the swagger code generator program.
+ * https://github.com/swagger-api/swagger-codegen.git
+ * Do not edit the class manually.
+ */
+/* tslint:disable:no-unused-variable member-ordering */
+
+import { Inject, Injectable, Optional }                      from '@angular/core';
+import { HttpClient, HttpHeaders, HttpParams,
+         HttpResponse, HttpEvent }                           from '@angular/common/http';
+import { CustomHttpUrlEncodingCodec }                        from '../encoder';
+
+
+
+import { Camera } from '../model/camera';
+import { Course } from '../model/course';
+import { Project } from '../model/project';
+import { ResultBeanCamera } from '../model/resultBeanCamera';
+import { ResultBeanCourse } from '../model/resultBeanCourse';
+import { ResultBeanListCamera } from '../model/resultBeanListCamera';
+import { ResultBeanListCourse } from '../model/resultBeanListCourse';
+import { ResultBeanListProject } from '../model/resultBeanListProject';
+import { ResultBeanListScetion } from '../model/resultBeanListScetion';
+import { ResultBeanProject } from '../model/resultBeanProject';
+import { ResultBeanScetion } from '../model/resultBeanScetion';
+import { ResultBeandouble } from '../model/resultBeandouble';
+import { ResultBeanint } from '../model/resultBeanint';
+import { Scetion } from '../model/scetion';
+
+import { BASE_PATH, COLLECTION_FORMATS }                     from '../variables';
+import { Configuration }                                     from '../configuration';
+import { Observable } from 'rxjs';
+
+
+@Injectable()
+export class DefaultService {
+
+    public basePath = 'http://localhost:8080';
+    public defaultHeaders = new HttpHeaders();
+    public configuration = new Configuration();
+
+    constructor(protected httpClient: HttpClient, @Optional()@Inject(BASE_PATH) basePath: string, @Optional() configuration: Configuration) {
+        if (basePath) {
+            this.basePath = basePath;
+        }
+        if (configuration) {
+            this.configuration = configuration;
+            this.basePath = basePath || configuration.basePath || this.basePath;
+        }
+    }
+
+    /**
+     * @param consumes string[] mime-types
+     * @return true: consumes contains 'multipart/form-data', false: otherwise
+     */
+    private canConsumeForm(consumes: string[]): boolean {
+        const form = 'multipart/form-data';
+        for (const consume of consumes) {
+            if (form === consume) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+
+    /**
+     * 新增
+     * 
+     * @param coordinate 
+     * @param delFlag 
+     * @param id 
+     * @param name 
+     * @param section 
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public addcameraUsingPOST(coordinate?: string, delFlag?: number, id?: number, name?: string, section?: number, observe?: 'body', reportProgress?: boolean): Observable<ResultBeanint>;
+    public addcameraUsingPOST(coordinate?: string, delFlag?: number, id?: number, name?: string, section?: number, observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<ResultBeanint>>;
+    public addcameraUsingPOST(coordinate?: string, delFlag?: number, id?: number, name?: string, section?: number, observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<ResultBeanint>>;
+    public addcameraUsingPOST(coordinate?: string, delFlag?: number, id?: number, name?: string, section?: number, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
+
+
+
+
+
+
+        let queryParameters = new HttpParams({encoder: new CustomHttpUrlEncodingCodec()});
+        if (coordinate !== undefined && coordinate !== null) {
+            queryParameters = queryParameters.set('coordinate', <any>coordinate);
+        }
+        if (delFlag !== undefined && delFlag !== null) {
+            queryParameters = queryParameters.set('delFlag', <any>delFlag);
+        }
+        if (id !== undefined && id !== null) {
+            queryParameters = queryParameters.set('id', <any>id);
+        }
+        if (name !== undefined && name !== null) {
+            queryParameters = queryParameters.set('name', <any>name);
+        }
+        if (section !== undefined && section !== null) {
+            queryParameters = queryParameters.set('section', <any>section);
+        }
+
+        let headers = this.defaultHeaders;
+
+        // to determine the Accept header
+        let httpHeaderAccepts: string[] = [
+            '*/*'
+        ];
+        const httpHeaderAcceptSelected: string | undefined = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        if (httpHeaderAcceptSelected != undefined) {
+            headers = headers.set('Accept', httpHeaderAcceptSelected);
+        }
+
+        // to determine the Content-Type header
+        const consumes: string[] = [
+            'application/json'
+        ];
+
+        return this.httpClient.post<ResultBeanint>(`${this.basePath}/camera/add`,
+            null,
+            {
+                params: queryParameters,
+                withCredentials: this.configuration.withCredentials,
+                headers: headers,
+                observe: observe,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
+    /**
+     * 新增
+     * 
+     * @param delFlag 
+     * @param id 
+     * @param lineStyle 
+     * @param lineWidth 
+     * @param mark 
+     * @param name 
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public addcourseUsingPOST1(delFlag?: number, id?: number, lineStyle?: string, lineWidth?: number, mark?: number, name?: string, observe?: 'body', reportProgress?: boolean): Observable<ResultBeanint>;
+    public addcourseUsingPOST1(delFlag?: number, id?: number, lineStyle?: string, lineWidth?: number, mark?: number, name?: string, observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<ResultBeanint>>;
+    public addcourseUsingPOST1(delFlag?: number, id?: number, lineStyle?: string, lineWidth?: number, mark?: number, name?: string, observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<ResultBeanint>>;
+    public addcourseUsingPOST1(delFlag?: number, id?: number, lineStyle?: string, lineWidth?: number, mark?: number, name?: string, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
+
+
+
+
+
+
+
+        let queryParameters = new HttpParams({encoder: new CustomHttpUrlEncodingCodec()});
+        if (delFlag !== undefined && delFlag !== null) {
+            queryParameters = queryParameters.set('delFlag', <any>delFlag);
+        }
+        if (id !== undefined && id !== null) {
+            queryParameters = queryParameters.set('id', <any>id);
+        }
+        if (lineStyle !== undefined && lineStyle !== null) {
+            queryParameters = queryParameters.set('lineStyle', <any>lineStyle);
+        }
+        if (lineWidth !== undefined && lineWidth !== null) {
+            queryParameters = queryParameters.set('lineWidth', <any>lineWidth);
+        }
+        if (mark !== undefined && mark !== null) {
+            queryParameters = queryParameters.set('mark', <any>mark);
+        }
+        if (name !== undefined && name !== null) {
+            queryParameters = queryParameters.set('name', <any>name);
+        }
+
+        let headers = this.defaultHeaders;
+
+        // to determine the Accept header
+        let httpHeaderAccepts: string[] = [
+            '*/*'
+        ];
+        const httpHeaderAcceptSelected: string | undefined = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        if (httpHeaderAcceptSelected != undefined) {
+            headers = headers.set('Accept', httpHeaderAcceptSelected);
+        }
+
+        // to determine the Content-Type header
+        const consumes: string[] = [
+            'application/json'
+        ];
+
+        return this.httpClient.post<ResultBeanint>(`${this.basePath}/course/add`,
+            null,
+            {
+                params: queryParameters,
+                withCredentials: this.configuration.withCredentials,
+                headers: headers,
+                observe: observe,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
+    /**
+     * 新增
+     * 
+     * @param capital 
+     * @param coordinate 
+     * @param course 
+     * @param delFlag 
+     * @param id 
+     * @param lineStyle 
+     * @param lineWidth 
+     * @param mileage 
+     * @param name 
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public addprojectUsingPOST2(capital?: number, coordinate?: string, course?: number, delFlag?: number, id?: number, lineStyle?: string, lineWidth?: number, mileage?: number, name?: string, observe?: 'body', reportProgress?: boolean): Observable<ResultBeanint>;
+    public addprojectUsingPOST2(capital?: number, coordinate?: string, course?: number, delFlag?: number, id?: number, lineStyle?: string, lineWidth?: number, mileage?: number, name?: string, observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<ResultBeanint>>;
+    public addprojectUsingPOST2(capital?: number, coordinate?: string, course?: number, delFlag?: number, id?: number, lineStyle?: string, lineWidth?: number, mileage?: number, name?: string, observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<ResultBeanint>>;
+    public addprojectUsingPOST2(capital?: number, coordinate?: string, course?: number, delFlag?: number, id?: number, lineStyle?: string, lineWidth?: number, mileage?: number, name?: string, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
+
+
+
+
+
+
+
+
+
+
+        let queryParameters = new HttpParams({encoder: new CustomHttpUrlEncodingCodec()});
+        if (capital !== undefined && capital !== null) {
+            queryParameters = queryParameters.set('capital', <any>capital);
+        }
+        if (coordinate !== undefined && coordinate !== null) {
+            queryParameters = queryParameters.set('coordinate', <any>coordinate);
+        }
+        if (course !== undefined && course !== null) {
+            queryParameters = queryParameters.set('course', <any>course);
+        }
+        if (delFlag !== undefined && delFlag !== null) {
+            queryParameters = queryParameters.set('delFlag', <any>delFlag);
+        }
+        if (id !== undefined && id !== null) {
+            queryParameters = queryParameters.set('id', <any>id);
+        }
+        if (lineStyle !== undefined && lineStyle !== null) {
+            queryParameters = queryParameters.set('lineStyle', <any>lineStyle);
+        }
+        if (lineWidth !== undefined && lineWidth !== null) {
+            queryParameters = queryParameters.set('lineWidth', <any>lineWidth);
+        }
+        if (mileage !== undefined && mileage !== null) {
+            queryParameters = queryParameters.set('mileage', <any>mileage);
+        }
+        if (name !== undefined && name !== null) {
+            queryParameters = queryParameters.set('name', <any>name);
+        }
+
+        let headers = this.defaultHeaders;
+
+        // to determine the Accept header
+        let httpHeaderAccepts: string[] = [
+            '*/*'
+        ];
+        const httpHeaderAcceptSelected: string | undefined = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        if (httpHeaderAcceptSelected != undefined) {
+            headers = headers.set('Accept', httpHeaderAcceptSelected);
+        }
+
+        // to determine the Content-Type header
+        const consumes: string[] = [
+            'application/json'
+        ];
+
+        return this.httpClient.post<ResultBeanint>(`${this.basePath}/project/add`,
+            null,
+            {
+                
+                params: queryParameters,
+                withCredentials: this.configuration.withCredentials,
+                headers: headers,
+                observe: observe,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
+    /**
+     * 新增
+     * 
+     * @param coordinate 
+     * @param delFlag 
+     * @param id 
+     * @param lineStyle 
+     * @param lineWidth 
+     * @param mileage 
+     * @param name 
+     * @param project 
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public addUsingPOST3(coordinate?: string, delFlag?: number, id?: number, lineStyle?: string, lineWidth?: number, mileage?: number, name?: string, project?: number, observe?: 'body', reportProgress?: boolean): Observable<ResultBeanint>;
+    public addUsingPOST3(coordinate?: string, delFlag?: number, id?: number, lineStyle?: string, lineWidth?: number, mileage?: number, name?: string, project?: number, observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<ResultBeanint>>;
+    public addUsingPOST3(coordinate?: string, delFlag?: number, id?: number, lineStyle?: string, lineWidth?: number, mileage?: number, name?: string, project?: number, observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<ResultBeanint>>;
+    public addUsingPOST3(coordinate?: string, delFlag?: number, id?: number, lineStyle?: string, lineWidth?: number, mileage?: number, name?: string, project?: number, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
+
+
+
+
+
+
+
+
+
+        let queryParameters = new HttpParams({encoder: new CustomHttpUrlEncodingCodec()});
+        if (coordinate !== undefined && coordinate !== null) {
+            queryParameters = queryParameters.set('coordinate', <any>coordinate);
+        }
+        if (delFlag !== undefined && delFlag !== null) {
+            queryParameters = queryParameters.set('delFlag', <any>delFlag);
+        }
+        if (id !== undefined && id !== null) {
+            queryParameters = queryParameters.set('id', <any>id);
+        }
+        if (lineStyle !== undefined && lineStyle !== null) {
+            queryParameters = queryParameters.set('lineStyle', <any>lineStyle);
+        }
+        if (lineWidth !== undefined && lineWidth !== null) {
+            queryParameters = queryParameters.set('lineWidth', <any>lineWidth);
+        }
+        if (mileage !== undefined && mileage !== null) {
+            queryParameters = queryParameters.set('mileage', <any>mileage);
+        }
+        if (name !== undefined && name !== null) {
+            queryParameters = queryParameters.set('name', <any>name);
+        }
+        if (project !== undefined && project !== null) {
+            queryParameters = queryParameters.set('project', <any>project);
+        }
+
+        let headers = this.defaultHeaders;
+
+        // to determine the Accept header
+        let httpHeaderAccepts: string[] = [
+            '*/*'
+        ];
+        const httpHeaderAcceptSelected: string | undefined = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        if (httpHeaderAcceptSelected != undefined) {
+            headers = headers.set('Accept', httpHeaderAcceptSelected);
+        }
+
+        // to determine the Content-Type header
+        const consumes: string[] = [
+            'application/json'
+        ];
+
+        return this.httpClient.post<ResultBeanint>(`${this.basePath}/scetion/add`,
+            null,
+            {
+                params: queryParameters,
+                withCredentials: this.configuration.withCredentials,
+                headers: headers,
+                observe: observe,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
+    /**
+     * 删除
+     * 
+     * @param id id
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public deleteUsingDELETE(id?: number, observe?: 'body', reportProgress?: boolean): Observable<ResultBeanCamera>;
+    public deleteUsingDELETE(id?: number, observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<ResultBeanCamera>>;
+    public deleteUsingDELETE(id?: number, observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<ResultBeanCamera>>;
+    public deleteUsingDELETE(id?: number, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
+
+
+        let queryParameters = new HttpParams({encoder: new CustomHttpUrlEncodingCodec()});
+        if (id !== undefined && id !== null) {
+            queryParameters = queryParameters.set('id', <any>id);
+        }
+
+        let headers = this.defaultHeaders;
+
+        // to determine the Accept header
+        let httpHeaderAccepts: string[] = [
+            '*/*'
+        ];
+        const httpHeaderAcceptSelected: string | undefined = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        if (httpHeaderAcceptSelected != undefined) {
+            headers = headers.set('Accept', httpHeaderAcceptSelected);
+        }
+
+        // to determine the Content-Type header
+        const consumes: string[] = [
+        ];
+
+        return this.httpClient.delete<ResultBeanCamera>(`${this.basePath}/camera/delete`,
+            {
+                params: queryParameters,
+                withCredentials: this.configuration.withCredentials,
+                headers: headers,
+                observe: observe,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
+    /**
+     * 删除
+     * 
+     * @param id id
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public deleteUsingDELETE1(id?: number, observe?: 'body', reportProgress?: boolean): Observable<ResultBeanCourse>;
+    public deleteUsingDELETE1(id?: number, observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<ResultBeanCourse>>;
+    public deleteUsingDELETE1(id?: number, observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<ResultBeanCourse>>;
+    public deleteUsingDELETE1(id?: number, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
+
+
+        let queryParameters = new HttpParams({encoder: new CustomHttpUrlEncodingCodec()});
+        if (id !== undefined && id !== null) {
+            queryParameters = queryParameters.set('id', <any>id);
+        }
+
+        let headers = this.defaultHeaders;
+
+        // to determine the Accept header
+        let httpHeaderAccepts: string[] = [
+            '*/*'
+        ];
+        const httpHeaderAcceptSelected: string | undefined = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        if (httpHeaderAcceptSelected != undefined) {
+            headers = headers.set('Accept', httpHeaderAcceptSelected);
+        }
+
+        // to determine the Content-Type header
+        const consumes: string[] = [
+        ];
+
+        return this.httpClient.delete<ResultBeanCourse>(`${this.basePath}/course/delete`,
+            {
+                params: queryParameters,
+                withCredentials: this.configuration.withCredentials,
+                headers: headers,
+                observe: observe,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
+    /**
+     * 删除
+     * 
+     * @param id id
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public deleteUsingDELETE2(id?: number, observe?: 'body', reportProgress?: boolean): Observable<ResultBeanProject>;
+    public deleteUsingDELETE2(id?: number, observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<ResultBeanProject>>;
+    public deleteUsingDELETE2(id?: number, observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<ResultBeanProject>>;
+    public deleteUsingDELETE2(id?: number, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
+
+
+        let queryParameters = new HttpParams({encoder: new CustomHttpUrlEncodingCodec()});
+        if (id !== undefined && id !== null) {
+            queryParameters = queryParameters.set('id', <any>id);
+        }
+
+        let headers = this.defaultHeaders;
+
+        // to determine the Accept header
+        let httpHeaderAccepts: string[] = [
+            '*/*'
+        ];
+        const httpHeaderAcceptSelected: string | undefined = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        if (httpHeaderAcceptSelected != undefined) {
+            headers = headers.set('Accept', httpHeaderAcceptSelected);
+        }
+
+        // to determine the Content-Type header
+        const consumes: string[] = [
+        ];
+
+        return this.httpClient.delete<ResultBeanProject>(`${this.basePath}/project/delete`,
+            {
+                params: queryParameters,
+                withCredentials: this.configuration.withCredentials,
+                headers: headers,
+                observe: observe,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
+    /**
+     * 删除
+     * 
+     * @param id id
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public deleteUsingDELETE3(id?: number, observe?: 'body', reportProgress?: boolean): Observable<ResultBeanScetion>;
+    public deleteUsingDELETE3(id?: number, observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<ResultBeanScetion>>;
+    public deleteUsingDELETE3(id?: number, observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<ResultBeanScetion>>;
+    public deleteUsingDELETE3(id?: number, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
+
+
+        let queryParameters = new HttpParams({encoder: new CustomHttpUrlEncodingCodec()});
+        if (id !== undefined && id !== null) {
+            queryParameters = queryParameters.set('id', <any>id);
+        }
+
+        let headers = this.defaultHeaders;
+
+        // to determine the Accept header
+        let httpHeaderAccepts: string[] = [
+            '*/*'
+        ];
+        const httpHeaderAcceptSelected: string | undefined = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        if (httpHeaderAcceptSelected != undefined) {
+            headers = headers.set('Accept', httpHeaderAcceptSelected);
+        }
+
+        // to determine the Content-Type header
+        const consumes: string[] = [
+        ];
+
+        return this.httpClient.delete<ResultBeanScetion>(`${this.basePath}/scetion/delete`,
+            {
+                params: queryParameters,
+                withCredentials: this.configuration.withCredentials,
+                headers: headers,
+                observe: observe,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
+    /**
+     * 获取摄像头信息
+     * 获取摄像头信息
+     * @param id 摄像头id是数字
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public getUsingGET(id: string, observe?: 'body', reportProgress?: boolean): Observable<Camera>;
+    public getUsingGET(id: string, observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<Camera>>;
+    public getUsingGET(id: string, observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<Camera>>;
+    public getUsingGET(id: string, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
+
+        if (id === null || id === undefined) {
+            throw new Error('Required parameter id was null or undefined when calling getUsingGET.');
+        }
+
+        let headers = this.defaultHeaders;
+
+        // to determine the Accept header
+        let httpHeaderAccepts: string[] = [
+            '*/*',
+            'application/json'
+        ];
+        const httpHeaderAcceptSelected: string | undefined = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        if (httpHeaderAcceptSelected != undefined) {
+            headers = headers.set('Accept', httpHeaderAcceptSelected);
+        }
+
+        // to determine the Content-Type header
+        const consumes: string[] = [
+        ];
+
+        return this.httpClient.get<Camera>(`${this.basePath}/camera/get/${encodeURIComponent(String(id))}`,
+            {
+                withCredentials: this.configuration.withCredentials,
+                headers: headers,
+                observe: observe,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
+    /**
+     * 获取路线信息
+     * 获取路线信息
+     * @param id 路线id是数字
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public getUsingGET1(id: string, observe?: 'body', reportProgress?: boolean): Observable<Course>;
+    public getUsingGET1(id: string, observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<Course>>;
+    public getUsingGET1(id: string, observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<Course>>;
+    public getUsingGET1(id: string, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
+
+        if (id === null || id === undefined) {
+            throw new Error('Required parameter id was null or undefined when calling getUsingGET1.');
+        }
+
+        let headers = this.defaultHeaders;
+
+        // to determine the Accept header
+        let httpHeaderAccepts: string[] = [
+            '*/*',
+            'application/json'
+        ];
+        const httpHeaderAcceptSelected: string | undefined = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        if (httpHeaderAcceptSelected != undefined) {
+            headers = headers.set('Accept', httpHeaderAcceptSelected);
+        }
+
+        // to determine the Content-Type header
+        const consumes: string[] = [
+        ];
+
+        return this.httpClient.get<Course>(`${this.basePath}/course/get/${encodeURIComponent(String(id))}`,
+            {
+                withCredentials: this.configuration.withCredentials,
+                headers: headers,
+                observe: observe,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
+    /**
+     * 获取项目信息
+     * 获取项目信息
+     * @param id 项目id是数字
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public getUsingGET2(id: string, observe?: 'body', reportProgress?: boolean): Observable<Project>;
+    public getUsingGET2(id: string, observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<Project>>;
+    public getUsingGET2(id: string, observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<Project>>;
+    public getUsingGET2(id: string, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
+
+        if (id === null || id === undefined) {
+            throw new Error('Required parameter id was null or undefined when calling getUsingGET2.');
+        }
+
+        let headers = this.defaultHeaders;
+
+        // to determine the Accept header
+        let httpHeaderAccepts: string[] = [
+            '*/*',
+            'application/json'
+        ];
+        const httpHeaderAcceptSelected: string | undefined = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        if (httpHeaderAcceptSelected != undefined) {
+            headers = headers.set('Accept', httpHeaderAcceptSelected);
+        }
+
+        // to determine the Content-Type header
+        const consumes: string[] = [
+        ];
+
+        return this.httpClient.get<Project>(`${this.basePath}/project/get/${encodeURIComponent(String(id))}`,
+            {
+                withCredentials: this.configuration.withCredentials,
+                headers: headers,
+                observe: observe,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
+    /**
+     * 获取标段信息
+     * 获取标段信息
+     * @param id 标段id是数字
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public getUsingGET3(id: string, observe?: 'body', reportProgress?: boolean): Observable<Scetion>;
+    public getUsingGET3(id: string, observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<Scetion>>;
+    public getUsingGET3(id: string, observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<Scetion>>;
+    public getUsingGET3(id: string, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
+
+        if (id === null || id === undefined) {
+            throw new Error('Required parameter id was null or undefined when calling getUsingGET3.');
+        }
+
+        let headers = this.defaultHeaders;
+
+        // to determine the Accept header
+        let httpHeaderAccepts: string[] = [
+            '*/*',
+            'application/json'
+        ];
+        const httpHeaderAcceptSelected: string | undefined = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        if (httpHeaderAcceptSelected != undefined) {
+            headers = headers.set('Accept', httpHeaderAcceptSelected);
+        }
+
+        // to determine the Content-Type header
+        const consumes: string[] = [
+        ];
+
+        return this.httpClient.get<Scetion>(`${this.basePath}/scetion/get/${encodeURIComponent(String(id))}`,
+            {
+                withCredentials: this.configuration.withCredentials,
+                headers: headers,
+                observe: observe,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
+    /**
+     * 获取摄像头列表
+     * 
+     * @param coordinate 
+     * @param delFlag 
+     * @param id 
+     * @param name 
+     * @param section 
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public listUsingGET(coordinate?: string, delFlag?: number, id?: number, name?: string, section?: number, observe?: 'body', reportProgress?: boolean): Observable<ResultBeanListCamera>;
+    public listUsingGET(coordinate?: string, delFlag?: number, id?: number, name?: string, section?: number, observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<ResultBeanListCamera>>;
+    public listUsingGET(coordinate?: string, delFlag?: number, id?: number, name?: string, section?: number, observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<ResultBeanListCamera>>;
+    public listUsingGET(coordinate?: string, delFlag?: number, id?: number, name?: string, section?: number, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
+
+
+
+
+
+
+        let queryParameters = new HttpParams({encoder: new CustomHttpUrlEncodingCodec()});
+        if (coordinate !== undefined && coordinate !== null) {
+            queryParameters = queryParameters.set('coordinate', <any>coordinate);
+        }
+        if (delFlag !== undefined && delFlag !== null) {
+            queryParameters = queryParameters.set('delFlag', <any>delFlag);
+        }
+        if (id !== undefined && id !== null) {
+            queryParameters = queryParameters.set('id', <any>id);
+        }
+        if (name !== undefined && name !== null) {
+            queryParameters = queryParameters.set('name', <any>name);
+        }
+        if (section !== undefined && section !== null) {
+            queryParameters = queryParameters.set('section', <any>section);
+        }
+
+        let headers = this.defaultHeaders;
+
+        // to determine the Accept header
+        let httpHeaderAccepts: string[] = [
+            '*/*'
+        ];
+        const httpHeaderAcceptSelected: string | undefined = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        if (httpHeaderAcceptSelected != undefined) {
+            headers = headers.set('Accept', httpHeaderAcceptSelected);
+        }
+
+        // to determine the Content-Type header
+        const consumes: string[] = [
+        ];
+
+        return this.httpClient.get<ResultBeanListCamera>(`${this.basePath}/camera/list`,
+            {
+                params: queryParameters,
+                withCredentials: this.configuration.withCredentials,
+                headers: headers,
+                observe: observe,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
+    /**
+     * 获取路线列表
+     * 
+     * @param delFlag 
+     * @param id 
+     * @param lineStyle 
+     * @param lineWidth 
+     * @param mark 
+     * @param name 
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public listUsingGET1(delFlag?: number, id?: number, lineStyle?: string, lineWidth?: number, mark?: number, name?: string, observe?: 'body', reportProgress?: boolean): Observable<ResultBeanListCourse>;
+    public listUsingGET1(delFlag?: number, id?: number, lineStyle?: string, lineWidth?: number, mark?: number, name?: string, observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<ResultBeanListCourse>>;
+    public listUsingGET1(delFlag?: number, id?: number, lineStyle?: string, lineWidth?: number, mark?: number, name?: string, observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<ResultBeanListCourse>>;
+    public listUsingGET1(delFlag?: number, id?: number, lineStyle?: string, lineWidth?: number, mark?: number, name?: string, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
+
+
+
+
+
+
+
+        let queryParameters = new HttpParams({encoder: new CustomHttpUrlEncodingCodec()});
+        if (delFlag !== undefined && delFlag !== null) {
+            queryParameters = queryParameters.set('delFlag', <any>delFlag);
+        }
+        if (id !== undefined && id !== null) {
+            queryParameters = queryParameters.set('id', <any>id);
+        }
+        if (lineStyle !== undefined && lineStyle !== null) {
+            queryParameters = queryParameters.set('lineStyle', <any>lineStyle);
+        }
+        if (lineWidth !== undefined && lineWidth !== null) {
+            queryParameters = queryParameters.set('lineWidth', <any>lineWidth);
+        }
+        if (mark !== undefined && mark !== null) {
+            queryParameters = queryParameters.set('mark', <any>mark);
+        }
+        if (name !== undefined && name !== null) {
+            queryParameters = queryParameters.set('name', <any>name);
+        }
+
+        let headers = this.defaultHeaders;
+
+        // to determine the Accept header
+        let httpHeaderAccepts: string[] = [
+            '*/*'
+        ];
+        const httpHeaderAcceptSelected: string | undefined = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        if (httpHeaderAcceptSelected != undefined) {
+            headers = headers.set('Accept', httpHeaderAcceptSelected);
+        }
+
+        // to determine the Content-Type header
+        const consumes: string[] = [
+        ];
+
+        return this.httpClient.get<ResultBeanListCourse>(`${this.basePath}/course/list`,
+            {
+                params: queryParameters,
+                withCredentials: this.configuration.withCredentials,
+                headers: headers,
+                observe: observe,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
+    /**
+     * 获取项目列表(高速公路或普通干线)
+     * 
+     * @param mark mark是数字1高速2普通
+     * @param capital 
+     * @param coordinate 
+     * @param course 
+     * @param delFlag 
+     * @param id 
+     * @param lineStyle 
+     * @param lineWidth 
+     * @param mileage 
+     * @param name 
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public listUsingGET2(mark: string, capital?: number, coordinate?: string, course?: number, delFlag?: number, id?: number, lineStyle?: string, lineWidth?: number, mileage?: number, name?: string, observe?: 'body', reportProgress?: boolean): Observable<ResultBeanListProject>;
+    public listUsingGET2(mark: string, capital?: number, coordinate?: string, course?: number, delFlag?: number, id?: number, lineStyle?: string, lineWidth?: number, mileage?: number, name?: string, observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<ResultBeanListProject>>;
+    public listUsingGET2(mark: string, capital?: number, coordinate?: string, course?: number, delFlag?: number, id?: number, lineStyle?: string, lineWidth?: number, mileage?: number, name?: string, observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<ResultBeanListProject>>;
+    public listUsingGET2(mark: string, capital?: number, coordinate?: string, course?: number, delFlag?: number, id?: number, lineStyle?: string, lineWidth?: number, mileage?: number, name?: string, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
+
+        if (mark === null || mark === undefined) {
+            throw new Error('Required parameter mark was null or undefined when calling listUsingGET2.');
+        }
+
+
+
+
+
+
+
+
+
+
+        let queryParameters = new HttpParams({encoder: new CustomHttpUrlEncodingCodec()});
+        if (capital !== undefined && capital !== null) {
+            queryParameters = queryParameters.set('capital', <any>capital);
+        }
+        if (coordinate !== undefined && coordinate !== null) {
+            queryParameters = queryParameters.set('coordinate', <any>coordinate);
+        }
+        if (course !== undefined && course !== null) {
+            queryParameters = queryParameters.set('course', <any>course);
+        }
+        if (delFlag !== undefined && delFlag !== null) {
+            queryParameters = queryParameters.set('delFlag', <any>delFlag);
+        }
+        if (id !== undefined && id !== null) {
+            queryParameters = queryParameters.set('id', <any>id);
+        }
+        if (lineStyle !== undefined && lineStyle !== null) {
+            queryParameters = queryParameters.set('lineStyle', <any>lineStyle);
+        }
+        if (lineWidth !== undefined && lineWidth !== null) {
+            queryParameters = queryParameters.set('lineWidth', <any>lineWidth);
+        }
+        if (mileage !== undefined && mileage !== null) {
+            queryParameters = queryParameters.set('mileage', <any>mileage);
+        }
+        if (name !== undefined && name !== null) {
+            queryParameters = queryParameters.set('name', <any>name);
+        }
+
+        let headers = this.defaultHeaders;
+
+        // to determine the Accept header
+        let httpHeaderAccepts: string[] = [
+            '*/*'
+        ];
+        const httpHeaderAcceptSelected: string | undefined = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        if (httpHeaderAcceptSelected != undefined) {
+            headers = headers.set('Accept', httpHeaderAcceptSelected);
+        }
+
+        // to determine the Content-Type header
+        const consumes: string[] = [
+        ];
+
+        return this.httpClient.get<ResultBeanListProject>(`${this.basePath}/project/list/${encodeURIComponent(String(mark))}`,
+            {
+                params: queryParameters,
+                withCredentials: this.configuration.withCredentials,
+                headers: headers,
+                observe: observe,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
+    /**
+     * 获取标段列表
+     * 
+     * @param coordinate 
+     * @param delFlag 
+     * @param id 
+     * @param lineStyle 
+     * @param lineWidth 
+     * @param mileage 
+     * @param name 
+     * @param project 
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public listUsingGET3(coordinate?: string, delFlag?: number, id?: number, lineStyle?: string, lineWidth?: number, mileage?: number, name?: string, project?: number, observe?: 'body', reportProgress?: boolean): Observable<ResultBeanListScetion>;
+    public listUsingGET3(coordinate?: string, delFlag?: number, id?: number, lineStyle?: string, lineWidth?: number, mileage?: number, name?: string, project?: number, observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<ResultBeanListScetion>>;
+    public listUsingGET3(coordinate?: string, delFlag?: number, id?: number, lineStyle?: string, lineWidth?: number, mileage?: number, name?: string, project?: number, observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<ResultBeanListScetion>>;
+    public listUsingGET3(coordinate?: string, delFlag?: number, id?: number, lineStyle?: string, lineWidth?: number, mileage?: number, name?: string, project?: number, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
+
+
+
+
+
+
+
+
+
+        let queryParameters = new HttpParams({encoder: new CustomHttpUrlEncodingCodec()});
+        if (coordinate !== undefined && coordinate !== null) {
+            queryParameters = queryParameters.set('coordinate', <any>coordinate);
+        }
+        if (delFlag !== undefined && delFlag !== null) {
+            queryParameters = queryParameters.set('delFlag', <any>delFlag);
+        }
+        if (id !== undefined && id !== null) {
+            queryParameters = queryParameters.set('id', <any>id);
+        }
+        if (lineStyle !== undefined && lineStyle !== null) {
+            queryParameters = queryParameters.set('lineStyle', <any>lineStyle);
+        }
+        if (lineWidth !== undefined && lineWidth !== null) {
+            queryParameters = queryParameters.set('lineWidth', <any>lineWidth);
+        }
+        if (mileage !== undefined && mileage !== null) {
+            queryParameters = queryParameters.set('mileage', <any>mileage);
+        }
+        if (name !== undefined && name !== null) {
+            queryParameters = queryParameters.set('name', <any>name);
+        }
+        if (project !== undefined && project !== null) {
+            queryParameters = queryParameters.set('project', <any>project);
+        }
+
+        let headers = this.defaultHeaders;
+
+        // to determine the Accept header
+        let httpHeaderAccepts: string[] = [
+            '*/*'
+        ];
+        const httpHeaderAcceptSelected: string | undefined = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        if (httpHeaderAcceptSelected != undefined) {
+            headers = headers.set('Accept', httpHeaderAcceptSelected);
+        }
+
+        // to determine the Content-Type header
+        const consumes: string[] = [
+        ];
+
+        return this.httpClient.get<ResultBeanListScetion>(`${this.basePath}/scetion/list`,
+            {
+                params: queryParameters,
+                withCredentials: this.configuration.withCredentials,
+                headers: headers,
+                observe: observe,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
+    /**
+     * 统计总投资
+     * 
+     * @param mark mark是数字1高速2普通
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public totalCapitalUsingGET(mark: string, observe?: 'body', reportProgress?: boolean): Observable<ResultBeandouble>;
+    public totalCapitalUsingGET(mark: string, observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<ResultBeandouble>>;
+    public totalCapitalUsingGET(mark: string, observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<ResultBeandouble>>;
+    public totalCapitalUsingGET(mark: string, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
+
+        if (mark === null || mark === undefined) {
+            throw new Error('Required parameter mark was null or undefined when calling totalCapitalUsingGET.');
+        }
+
+        let headers = this.defaultHeaders;
+
+        // to determine the Accept header
+        let httpHeaderAccepts: string[] = [
+            '*/*'
+        ];
+        const httpHeaderAcceptSelected: string | undefined = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        if (httpHeaderAcceptSelected != undefined) {
+            headers = headers.set('Accept', httpHeaderAcceptSelected);
+        }
+
+        // to determine the Content-Type header
+        const consumes: string[] = [
+        ];
+
+        return this.httpClient.get<ResultBeandouble>(`${this.basePath}/project/totalCapital/${encodeURIComponent(String(mark))}`,
+            {
+                withCredentials: this.configuration.withCredentials,
+                headers: headers,
+                observe: observe,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
+    /**
+     * 统计里程数
+     * 
+     * @param mark mark是数字1高速2普通
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public totalMileageUsingGET(mark: string, observe?: 'body', reportProgress?: boolean): Observable<ResultBeandouble>;
+    public totalMileageUsingGET(mark: string, observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<ResultBeandouble>>;
+    public totalMileageUsingGET(mark: string, observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<ResultBeandouble>>;
+    public totalMileageUsingGET(mark: string, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
+
+        if (mark === null || mark === undefined) {
+            throw new Error('Required parameter mark was null or undefined when calling totalMileageUsingGET.');
+        }
+
+        let headers = this.defaultHeaders;
+
+        // to determine the Accept header
+        let httpHeaderAccepts: string[] = [
+            '*/*'
+        ];
+        const httpHeaderAcceptSelected: string | undefined = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        if (httpHeaderAcceptSelected != undefined) {
+            headers = headers.set('Accept', httpHeaderAcceptSelected);
+        }
+
+        // to determine the Content-Type header
+        const consumes: string[] = [
+        ];
+
+        return this.httpClient.get<ResultBeandouble>(`${this.basePath}/project/totalMileage/${encodeURIComponent(String(mark))}`,
+            {
+                withCredentials: this.configuration.withCredentials,
+                headers: headers,
+                observe: observe,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
+    /**
+     * 统计项目个数
+     * 
+     * @param mark mark是数字1高速2普通
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public totalUsingGET(mark: string, observe?: 'body', reportProgress?: boolean): Observable<ResultBeanint>;
+    public totalUsingGET(mark: string, observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<ResultBeanint>>;
+    public totalUsingGET(mark: string, observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<ResultBeanint>>;
+    public totalUsingGET(mark: string, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
+
+        if (mark === null || mark === undefined) {
+            throw new Error('Required parameter mark was null or undefined when calling totalUsingGET.');
+        }
+
+        let headers = this.defaultHeaders;
+
+        // to determine the Accept header
+        let httpHeaderAccepts: string[] = [
+            '*/*'
+        ];
+        const httpHeaderAcceptSelected: string | undefined = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        if (httpHeaderAcceptSelected != undefined) {
+            headers = headers.set('Accept', httpHeaderAcceptSelected);
+        }
+
+        // to determine the Content-Type header
+        const consumes: string[] = [
+        ];
+
+        return this.httpClient.get<ResultBeanint>(`${this.basePath}/project/total/${encodeURIComponent(String(mark))}`,
+            {
+                withCredentials: this.configuration.withCredentials,
+                headers: headers,
+                observe: observe,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
+    /**
+     * 修改
+     * 
+     * @param coordinate 
+     * @param delFlag 
+     * @param id 
+     * @param name 
+     * @param section 
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public updateUsingPUT(coordinate?: string, delFlag?: number, id?: number, name?: string, section?: number, observe?: 'body', reportProgress?: boolean): Observable<ResultBeanCamera>;
+    public updateUsingPUT(coordinate?: string, delFlag?: number, id?: number, name?: string, section?: number, observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<ResultBeanCamera>>;
+    public updateUsingPUT(coordinate?: string, delFlag?: number, id?: number, name?: string, section?: number, observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<ResultBeanCamera>>;
+    public updateUsingPUT(coordinate?: string, delFlag?: number, id?: number, name?: string, section?: number, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
+
+
+
+
+
+
+        let queryParameters = new HttpParams({encoder: new CustomHttpUrlEncodingCodec()});
+        if (coordinate !== undefined && coordinate !== null) {
+            queryParameters = queryParameters.set('coordinate', <any>coordinate);
+        }
+        if (delFlag !== undefined && delFlag !== null) {
+            queryParameters = queryParameters.set('delFlag', <any>delFlag);
+        }
+        if (id !== undefined && id !== null) {
+            queryParameters = queryParameters.set('id', <any>id);
+        }
+        if (name !== undefined && name !== null) {
+            queryParameters = queryParameters.set('name', <any>name);
+        }
+        if (section !== undefined && section !== null) {
+            queryParameters = queryParameters.set('section', <any>section);
+        }
+
+        let headers = this.defaultHeaders;
+
+        // to determine the Accept header
+        let httpHeaderAccepts: string[] = [
+            '*/*'
+        ];
+        const httpHeaderAcceptSelected: string | undefined = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        if (httpHeaderAcceptSelected != undefined) {
+            headers = headers.set('Accept', httpHeaderAcceptSelected);
+        }
+
+        // to determine the Content-Type header
+        const consumes: string[] = [
+            'application/json'
+        ];
+
+        return this.httpClient.put<ResultBeanCamera>(`${this.basePath}/camera/update`,
+            null,
+            {
+                params: queryParameters,
+                withCredentials: this.configuration.withCredentials,
+                headers: headers,
+                observe: observe,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
+    /**
+     * 修改
+     * 
+     * @param delFlag 
+     * @param id 
+     * @param lineStyle 
+     * @param lineWidth 
+     * @param mark 
+     * @param name 
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public updateUsingPUT1(delFlag?: number, id?: number, lineStyle?: string, lineWidth?: number, mark?: number, name?: string, observe?: 'body', reportProgress?: boolean): Observable<ResultBeanCourse>;
+    public updateUsingPUT1(delFlag?: number, id?: number, lineStyle?: string, lineWidth?: number, mark?: number, name?: string, observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<ResultBeanCourse>>;
+    public updateUsingPUT1(delFlag?: number, id?: number, lineStyle?: string, lineWidth?: number, mark?: number, name?: string, observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<ResultBeanCourse>>;
+    public updateUsingPUT1(delFlag?: number, id?: number, lineStyle?: string, lineWidth?: number, mark?: number, name?: string, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
+
+
+
+
+
+
+
+        let queryParameters = new HttpParams({encoder: new CustomHttpUrlEncodingCodec()});
+        if (delFlag !== undefined && delFlag !== null) {
+            queryParameters = queryParameters.set('delFlag', <any>delFlag);
+        }
+        if (id !== undefined && id !== null) {
+            queryParameters = queryParameters.set('id', <any>id);
+        }
+        if (lineStyle !== undefined && lineStyle !== null) {
+            queryParameters = queryParameters.set('lineStyle', <any>lineStyle);
+        }
+        if (lineWidth !== undefined && lineWidth !== null) {
+            queryParameters = queryParameters.set('lineWidth', <any>lineWidth);
+        }
+        if (mark !== undefined && mark !== null) {
+            queryParameters = queryParameters.set('mark', <any>mark);
+        }
+        if (name !== undefined && name !== null) {
+            queryParameters = queryParameters.set('name', <any>name);
+        }
+
+        let headers = this.defaultHeaders;
+
+        // to determine the Accept header
+        let httpHeaderAccepts: string[] = [
+            '*/*'
+        ];
+        const httpHeaderAcceptSelected: string | undefined = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        if (httpHeaderAcceptSelected != undefined) {
+            headers = headers.set('Accept', httpHeaderAcceptSelected);
+        }
+
+        // to determine the Content-Type header
+        const consumes: string[] = [
+            'application/json'
+        ];
+
+        return this.httpClient.put<ResultBeanCourse>(`${this.basePath}/course/update`,
+            null,
+            {
+                params: queryParameters,
+                withCredentials: this.configuration.withCredentials,
+                headers: headers,
+                observe: observe,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
+    /**
+     * 修改
+     * 
+     * @param capital 
+     * @param coordinate 
+     * @param course 
+     * @param delFlag 
+     * @param id 
+     * @param lineStyle 
+     * @param lineWidth 
+     * @param mileage 
+     * @param name 
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public updateUsingPUT2(capital?: number, coordinate?: string, course?: number, delFlag?: number, id?: number, lineStyle?: string, lineWidth?: number, mileage?: number, name?: string, observe?: 'body', reportProgress?: boolean): Observable<ResultBeanProject>;
+    public updateUsingPUT2(capital?: number, coordinate?: string, course?: number, delFlag?: number, id?: number, lineStyle?: string, lineWidth?: number, mileage?: number, name?: string, observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<ResultBeanProject>>;
+    public updateUsingPUT2(capital?: number, coordinate?: string, course?: number, delFlag?: number, id?: number, lineStyle?: string, lineWidth?: number, mileage?: number, name?: string, observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<ResultBeanProject>>;
+    public updateUsingPUT2(capital?: number, coordinate?: string, course?: number, delFlag?: number, id?: number, lineStyle?: string, lineWidth?: number, mileage?: number, name?: string, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
+
+
+
+
+
+
+
+
+
+
+        let queryParameters = new HttpParams({encoder: new CustomHttpUrlEncodingCodec()});
+        if (capital !== undefined && capital !== null) {
+            queryParameters = queryParameters.set('capital', <any>capital);
+        }
+        if (coordinate !== undefined && coordinate !== null) {
+            queryParameters = queryParameters.set('coordinate', <any>coordinate);
+        }
+        if (course !== undefined && course !== null) {
+            queryParameters = queryParameters.set('course', <any>course);
+        }
+        if (delFlag !== undefined && delFlag !== null) {
+            queryParameters = queryParameters.set('delFlag', <any>delFlag);
+        }
+        if (id !== undefined && id !== null) {
+            queryParameters = queryParameters.set('id', <any>id);
+        }
+        if (lineStyle !== undefined && lineStyle !== null) {
+            queryParameters = queryParameters.set('lineStyle', <any>lineStyle);
+        }
+        if (lineWidth !== undefined && lineWidth !== null) {
+            queryParameters = queryParameters.set('lineWidth', <any>lineWidth);
+        }
+        if (mileage !== undefined && mileage !== null) {
+            queryParameters = queryParameters.set('mileage', <any>mileage);
+        }
+        if (name !== undefined && name !== null) {
+            queryParameters = queryParameters.set('name', <any>name);
+        }
+
+        let headers = this.defaultHeaders;
+
+        // to determine the Accept header
+        let httpHeaderAccepts: string[] = [
+            '*/*'
+        ];
+        const httpHeaderAcceptSelected: string | undefined = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        if (httpHeaderAcceptSelected != undefined) {
+            headers = headers.set('Accept', httpHeaderAcceptSelected);
+        }
+
+        // to determine the Content-Type header
+        const consumes: string[] = [
+            'application/json'
+        ];
+
+        return this.httpClient.put<ResultBeanProject>(`${this.basePath}/project/update`,
+            null,
+            {
+                params: queryParameters,
+                withCredentials: this.configuration.withCredentials,
+                headers: headers,
+                observe: observe,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
+    /**
+     * 修改
+     * 
+     * @param coordinate 
+     * @param delFlag 
+     * @param id 
+     * @param lineStyle 
+     * @param lineWidth 
+     * @param mileage 
+     * @param name 
+     * @param project 
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public updateUsingPUT3(coordinate?: string, delFlag?: number, id?: number, lineStyle?: string, lineWidth?: number, mileage?: number, name?: string, project?: number, observe?: 'body', reportProgress?: boolean): Observable<ResultBeanScetion>;
+    public updateUsingPUT3(coordinate?: string, delFlag?: number, id?: number, lineStyle?: string, lineWidth?: number, mileage?: number, name?: string, project?: number, observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<ResultBeanScetion>>;
+    public updateUsingPUT3(coordinate?: string, delFlag?: number, id?: number, lineStyle?: string, lineWidth?: number, mileage?: number, name?: string, project?: number, observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<ResultBeanScetion>>;
+    public updateUsingPUT3(coordinate?: string, delFlag?: number, id?: number, lineStyle?: string, lineWidth?: number, mileage?: number, name?: string, project?: number, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
+
+
+
+
+
+
+
+
+
+        let queryParameters = new HttpParams({encoder: new CustomHttpUrlEncodingCodec()});
+        if (coordinate !== undefined && coordinate !== null) {
+            queryParameters = queryParameters.set('coordinate', <any>coordinate);
+        }
+        if (delFlag !== undefined && delFlag !== null) {
+            queryParameters = queryParameters.set('delFlag', <any>delFlag);
+        }
+        if (id !== undefined && id !== null) {
+            queryParameters = queryParameters.set('id', <any>id);
+        }
+        if (lineStyle !== undefined && lineStyle !== null) {
+            queryParameters = queryParameters.set('lineStyle', <any>lineStyle);
+        }
+        if (lineWidth !== undefined && lineWidth !== null) {
+            queryParameters = queryParameters.set('lineWidth', <any>lineWidth);
+        }
+        if (mileage !== undefined && mileage !== null) {
+            queryParameters = queryParameters.set('mileage', <any>mileage);
+        }
+        if (name !== undefined && name !== null) {
+            queryParameters = queryParameters.set('name', <any>name);
+        }
+        if (project !== undefined && project !== null) {
+            queryParameters = queryParameters.set('project', <any>project);
+        }
+
+        let headers = this.defaultHeaders;
+
+        // to determine the Accept header
+        let httpHeaderAccepts: string[] = [
+            '*/*'
+        ];
+        const httpHeaderAcceptSelected: string | undefined = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        if (httpHeaderAcceptSelected != undefined) {
+            headers = headers.set('Accept', httpHeaderAcceptSelected);
+        }
+
+        // to determine the Content-Type header
+        const consumes: string[] = [
+            'application/json'
+        ];
+
+        return this.httpClient.put<ResultBeanScetion>(`${this.basePath}/scetion/update`,
+            null,
+            {
+                params: queryParameters,
+                withCredentials: this.configuration.withCredentials,
+                headers: headers,
+                observe: observe,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
+}

src/app/api/configuration.ts

+export interface ConfigurationParameters {
+    apiKeys?: {[ key: string ]: string};
+    username?: string;
+    password?: string;
+    accessToken?: string | (() => string);
+    basePath?: string;
+    withCredentials?: boolean;
+}
+
+export class Configuration {
+    apiKeys?: {[ key: string ]: string};
+    username?: string;
+    password?: string;
+    accessToken?: string | (() => string);
+    basePath?: string;
+    withCredentials?: boolean;
+
+    constructor(configurationParameters: ConfigurationParameters = {}) {
+        this.apiKeys = configurationParameters.apiKeys;
+        this.username = configurationParameters.username;
+        this.password = configurationParameters.password;
+        this.accessToken = configurationParameters.accessToken;
+        this.basePath = configurationParameters.basePath;
+        this.withCredentials = configurationParameters.withCredentials;
+    }
+
+    /**
+     * Select the correct content-type to use for a request.
+     * Uses {@link Configuration#isJsonMime} to determine the correct content-type.
+     * If no content type is found return the first found type if the contentTypes is not empty
+     * @param contentTypes - the array of content types that are available for selection
+     * @returns the selected content-type or <code>undefined</code> if no selection could be made.
+     */
+    public selectHeaderContentType (contentTypes: string[]): string | undefined {
+        if (contentTypes.length == 0) {
+            return undefined;
+        }
+
+        let type = contentTypes.find(x => this.isJsonMime(x));
+        if (type === undefined) {
+            return contentTypes[0];
+        }
+        return type;
+    }
+
+    /**
+     * Select the correct accept content-type to use for a request.
+     * Uses {@link Configuration#isJsonMime} to determine the correct accept content-type.
+     * If no content type is found return the first found type if the contentTypes is not empty
+     * @param accepts - the array of content types that are available for selection.
+     * @returns the selected content-type or <code>undefined</code> if no selection could be made.
+     */
+    public selectHeaderAccept(accepts: string[]): string | undefined {
+        if (accepts.length == 0) {
+            return undefined;
+        }
+
+        let type = accepts.find(x => this.isJsonMime(x));
+        if (type === undefined) {
+            return accepts[0];
+        }
+        return type;
+    }
+
+    /**
+     * Check if the given MIME is a JSON MIME.
+     * JSON MIME examples:
+     *   application/json
+     *   application/json; charset=UTF8
+     *   APPLICATION/JSON
+     *   application/vnd.company+json
+     * @param mime - MIME (Multipurpose Internet Mail Extensions)
+     * @return True if the given MIME is JSON, false otherwise.
+     */
+    public isJsonMime(mime: string): boolean {
+        const jsonMime: RegExp = new RegExp('^(application\/json|[^;/ \t]+\/[^;/ \t]+[+]json)[ \t]*(;.*)?$', 'i');
+        return mime != null && (jsonMime.test(mime) || mime.toLowerCase() === 'application/json-patch+json');
+    }
+}

src/app/api/encoder.ts

+    import { HttpUrlEncodingCodec } from '@angular/common/http';
+
+/**
+* CustomHttpUrlEncodingCodec
+* Fix plus sign (+) not encoding, so sent as blank space
+* See: https://github.com/angular/angular/issues/11058#issuecomment-247367318
+*/
+export class CustomHttpUrlEncodingCodec extends HttpUrlEncodingCodec {
+    encodeKey(k: string): string {
+        k = super.encodeKey(k);
+        return k.replace(/\+/gi, '%2B');
+    }
+    encodeValue(v: string): string {
+        v = super.encodeValue(v);
+        return v.replace(/\+/gi, '%2B');
+    }
+}
+

src/app/api/git_push.sh

+#!/bin/sh
+# ref: https://help.github.com/articles/adding-an-existing-project-to-github-using-the-command-line/
+#
+# Usage example: /bin/sh ./git_push.sh wing328 swagger-petstore-perl "minor update"
+
+git_user_id=$1
+git_repo_id=$2
+release_note=$3
+
+if [ "$git_user_id" = "" ]; then
+    git_user_id="GIT_USER_ID"
+    echo "[INFO] No command line input provided. Set \$git_user_id to $git_user_id"
+fi
+
+if [ "$git_repo_id" = "" ]; then
+    git_repo_id="GIT_REPO_ID"
+    echo "[INFO] No command line input provided. Set \$git_repo_id to $git_repo_id"
+fi
+
+if [ "$release_note" = "" ]; then
+    release_note="Minor update"
+    echo "[INFO] No command line input provided. Set \$release_note to $release_note"
+fi
+
+# Initialize the local directory as a Git repository
+git init
+
+# Adds the files in the local repository and stages them for commit.
+git add .
+
+# Commits the tracked changes and prepares them to be pushed to a remote repository. 
+git commit -m "$release_note"
+
+# Sets the new remote
+git_remote=`git remote`
+if [ "$git_remote" = "" ]; then # git remote not defined
+
+    if [ "$GIT_TOKEN" = "" ]; then
+        echo "[INFO] \$GIT_TOKEN (environment variable) is not set. Using the git credential in your environment."
+        git remote add origin https://github.com/${git_user_id}/${git_repo_id}.git
+    else
+        git remote add origin https://${git_user_id}:${GIT_TOKEN}@github.com/${git_user_id}/${git_repo_id}.git
+    fi
+
+fi
+
+git pull origin master
+
+# Pushes (Forces) the changes in the local repository up to the remote repository
+echo "Git pushing to https://github.com/${git_user_id}/${git_repo_id}.git"
+git push origin master 2>&1 | grep -v 'To https'
+

src/app/api/index.ts

+export * from './api/api';
+export * from './model/models';
+export * from './variables';
+export * from './configuration';
+export * from './api.module';
\ No newline at end of file

src/app/api/model/camera.ts

+/**
+ * 智慧监控平台文档
+ * 简单优雅的风格
+ *
+ * OpenAPI spec version: 1.0
+ * 
+ *
+ * NOTE: This class is auto generated by the swagger code generator program.
+ * https://github.com/swagger-api/swagger-codegen.git
+ * Do not edit the class manually.
+ */
+
+
+export interface Camera { 
+    coordinate?: string;
+    delFlag?: number;
+    id?: number;
+    name?: string;
+    section?: number;
+}

src/app/api/model/course.ts

+/**
+ * 智慧监控平台文档
+ * 简单优雅的风格
+ *
+ * OpenAPI spec version: 1.0
+ * 
+ *
+ * NOTE: This class is auto generated by the swagger code generator program.
+ * https://github.com/swagger-api/swagger-codegen.git
+ * Do not edit the class manually.
+ */
+
+
+export interface Course { 
+    delFlag?: number;
+    id?: number;
+    lineStyle?: string;
+    lineWidth?: number;
+    mark?: number;
+    name?: string;
+    coordinate?:string;
+}

src/app/api/model/models.ts

+export * from './camera';
+export * from './course';
+export * from './project';
+export * from './resultBeanCamera';
+export * from './resultBeanCourse';
+export * from './resultBeanListCamera';
+export * from './resultBeanListCourse';
+export * from './resultBeanListProject';
+export * from './resultBeanListScetion';
+export * from './resultBeanProject';
+export * from './resultBeanScetion';
+export * from './resultBeandouble';
+export * from './resultBeanint';
+export * from './scetion';

src/app/api/model/project.ts

+/**
+ * 智慧监控平台文档
+ * 简单优雅的风格
+ *
+ * OpenAPI spec version: 1.0
+ * 
+ *
+ * NOTE: This class is auto generated by the swagger code generator program.
+ * https://github.com/swagger-api/swagger-codegen.git
+ * Do not edit the class manually.
+ */
+
+
+export interface Project { 
+    capital?: number;
+    coordinate?: string;
+    course?: number;
+    delFlag?: number;
+    id?: number;
+    lineStyle?: string;
+    lineWidth?: number;
+    mileage?: number;
+    name?: string;
+}

src/app/api/model/resultBeanCamera.ts

+/**
+ * 智慧监控平台文档
+ * 简单优雅的风格
+ *
+ * OpenAPI spec version: 1.0
+ * 
+ *
+ * NOTE: This class is auto generated by the swagger code generator program.
+ * https://github.com/swagger-api/swagger-codegen.git
+ * Do not edit the class manually.
+ */
+import { Camera } from './camera';
+
+
+export interface ResultBeanCamera { 
+    code?: number;
+    data?: Camera;
+    msg?: string;
+}

src/app/api/model/resultBeanCourse.ts

+/**
+ * 智慧监控平台文档
+ * 简单优雅的风格
+ *
+ * OpenAPI spec version: 1.0
+ * 
+ *
+ * NOTE: This class is auto generated by the swagger code generator program.
+ * https://github.com/swagger-api/swagger-codegen.git
+ * Do not edit the class manually.
+ */
+import { Course } from './course';
+
+
+export interface ResultBeanCourse { 
+    code?: number;
+    data?: Course;
+    msg?: string;
+}

src/app/api/model/resultBeanListCamera.ts

+/**
+ * 智慧监控平台文档
+ * 简单优雅的风格
+ *
+ * OpenAPI spec version: 1.0
+ * 
+ *
+ * NOTE: This class is auto generated by the swagger code generator program.
+ * https://github.com/swagger-api/swagger-codegen.git
+ * Do not edit the class manually.
+ */
+import { Camera } from './camera';
+
+
+export interface ResultBeanListCamera { 
+    code?: number;
+    data?: Array<Camera>;
+    msg?: string;
+}

src/app/api/model/resultBeanListCourse.ts

+/**
+ * 智慧监控平台文档
+ * 简单优雅的风格
+ *
+ * OpenAPI spec version: 1.0
+ * 
+ *
+ * NOTE: This class is auto generated by the swagger code generator program.
+ * https://github.com/swagger-api/swagger-codegen.git
+ * Do not edit the class manually.
+ */
+import { Course } from './course';
+
+
+export interface ResultBeanListCourse { 
+    code?: number;
+    data?: Array<Course>;
+    msg?: string;
+}

src/app/api/model/resultBeanListProject.ts

+/**
+ * 智慧监控平台文档
+ * 简单优雅的风格
+ *
+ * OpenAPI spec version: 1.0
+ * 
+ *
+ * NOTE: This class is auto generated by the swagger code generator program.
+ * https://github.com/swagger-api/swagger-codegen.git
+ * Do not edit the class manually.
+ */
+import { Project } from './project';
+
+
+export interface ResultBeanListProject { 
+    code?: number;
+    data?: Array<Project>;
+    msg?: string;
+}

src/app/api/model/resultBeanListScetion.ts

+/**
+ * 智慧监控平台文档
+ * 简单优雅的风格
+ *
+ * OpenAPI spec version: 1.0
+ * 
+ *
+ * NOTE: This class is auto generated by the swagger code generator program.
+ * https://github.com/swagger-api/swagger-codegen.git
+ * Do not edit the class manually.
+ */
+import { Scetion } from './scetion';
+
+
+export interface ResultBeanListScetion { 
+    code?: number;
+    data?: Array<Scetion>;
+    msg?: string;
+}

src/app/api/model/resultBeanProject.ts

+/**
+ * 智慧监控平台文档
+ * 简单优雅的风格
+ *
+ * OpenAPI spec version: 1.0
+ * 
+ *
+ * NOTE: This class is auto generated by the swagger code generator program.
+ * https://github.com/swagger-api/swagger-codegen.git
+ * Do not edit the class manually.
+ */
+import { Project } from './project';
+
+
+export interface ResultBeanProject { 
+    code?: number;
+    data?: Project;
+    msg?: string;
+}

src/app/api/model/resultBeanScetion.ts

+/**
+ * 智慧监控平台文档
+ * 简单优雅的风格
+ *
+ * OpenAPI spec version: 1.0
+ * 
+ *
+ * NOTE: This class is auto generated by the swagger code generator program.
+ * https://github.com/swagger-api/swagger-codegen.git
+ * Do not edit the class manually.
+ */
+import { Scetion } from './scetion';
+
+
+export interface ResultBeanScetion { 
+    code?: number;
+    data?: Scetion;
+    msg?: string;
+}

src/app/api/model/resultBeandouble.ts

+/**
+ * 智慧监控平台文档
+ * 简单优雅的风格
+ *
+ * OpenAPI spec version: 1.0
+ * 
+ *
+ * NOTE: This class is auto generated by the swagger code generator program.
+ * https://github.com/swagger-api/swagger-codegen.git
+ * Do not edit the class manually.
+ */
+
+
+export interface ResultBeandouble { 
+    code?: number;
+    data?: number;
+    msg?: string;
+}

src/app/api/model/resultBeanint.ts

+/**
+ * 智慧监控平台文档
+ * 简单优雅的风格
+ *
+ * OpenAPI spec version: 1.0
+ * 
+ *
+ * NOTE: This class is auto generated by the swagger code generator program.
+ * https://github.com/swagger-api/swagger-codegen.git
+ * Do not edit the class manually.
+ */
+
+
+export interface ResultBeanint { 
+    code?: number;
+    data?: number;
+    msg?: string;
+}

src/app/api/model/scetion.ts

+/**
+ * 智慧监控平台文档
+ * 简单优雅的风格
+ *
+ * OpenAPI spec version: 1.0
+ * 
+ *
+ * NOTE: This class is auto generated by the swagger code generator program.
+ * https://github.com/swagger-api/swagger-codegen.git
+ * Do not edit the class manually.
+ */
+
+
+export interface Scetion { 
+    coordinate?: string;
+    delFlag?: number;
+    id?: number;
+    lineStyle?: string;
+    lineWidth?: number;
+    mileage?: number;
+    name?: string;
+    project?: number;
+}

src/app/api/variables.ts

+import { InjectionToken } from '@angular/core';
+
+export const BASE_PATH = new InjectionToken<string>('basePath');
+export const COLLECTION_FORMATS = {
+    'csv': ',',
+    'tsv': '   ',
+    'ssv': ' ',
+    'pipes': '|'
+}

src/app/app-routing.module.ts

 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+import { MainComponent } from './main/main.component';
+import { VideoComponent } from './video/video.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  {path:"",redirectTo:"./home",pathMatch:'full'},
+  {path:'home',component:MainComponent},
+  {path:'video',component:VideoComponent},
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

src/app/app.component.html

-<!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
-  <h1>
-    Welcome to {{ title }}!
-  </h1>
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
-</div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
+
+<h1>
+  山西省公路建设智慧监管指挥平台
+</h1>
+
+
 
 <router-outlet></router-outlet>

src/app/app.component.less

+h1{
+    text-align: center;
+}
\ No newline at end of file

src/app/app.module.ts

@@ -3,14 +3,27 @@ import { NgModule } from '@angular/core';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-
+import { MainComponent } from './main/main.component';
+import { VideoComponent } from './video/video.component';
+import { BaiduMapModule } from 'angular2-baidu-map';
+import { FormsModule } from '@angular/forms';
+import { ModalComponent } from './modal/modal.component';
+import { ApiModule } from './api';
+import { HttpClientModule } from '@angular/common/http';
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    MainComponent,
+    VideoComponent,
+    ModalComponent
   ],
   imports: [
+    HttpClientModule,
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    FormsModule,
+    ApiModule,
+    BaiduMapModule.forRoot({ ak: 'KhQqnL3owyAzqjr4zCGbWiiHwPFmKTD6' })
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/dynamic-script.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { DynamicScriptService } from './dynamic-script.service';
+
+describe('DynamicScriptService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: DynamicScriptService = TestBed.get(DynamicScriptService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/dynamic-script.service.ts

+import { Injectable } from '@angular/core';
+
+interface Scripts {
+  name: string;
+  src: string;
+}
+
+export const ScriptStore: Scripts[] = [
+
+  { name: 'drawing', src: '/assets/DrawingManager.js' },
+  { name: 'geouti', src: '/assets/GeoUtils.js' },
+
+];
+
+declare var document: any;
+
+@Injectable({
+  providedIn:'root'
+})
+export class DynamicScriptLoaderService {
+
+  private scripts: any = {};
+
+  constructor() {
+    ScriptStore.forEach((script: any) => {
+      this.scripts[script.name] = {
+        loaded: false,
+        src: script.src
+      };
+    });
+  }
+
+  load(...scripts: string[]) {
+    const promises: any[] = [];
+    scripts.forEach((script) => promises.push(this.loadScript(script)));
+    return Promise.all(promises);
+  }
+
+  loadScript(name: string) {
+    return new Promise((resolve, reject) => {
+      if (!this.scripts[name].loaded) {
+        //load script
+        let script = document.createElement('script');
+        script.type = 'text/javascript';
+        script.src = this.scripts[name].src;
+        if (script.readyState) {  //IE
+            script.onreadystatechange = () => {
+                if (script.readyState === "loaded" || script.readyState === "complete") {
+                    script.onreadystatechange = null;
+                    this.scripts[name].loaded = true;
+                    resolve({script: name, loaded: true, status: 'Loaded'});
+                }
+            };
+        } else {  //Others
+            script.onload = () => {
+                this.scripts[name].loaded = true;
+                resolve({script: name, loaded: true, status: 'Loaded'});
+            };
+        }
+        script.onerror = (error: any) => resolve({script: name, loaded: false, status: 'Loaded'});
+        document.getElementsByTagName('head')[0].appendChild(script);
+      } else {
+        resolve({ script: name, loaded: true, status: 'Already Loaded' });
+      }
+    });
+  }
+
+}
\ No newline at end of file

src/app/main/main.component.html

+<header></header>
+<div class="main">
+  <div class="left">
+  
+    <section>
+
+        <select [(ngModel)]="type">
+          <option value="0">project</option>
+          <option value="1">course</option>
+          <option value="2">SECTION</option>
+        </select>
+        <select [(ngModel)]="currentCouseId">
+          <option *ngFor="let c of courses" [value]="c.id" >{{c.name}}</option>
+        </select>
+        <!-- <button (click)="openDialog('custom-modal-1')" >新增项目</button> -->
+       <button (click)="toHighWay()">高速公路</button>
+      <div *ngIf="!highShow">
+        <label>项目总数：{{staticHighWay.total}}个</label>
+        <label>总建设里程：{{staticHighWay.mileage}}Km    </label>
+        <label>总投资：{{staticHighWay.capital}}亿</label>
+      </div>
+       <section  *ngIf="highShow" class="sub">
+
+         <label (click)="changePolyline(prj)" *ngFor="let prj of projects">{{prj.name}}
+         </label>
+       </section>
+      </section>
+      <section>
+          <button (click)='toNormal()'>普通干线
+            </button>
+
+            <div *ngIf="!normalShow">
+                <label>项目总数：{{staticNormal.total}}个</label>
+                <label>总建设里程：{{staticNormal.mileage}}Km    </label>
+                <label>总投资：{{staticNormal.capital}}亿</label>
+              </div>
+              <section  *ngIf="normalShow" class="sub">
+
+                  <label (click)="changePolyline(prj)" *ngFor="let prj of normalProjects">{{prj.name}}
+                  </label>
+                </section>
+      </section>
+   </div>
+  
+   <div class="map">
+     <div id="polylineLength"></div>
+     <div id="result"></div>
+     <!-- <polyline *ngFor="let poly of polys" [points]="poly.points" [options]="poly.polylineOptions" (loaded)="polylineLoaded($event)" (clicked)="polylineClicked($event)"></polyline>
+       -->
+      <baidu-map #map [options]="opts" >
+          <polyline  [points]="points" [options]="polylineOptions" (loaded)="polylineLoaded($event)" (clicked)="polylineClicked($event)"></polyline>
+
+        </baidu-map>
+   </div>
+   <div class="right">
+      <section>
+          <button>视频监管
+
+            </button>
+          <label>项目总数：**个</label>
+          <label>总建设里程：***Km    </label>
+          <label>总投资：**亿</label>
+      </section>
+      <section>
+          <button>建设程序监管
+
+            </button>
+          <label>项目总数：**个</label>
+          <label>总建设里程：***Km    </label>
+          <label>总投资：**亿</label>
+      </section>
+      <section>
+          <button>质量安全监管
+
+
+
+            </button>
+          <label>项目总数：**个</label>
+          <label>总建设里程：***Km    </label>
+          <label>总投资：**亿</label>
+      </section>
+      <section>
+          <button>造价监管
+
+            </button>
+          <label>项目总数：**个</label>
+          <label>总建设里程：***Km    </label>
+          <label>总投资：**亿</label>
+      </section>
+   </div>  
+</div>  
+
+
+<jw-modal id="custom-modal-1">
+  <h1>添加项目</h1>
+  <p>项目名称: <input type="text" [(ngModel)]="proj.name" /></p>
+  <p>capital: <input type="text" [(ngModel)]="proj.capital" /></p>
+  <p>coordinate: <input type="text" [(ngModel)]="proj.coordinate" /></p>
+  <p>course: <input type="text" [(ngModel)]="proj.course" /></p>
+  <p>lineStyle: <input type="text" [(ngModel)]="proj.lineStyle" /></p>
+  <p>lineWidth: <input type="text" [(ngModel)]="proj.lineWidth" /></p>
+  <p>mileage: <input type="text" [(ngModel)]="proj.mileage" /></p>
+
+  <button (click)="addProj(proj)">添加</button>
+  <button (click)="closeModal('custom-modal-1');">Close</button>
+</jw-modal>
+
+
+
+<jw-modal id="custom-modal-2">
+    <h1>添加course</h1>
+    <p>courses名称: <input type="text" [(ngModel)]="course.name" /></p>
+    <p>lineStyle: <input type="text" [(ngModel)]="course.lineStyle" /></p>
+    <p>lineWidth: <input type="text" [(ngModel)]="course.lineWidth" /></p>
+    <p>coordinate: <input type="text" [(ngModel)]="course.coordinate" /></p>
+    <p>mark:
+      <select [(ngModel)]="course.mark" >
+        <option [value]="1">高速公路</option>
+        <option [value]="2">普通干线</option>
+      </select>
+    </p>
+
+    <button (click)="addCourse(course)">添加</button>
+    <button (click)="closeModal('custom-modal-2');">Close</button>
+  </jw-modal>
+
+  <jw-modal id="custom-modal-3">
+      <h1>添加section</h1>
+      <p>courses名称: <input type="text" [(ngModel)]="section.name" /></p>
+      <p>projectId: <input type="text" [(ngModel)]="section.project" /></p>
+      <p>lineStyle: <input type="text" [(ngModel)]="section.lineStyle" /></p>
+      <p>lineWidth: <input type="text" [(ngModel)]="section.lineWidth" /></p>
+      <p>coordinate: <input type="text" [(ngModel)]="section.coordinate" /></p>
+      <p>coordinate: <input type="text" [(ngModel)]="section.mileage" /></p>
+     
+  
+      <button (click)="addSection(section)">添加</button>
+      <button (click)="closeModal('custom-modal-3');">Close</button>
+    </jw-modal>

src/app/main/main.component.less

+.main{
+    display: grid;
+    grid-template-columns: 15% auto 15%;
+    grid-template-rows:850px;
+    section{
+        padding: 1em;
+        background: #3885b391;
+        margin: 5px;
+        border: 4px solid #3885b3;
+        button{
+            box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
+            background: #ea262d96;
+            color:white;
+            border-radius: 4px;
+            width: 100px;
+            height: 30px;
+            display: block;
+            margin: 0.3em;
+        }
+        label{
+            display: block;
+        }
+        &.sub{
+           
+         padding:0.4em;
+         border:none;
+         margin:0;
+            label{
+         
+                cursor: pointer;
+                background: #076796;
+                padding: 0.2em;
+                border: 1px solid #42a5d23b;
+            }
+        }
+    }
+    .left{
+     
+        
+    }
+    .map{
+      
+    }
+    .right{
+      
+    }
+}
\ No newline at end of file

src/app/main/main.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MainComponent } from './main.component';
+
+describe('MainComponent', () => {
+  let component: MainComponent;
+  let fixture: ComponentFixture<MainComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MainComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MainComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/main/main.component.ts

+import { Component, OnInit, AfterContentInit, AfterViewInit, ViewChild, Inject, ChangeDetectorRef } from '@angular/core';
+import { MapOptions, Point, PolylineOptions, BPolyline, ControlAnchor } from 'angular2-baidu-map';
+import { DynamicScriptLoaderService } from '../dynamic-script.service';
+
+
+import { theme } from './theme';
+import { ModalService } from '../services';
+import { DefaultService, Project, Course, Scetion } from '../api';
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { timer } from 'rxjs';
+
+import { timeInterval, pluck, take} from 'rxjs/operators';
+declare var drawingManager:any;
+declare var map:any;
+declare var BMap:any;
+const enum CordType{
+  PROJ,
+  COURSE,
+  SECTION
+}
+const enum markType{
+HIGHWAY=1,
+NORMAL
+}
+export interface DialogData {
+  animal: string;
+  name: string;
+}
+@Component({
+  selector: 'app-main',
+  templateUrl: './main.component.html',
+  styleUrls: ['./main.component.less']
+})
+export class MainComponent implements OnInit {
+
+  courses=[];
+  highShow=false;
+  normalShow=false;
+  public opts: MapOptions
+  public points: Array<Point>=[];
+  public polylineOptions: PolylineOptions;
+
+  public projects=[
+  ]
+  polys=[];
+  proj:Project={delFlag:0};
+  course:Course = {delFlag:0};
+  section:Scetion = {delFlag:0};
+  type=1;
+  _this =this;
+  currentCouseId:any;
+  staticHighWay:any={};
+  staticNormal:any={};
+  normalProjects:any=[];
+  debug=true;
+toPoints(points:Array<Point>){
+  if (!points) {
+    return []
+  }
+  return points.map(p => {
+    return new window.BMap.Point(p.lng, p.lat)
+  })
+}
+
+  addPoly(cords:string){
+   var points = JSON.parse(cords).map(c=>({lng:c[0],lat:c[1]}));
+    var newPolyLine = new window.BMap.Polyline(this.toPoints(points));
+    map.addOverlay(newPolyLine);
+   
+  }
+  ngOnInit(): void {
+
+      this.http.get<any>(this.s.basePath+`/project/total`).subscribe(res=>{
+      this.staticHighWay=res.data[0];
+      });
+      this.http.get<any>(this.s.basePath+`/project/total2`).subscribe(res=>{
+        this.staticNormal=res.data[0];
+        });
+   
+    this.http.get<any>(this.s.basePath+"/course/list").subscribe(res=>{
+      this.courses=res.data;
+    });
+  }
+   toHighWay(){
+     this.highShow=!this.highShow;
+     let params = new HttpParams();
+     params.append('mark',markType.HIGHWAY.toString());
+    this.http.get<any>(this.s.basePath+`/project/list/${markType.HIGHWAY}`).subscribe(res=>{
+      this.projects=res.data;
+      var allPoints = [];
+
+      res.data.forEach(poly => {
+        this.addPoly(poly.coordinate);
+        allPoints = allPoints.concat(JSON.parse(poly.coordinate));
+      });
+      map.setViewport(allPoints.map(p=>({lng:p[0],lat:p[1]})));
+    });
+
+   }
+   toNormal(){
+    this.normalShow=!this.normalShow;
+    let params = new HttpParams();
+    params.append('mark',markType.HIGHWAY.toString());
+   this.http.get<any>(this.s.basePath+`/project/list/${markType.NORMAL}`).subscribe(res=>{
+     this.normalProjects=res.data;
+
+   });
+
+  }
+    openDialog(id: string) {
+      this.modalService.open(id);
+  }
+
+
+  constructor(private cd:ChangeDetectorRef,private http:HttpClient, private dynamicScriptLoader: DynamicScriptLoaderService,private modalService: ModalService,private s:DefaultService) {
+    //定位山西省地图
+    this.opts = {
+      centerAndZoom: {
+        lat: 37.78663390039693,
+        lng: 112.43176242674386,
+        zoom: 15
+      },
+      
+    }
+
+
+ 
+
+    this.polylineOptions = {
+      strokeColor: 'red',
+      strokeWeight: 10
+    }
+
+  }
+
+changePolyline(proj){
+  this.polylineOptions  = {strokeColor:proj.lineStyle,strokeWeight:proj.lineWidth}
+  this.triggerFlash();
+
+
+  
+    this.points = Object.assign([],JSON.parse(proj.coordinate)).map(r=>({lat:Number(r[1]),lng:Number(r[0])}));
+
+
+  map.setViewport(this.points)
+
+}
+// 切换线条的闪烁
+  private triggerFlash() {
+    var originColor = this.polylineOptions.strokeColor;
+    timer(0, 200)
+      .pipe(timeInterval(), pluck('interval'), take(6)).subscribe(index => {
+        if (this.polylineOptions.strokeColor == "#fff") {
+          this.polylineOptions = { strokeColor: originColor };
+        }
+        else {
+          this.polylineOptions = { strokeColor: "#fff" };
+        }
+      });
+  }
+
+addCourse(course:Course){
+
+  this.http.post<Course>(this.s.basePath+"/course/add",this.course).subscribe(res=>{
+    this.modalService.close('custom-modal-2');
+  })
+}
+addSection(section:Scetion){
+
+  this.http.post<Scetion>(this.s.basePath+"/scetion/add",section).subscribe(res=>{
+    this.modalService.close('custom-modal-3');
+  })
+}
+addProj(proj:Project){
+  this.http.post(this.s.basePath+"/project/add",proj).subscribe(res=>{
+    console.log(res)
+  });
+}
+  public polylineLoaded(polyline: BPolyline): void {
+   (window as any).map= polyline.getMap();
+   this.setBound();
+   (window as any).map.setMapStyleV2({styleJson:theme});
+      this.dynamicScriptLoader.load('drawing','geouti').then(data => {
+        // Script Loaded Successfully
+        drawingManager.addEventListener("mousedown",e=>{
+          console.log(e);
+        });
+        drawingManager.addEventListener('overlaycomplete', e=>{
+          var overlay = e.overlay;
+          if(!e.overlay.getBounds){
+            return;
+          }
+          var bounds = e.overlay.getBounds();
+          
+          var ne = bounds.getNorthEast();
+          var sw = bounds.getSouthWest();
+          var mercatorProjection = map.getMapType().getProjection();
+         var neMc = mercatorProjection.lngLatToPoint(ne);
+          var swMc = mercatorProjection.lngLatToPoint(sw);
+          var pathStr = "";
+          var geojsonStr ={};
+          var pathmcStr = "";
+          var path = overlay.getPath();
+          var coordinates = [];
+          for (var i = 0; i < path.length; i++) {
+              pathStr += path[i].lng + "," + path[i].lat + ",";
+              var mc = mercatorProjection.lngLatToPoint(path[i]);
+              pathmcStr += mc.x + "," + mc.y + ",";
+              coordinates.push([path[i].lng, path[i].lat]);
+          }
+          pathmcStr = pathmcStr.substr(0, pathmcStr.length - 1); 
+          pathStr = pathStr.substr(0, pathStr.length - 1);
+          if (overlay.toString() == '[object Polyline]') {
+              geojsonStr = {
+                  "type": "LineString",
+                  "coordinates": coordinates
+              };
+          } else if (overlay.toString() == '[object Polygon]') {
+              geojsonStr = {
+                  "type": "Polygon",
+                  "coordinates": [coordinates]
+              };
+          }
+          
+          if(this.type==CordType.PROJ){
+            this.proj.course=this.currentCouseId;
+            this.proj.coordinate =JSON.stringify(coordinates);
+            this.modalService.open('custom-modal-1');
+          
+          }else if(this.type==CordType.COURSE){
+
+            this.course.coordinate = JSON.stringify(coordinates);
+            this.modalService.open('custom-modal-2');
+            
+          }else if(this.type==CordType.SECTION){
+            this.section.coordinate = JSON.stringify(coordinates);
+            this.modalService.open('custom-modal-3');
+          }
+          document.getElementById('result').innerHTML = "<div><span>左下角,右上角(经纬度)：</span><button class='btn'>复制</button><p class='copyText'>" + sw.lng + "," + sw.lat + "," + ne.lng + "," + ne.lat + "</p></div>"
+                                                       + "<div><span>左下角,右上角(墨卡托坐标)：</span><button class='btn'>复制</button><p class='copyText'>" + swMc.x + "," + swMc.y + "," + neMc.x + "," + neMc.y + "</p></div>"
+                                                       + "<div><span>坐标集(经纬度)：</span><button class='btn'>复制</button><p class='copyText'>" + pathStr + "</p></div>"
+                                                       + "<div><span>坐标集(墨卡托坐标)：</span><button class='btn'>复制</button><p class='copyText'>" + pathmcStr + "</p></div>"
+                                                       + "<div><span>geojson：</span><button class='btn'>复制</button><p class='copyText' style='white-space:nowrap;'>" + JSON.stringify(geojsonStr) + "</p></div>";
+      
+    
+        });
+      }).catch(error => console.log(error));
+    
+    console.log('polyline loaded', polyline)
+  }
+
+  public polylineClicked({ polyline }): void {
+    console.log('polyline clicked', polyline)
+  }
+
+  overlaycomplete(e){
+    
+
+};
+closeModal(id: string) {
+  this.modalService.close(id);
+}
+setBound(){
+  var project = map.getMapType().getProjection();
+  var  getPathStr=function(overlay) {
+    var pathStr = "";
+    var path = overlay.getPath();
+    for (var i = 0; i < path.length; i++) {
+        pathStr += path[i].lng + "," + path[i].lat + ",";
+    }
+    pathStr = pathStr.substr(0, pathStr.length - 1);
+    return pathStr;
+}
+  var bdary = new BMap.Boundary();
+  bdary.get('山西' , function(rs){       //获取行政区域
+    //map.clearOverlays();        //清除地图覆盖物       
+    var count = rs.boundaries.length; //行政区域的点有多少个
+    if (count === 0) {
+        alert('未能获取当前输入行政区域');
+        return ;
+    }
+    var pointArray = [];
+    var pathArr = [];
+    for (var i = 0; i < count; i++) {
+        var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 1, fillOpacity: 0.05, strokeColor: "#f0f"}); //建立多边形覆盖物
+
+        (function(ply){
+            ply.addEventListener('click', function() {
+               // showResult(ply);
+            });
+        })(ply);
+        pathArr.push(getPathStr(ply));
+
+        map.addOverlay(ply);  //添加覆盖物
+        //showResult(ply);
+        var path = ply.getPath();
+        var result = [];
+        for (var j = 0; j < path.length; j++) {
+            var px = project.lngLatToPoint(path[j]);
+            result.push(px.x + ',' + px.y);
+        }
+        pointArray = pointArray.concat(path);
+    }    
+   
+    map.setViewport(pointArray);    //调整视野       
+    map.setMinZoom(8);          
+});
+}
+}
+
+

src/app/main/theme.ts

+
+export const theme =[{
+    "featureType": "land",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "on",
+        "color": "#0d142dff"
+    }
+  }, {
+    "featureType": "water",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "visibility": "on",
+        "color": "#0d142dff"
+    }
+  }, {
+    "featureType": "building",
+    "elementType": "geometry.fill",
+    "stylers": {
+        "visibility": "on",
+        "color": "#02081eff"
+    }
+  }, {
+    "featureType": "building",
+    "elementType": "geometry.stroke",
+    "stylers": {
+        "visibility": "on",
+        "color": "#000005ff"
+    }
+  }, {
+    "featureType": "water",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "on",
+        "color": "#65a8d1ff"
+    }
+  }, {
+    "featureType": "village",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off"
+    }
+  }, {
+    "featureType": "town",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off"
+    }
+  }, {
+    "featureType": "district",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off"
+    }
+  }, {
+    "featureType": "country",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "visibility": "on",
+        "color": "#65a8d1ff"
+    }
+  }, {
+    "featureType": "city",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "visibility": "on",
+        "color": "#65a8d1ff"
+    }
+  }, {
+    "featureType": "continent",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "visibility": "on",
+        "color": "#65a8d1ff"
+    }
+  }, {
+    "featureType": "poilabel",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off"
+    }
+  }, {
+    "featureType": "poilabel",
+    "elementType": "labels.icon",
+    "stylers": {
+        "visibility": "off"
+    }
+  }, {
+    "featureType": "scenicspotslabel",
+    "elementType": "labels.icon",
+    "stylers": {
+        "visibility": "off"
+    }
+  }, {
+    "featureType": "scenicspotslabel",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "visibility": "on",
+        "color": "#65a8d1ff"
+    }
+  }, {
+    "featureType": "transportationlabel",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "visibility": "on",
+        "color": "#65a8d1ff"
+    }
+  }, {
+    "featureType": "transportationlabel",
+    "elementType": "labels.icon",
+    "stylers": {
+        "visibility": "off"
+    }
+  }, {
+    "featureType": "airportlabel",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "visibility": "on",
+        "color": "#65a8d1ff"
+    }
+  }, {
+    "featureType": "airportlabel",
+    "elementType": "labels.icon",
+    "stylers": {
+        "visibility": "off"
+    }
+  }, {
+    "featureType": "road",
+    "elementType": "geometry.fill",
+    "stylers": {
+        "visibility": "on",
+        "color": "#4c8ec1ff"
+    }
+  }, {
+    "featureType": "road",
+    "elementType": "geometry.stroke",
+    "stylers": {
+        "visibility": "on",
+        "color": "#2e6b99ff"
+    }
+  }, {
+    "featureType": "road",
+    "elementType": "geometry",
+    "stylers": {
+        "weight": "3"
+    }
+  }, {
+    "featureType": "green",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "on",
+        "color": "#0e182dff"
+    }
+  }, {
+    "featureType": "scenicspots",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "on",
+        "color": "#0d142dff"
+    }
+  }, {
+    "featureType": "scenicspots",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "visibility": "on",
+        "color": "#65a8d1ff"
+    }
+  }, {
+    "featureType": "scenicspots",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "visibility": "on",
+        "color": "#ffffffff",
+        "weight": "1"
+    }
+  }, {
+    "featureType": "continent",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "visibility": "on",
+        "color": "#ffffffff",
+        "weight": "1"
+    }
+  }, {
+    "featureType": "country",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "visibility": "on",
+        "color": "#ffffffff",
+        "weight": "1"
+    }
+  }, {
+    "featureType": "city",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "visibility": "on",
+        "color": "#ffffffff",
+        "weight": "1"
+    }
+  }, {
+    "featureType": "city",
+    "elementType": "labels.icon",
+    "stylers": {
+        "visibility": "off"
+    }
+  }, {
+    "featureType": "scenicspotslabel",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "visibility": "on",
+        "color": "#ffffffff",
+        "weight": "1"
+    }
+  }, {
+    "featureType": "airportlabel",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "visibility": "on",
+        "color": "#ffffffff",
+        "weight": "1"
+    }
+  }, {
+    "featureType": "transportationlabel",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "visibility": "on",
+        "color": "#ffffffff",
+        "weight": "1"
+    }
+  }, {
+    "featureType": "railway",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off"
+    }
+  }, {
+    "featureType": "subway",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off"
+    }
+  }, {
+    "featureType": "highwaysign",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off"
+    }
+  }, {
+    "featureType": "nationalwaysign",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off"
+    }
+  }, {
+    "featureType": "nationalwaysign",
+    "elementType": "labels.icon",
+    "stylers": {
+        "visibility": "off"
+    }
+  }, {
+    "featureType": "provincialwaysign",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off"
+    }
+  }, {
+    "featureType": "provincialwaysign",
+    "elementType": "labels.icon",
+    "stylers": {
+        "visibility": "off"
+    }
+  }, {
+    "featureType": "tertiarywaysign",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off"
+    }
+  }, {
+    "featureType": "tertiarywaysign",
+    "elementType": "labels.icon",
+    "stylers": {
+        "visibility": "off"
+    }
+  }, {
+    "featureType": "subwaylabel",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off"
+    }
+  }, {
+    "featureType": "subwaylabel",
+    "elementType": "labels.icon",
+    "stylers": {
+        "visibility": "off"
+    }
+  }, {
+    "featureType": "road",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "visibility": "on",
+        "color": "#65a8d1ff",
+        "weight": "90"
+    }
+  }, {
+    "featureType": "road",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "visibility": "on",
+        "color": "#ffffffff",
+        "weight": "1"
+    }
+  }, {
+    "featureType": "shopping",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off"
+    }
+  }, {
+    "featureType": "scenicspots",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "on"
+    }
+  }, {
+    "featureType": "scenicspotslabel",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off"
+    }
+  }, {
+    "featureType": "manmade",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off"
+    }
+  }, {
+    "featureType": "manmade",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off"
+    }
+  }, {
+    "featureType": "highwaysign",
+    "elementType": "labels.icon",
+    "stylers": {
+        "visibility": "off"
+    }
+  }, {
+    "featureType": "water",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "visibility": "on",
+        "color": "#0e182d00"
+    }
+  }, {
+    "featureType": "road",
+    "stylers": {
+        "level": "6",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-9"
+    }
+  }, {
+    "featureType": "road",
+    "stylers": {
+        "level": "7",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-9"
+    }
+  }, {
+    "featureType": "road",
+    "stylers": {
+        "level": "8",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-9"
+    }
+  }, {
+    "featureType": "road",
+    "stylers": {
+        "level": "9",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-9"
+    }
+  }, {
+    "featureType": "road",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off",
+        "level": "6",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-9"
+    }
+  }, {
+    "featureType": "road",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off",
+        "level": "7",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-9"
+    }
+  }, {
+    "featureType": "road",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off",
+        "level": "8",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-9"
+    }
+  }, {
+    "featureType": "road",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off",
+        "level": "9",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-9"
+    }
+  }, {
+    "featureType": "road",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off",
+        "level": "6",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-9"
+    }
+  }, {
+    "featureType": "road",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off",
+        "level": "7",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-9"
+    }
+  }, {
+    "featureType": "road",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off",
+        "level": "8",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-9"
+    }
+  }, {
+    "featureType": "road",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off",
+        "level": "9",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-9"
+    }
+  }, {
+    "featureType": "road",
+    "elementType": "labels.text",
+    "stylers": {
+        "fontsize": "24"
+    }
+  }, {
+    "featureType": "highway",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "visibility": "on",
+        "color": "#ffffffff",
+        "weight": "1.2"
+    }
+  }, {
+    "featureType": "highway",
+    "elementType": "geometry.fill",
+    "stylers": {
+        "visibility": "on",
+        "color": "#b0e614f5"
+    }
+  }, {
+    "featureType": "highway",
+    "elementType": "geometry.stroke",
+    "stylers": {
+        "color": "#860df1ff"
+    }
+  }, {
+    "featureType": "highway",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "visibility": "on",
+        "color": "#65a8d1ff"
+    }
+  }, {
+    "featureType": "highway",
+    "elementType": "geometry",
+    "stylers": {
+        "weight": "4.2"
+    }
+  }, {
+    "featureType": "nationalway",
+    "elementType": "geometry.fill",
+    "stylers": {
+        "visibility": "on",
+        "color": "#4c8ec1ff"
+    }
+  }, {
+    "featureType": "nationalway",
+    "elementType": "geometry.stroke",
+    "stylers": {
+        "color": "#1c4f7eff"
+    }
+  }, {
+    "featureType": "nationalway",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "visibility": "on",
+        "color": "#65a8d1ff"
+    }
+  }, {
+    "featureType": "nationalway",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "visibility": "on",
+        "color": "#ffffffff",
+        "weight": "1"
+    }
+  }, {
+    "featureType": "nationalway",
+    "elementType": "geometry",
+    "stylers": {
+        "weight": "3"
+    }
+  }, {
+    "featureType": "provincialway",
+    "elementType": "geometry.fill",
+    "stylers": {
+        "visibility": "on",
+        "color": "#abc14cff"
+    }
+  }, {
+    "featureType": "cityhighway",
+    "elementType": "geometry.fill",
+    "stylers": {
+        "visibility": "on",
+        "color": "#4c8ec1ff"
+    }
+  }, {
+    "featureType": "arterial",
+    "elementType": "geometry.fill",
+    "stylers": {
+        "visibility": "on",
+        "color": "#4c8ec1ff"
+    }
+  }, {
+    "featureType": "tertiaryway",
+    "elementType": "geometry.fill",
+    "stylers": {
+        "visibility": "on",
+        "color": "#4a90e2ff"
+    }
+  }, {
+    "featureType": "fourlevelway",
+    "elementType": "geometry.fill",
+    "stylers": {
+        "visibility": "on",
+        "color": "#4c8ec1ff"
+    }
+  }, {
+    "featureType": "local",
+    "elementType": "geometry.fill",
+    "stylers": {
+        "visibility": "on",
+        "color": "#4c8ec1ff"
+    }
+  }, {
+    "featureType": "provincialway",
+    "elementType": "geometry.stroke",
+    "stylers": {
+        "visibility": "on",
+        "color": "#2e6b99ff"
+    }
+  }, {
+    "featureType": "cityhighway",
+    "elementType": "geometry.stroke",
+    "stylers": {
+        "visibility": "on",
+        "color": "#2e6b99ff"
+    }
+  }, {
+    "featureType": "arterial",
+    "elementType": "geometry.stroke",
+    "stylers": {
+        "visibility": "on",
+        "color": "#2e6b99ff"
+    }
+  }, {
+    "featureType": "tertiaryway",
+    "elementType": "geometry.stroke",
+    "stylers": {
+        "visibility": "on",
+        "color": "#2e6b99ff"
+    }
+  }, {
+    "featureType": "fourlevelway",
+    "elementType": "geometry.stroke",
+    "stylers": {
+        "visibility": "on",
+        "color": "#2e6b99ff"
+    }
+  }, {
+    "featureType": "local",
+    "elementType": "geometry.stroke",
+    "stylers": {
+        "visibility": "on",
+        "color": "#2e6b99ff"
+    }
+  }, {
+    "featureType": "local",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "visibility": "on",
+        "color": "#65a8d1ff"
+    }
+  }, {
+    "featureType": "local",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "visibility": "on",
+        "color": "#ffffffff",
+        "weight": "1"
+    }
+  }, {
+    "featureType": "fourlevelway",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "visibility": "on",
+        "color": "#65a8d1ff"
+    }
+  }, {
+    "featureType": "tertiaryway",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "visibility": "on",
+        "color": "#65a8d1ff"
+    }
+  }, {
+    "featureType": "arterial",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "visibility": "on",
+        "color": "#65a8d1ff"
+    }
+  }, {
+    "featureType": "cityhighway",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "visibility": "on",
+        "color": "#65a8d1ff"
+    }
+  }, {
+    "featureType": "provincialway",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "visibility": "on",
+        "color": "#65a8d1ff"
+    }
+  }, {
+    "featureType": "provincialway",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "visibility": "on",
+        "color": "#ffffffff",
+        "weight": "1"
+    }
+  }, {
+    "featureType": "cityhighway",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "visibility": "on",
+        "color": "#ffffffff",
+        "weight": "1"
+    }
+  }, {
+    "featureType": "arterial",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "visibility": "on",
+        "color": "#ffffffff",
+        "weight": "1"
+    }
+  }, {
+    "featureType": "tertiaryway",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "visibility": "on",
+        "color": "#ffffffff",
+        "weight": "1"
+    }
+  }, {
+    "featureType": "fourlevelway",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "visibility": "on",
+        "color": "#ffffffff",
+        "weight": "1"
+    }
+  }, {
+    "featureType": "fourlevelway",
+    "elementType": "geometry",
+    "stylers": {
+        "weight": "1"
+    }
+  }, {
+    "featureType": "tertiaryway",
+    "elementType": "geometry",
+    "stylers": {
+        "weight": "1"
+    }
+  }, {
+    "featureType": "local",
+    "elementType": "geometry",
+    "stylers": {
+        "weight": "1"
+    }
+  }, {
+    "featureType": "provincialway",
+    "elementType": "geometry",
+    "stylers": {
+        "weight": "3"
+    }
+  }, {
+    "featureType": "cityhighway",
+    "elementType": "geometry",
+    "stylers": {
+        "weight": "3"
+    }
+  }, {
+    "featureType": "arterial",
+    "elementType": "geometry",
+    "stylers": {
+        "weight": "3"
+    }
+  }, {
+    "featureType": "highway",
+    "stylers": {
+        "level": "6",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-9"
+    }
+  }, {
+    "featureType": "highway",
+    "stylers": {
+        "level": "7",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-9"
+    }
+  }, {
+    "featureType": "highway",
+    "stylers": {
+        "level": "8",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-9"
+    }
+  }, {
+    "featureType": "highway",
+    "stylers": {
+        "level": "9",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-9"
+    }
+  }, {
+    "featureType": "highway",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off",
+        "level": "6",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-9"
+    }
+  }, {
+    "featureType": "highway",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off",
+        "level": "7",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-9"
+    }
+  }, {
+    "featureType": "highway",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off",
+        "level": "8",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-9"
+    }
+  }, {
+    "featureType": "highway",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off",
+        "level": "9",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-9"
+    }
+  }, {
+    "featureType": "highway",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off",
+        "level": "6",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-9"
+    }
+  }, {
+    "featureType": "highway",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off",
+        "level": "7",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-9"
+    }
+  }, {
+    "featureType": "highway",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off",
+        "level": "8",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-9"
+    }
+  }, {
+    "featureType": "highway",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off",
+        "level": "9",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-9"
+    }
+  }, {
+    "featureType": "nationalway",
+    "stylers": {
+        "level": "6",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-9"
+    }
+  }, {
+    "featureType": "nationalway",
+    "stylers": {
+        "level": "7",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-9"
+    }
+  }, {
+    "featureType": "nationalway",
+    "stylers": {
+        "level": "8",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-9"
+    }
+  }, {
+    "featureType": "nationalway",
+    "stylers": {
+        "level": "9",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-9"
+    }
+  }, {
+    "featureType": "nationalway",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off",
+        "level": "6",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-9"
+    }
+  }, {
+    "featureType": "nationalway",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off",
+        "level": "7",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-9"
+    }
+  }, {
+    "featureType": "nationalway",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off",
+        "level": "8",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-9"
+    }
+  }, {
+    "featureType": "nationalway",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off",
+        "level": "9",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-9"
+    }
+  }, {
+    "featureType": "nationalway",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off",
+        "level": "6",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-9"
+    }
+  }, {
+    "featureType": "nationalway",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off",
+        "level": "7",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-9"
+    }
+  }, {
+    "featureType": "nationalway",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off",
+        "level": "8",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-9"
+    }
+  }, {
+    "featureType": "nationalway",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off",
+        "level": "9",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-9"
+    }
+  }, {
+    "featureType": "provincialway",
+    "stylers": {
+        "level": "8",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "8-10"
+    }
+  }, {
+    "featureType": "provincialway",
+    "stylers": {
+        "level": "9",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "8-10"
+    }
+  }, {
+    "featureType": "provincialway",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off",
+        "level": "8",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "8-10"
+    }
+  }, {
+    "featureType": "provincialway",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off",
+        "level": "9",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "8-10"
+    }
+  }, {
+    "featureType": "provincialway",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off",
+        "level": "8",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "8-10"
+    }
+  }, {
+    "featureType": "provincialway",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off",
+        "level": "9",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "8-10"
+    }
+  }, {
+    "featureType": "cityhighway",
+    "stylers": {
+        "level": "6",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-9"
+    }
+  }, {
+    "featureType": "cityhighway",
+    "stylers": {
+        "level": "7",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-9"
+    }
+  }, {
+    "featureType": "cityhighway",
+    "stylers": {
+        "level": "8",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-9"
+    }
+  }, {
+    "featureType": "cityhighway",
+    "stylers": {
+        "level": "9",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-9"
+    }
+  }, {
+    "featureType": "cityhighway",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off",
+        "level": "6",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-9"
+    }
+  }, {
+    "featureType": "cityhighway",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off",
+        "level": "7",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-9"
+    }
+  }, {
+    "featureType": "cityhighway",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off",
+        "level": "8",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-9"
+    }
+  }, {
+    "featureType": "cityhighway",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off",
+        "level": "9",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-9"
+    }
+  }, {
+    "featureType": "cityhighway",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off",
+        "level": "6",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-9"
+    }
+  }, {
+    "featureType": "cityhighway",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off",
+        "level": "7",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-9"
+    }
+  }, {
+    "featureType": "cityhighway",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off",
+        "level": "8",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-9"
+    }
+  }, {
+    "featureType": "cityhighway",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off",
+        "level": "9",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-9"
+    }
+  }, {
+    "featureType": "arterial",
+    "stylers": {
+        "level": "9",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "9-9"
+    }
+  }, {
+    "featureType": "arterial",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off",
+        "level": "9",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "9-9"
+    }
+  }, {
+    "featureType": "arterial",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off",
+        "level": "9",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "9-9"
+    }
+  }]
\ No newline at end of file

src/app/modal/modal.component.html

+<p>
+  modal works!
+</p>

src/app/modal/modal.component.less

+/* MODAL STYLES
+-------------------------------*/
+jw-modal {
+    /* modals are hidden by default */
+    display: none;
+
+    .jw-modal {
+        /* modal container fixed across whole screen */
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+
+        /* z-index must be higher than .jw-modal-background */
+        z-index: 1000;
+        
+        /* enables scrolling for tall modals */
+        overflow: auto;
+
+        .jw-modal-body {
+            padding: 20px;
+            background: #fff;
+
+            /* margin exposes part of the modal background */
+            margin: 40px;
+        }
+    }
+
+    .jw-modal-background {
+        /* modal background fixed across whole screen */
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+
+        /* semi-transparent black  */
+        background-color: #000;
+        opacity: 0.75;
+        
+        /* z-index must be below .jw-modal and above everything else  */
+        z-index: 900;
+    }
+}
+
+body.jw-modal-open {
+    /* body overflow is hidden to hide main scrollbar when modal window is open */
+    overflow: hidden;
+}

src/app/modal/modal.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ModalComponent } from './modal.component';
+
+describe('ModalComponent', () => {
+  let component: ModalComponent;
+  let fixture: ComponentFixture<ModalComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ModalComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modal/modal.component.ts

+import { Component, ElementRef, Input, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
+
+import { ModalService } from '../services';
+
+@Component({
+    selector: 'jw-modal',
+    template: 
+        `<div class="jw-modal">
+            <div class="jw-modal-body">
+                <ng-content></ng-content>
+            </div>
+        </div>
+        <div class="jw-modal-background"></div>`,
+    styleUrls:[
+      "./modal.component.less"
+    ]
+})
+export class ModalComponent implements OnInit, OnDestroy {
+    @Input() id: string;
+    private element: any;
+
+    constructor(private modalService: ModalService, private el: ElementRef) {
+        this.element = el.nativeElement;
+    }
+
+    ngOnInit(): void {
+        let modal = this;
+
+        // ensure id attribute exists
+        if (!this.id) {
+            console.error('modal must have an id');
+            return;
+        }
+
+        // move element to bottom of page (just before </body>) so it can be displayed above everything else
+        document.body.appendChild(this.element);
+
+        // close modal on background click
+        this.element.addEventListener('click', function (e: any) {
+            if (e.target.className === 'jw-modal') {
+                modal.close();
+            }
+        });
+
+        // add self (this modal instance) to the modal service so it's accessible from controllers
+        this.modalService.add(this);
+    }
+
+    // remove self from modal service when directive is destroyed
+    ngOnDestroy(): void {
+        this.modalService.remove(this.id);
+        this.element.remove();
+    }
+
+    // open modal
+    open(): void {
+        this.element.style.display = 'block';
+        document.body.classList.add('jw-modal-open');
+    }
+
+    // close modal
+    close(): void {
+        this.element.style.display = 'none';
+        document.body.classList.remove('jw-modal-open');
+    }
+}
\ No newline at end of file

src/app/services/index.ts

+export * from './modal.service';

src/app/services/modal.service.ts

+import { Injectable } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class ModalService {
+    private modals: any[] = [];
+
+    add(modal: any) {
+        // add modal to array of active modals
+        this.modals.push(modal);
+    }
+
+    remove(id: string) {
+        // remove modal from array of active modals
+        this.modals = this.modals.filter(x => x.id !== id);
+    }
+
+    open(id: string) {
+        // open modal specified by id
+        let modal: any = this.modals.filter(x => x.id === id)[0];
+        modal.open();
+    }
+
+    close(id: string) {
+        // close modal specified by id
+        let modal: any = this.modals.filter(x => x.id === id)[0];
+        modal.close();
+    }
+}
\ No newline at end of file

src/app/video/video.component.html

+<p>
+  video works!
+</p>

src/app/video/video.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { VideoComponent } from './video.component';
+
+describe('VideoComponent', () => {
+  let component: VideoComponent;
+  let fixture: ComponentFixture<VideoComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ VideoComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(VideoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/video/video.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-video',
+  templateUrl: './video.component.html',
+  styleUrls: ['./video.component.less']
+})
+export class VideoComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/assets/DrawingManager.js

+/**
+ * @fileoverview 百度地图的鼠标绘制工具，对外开放。
+ * 允许用户在地图上点击完成鼠标绘制的功能。
+ * 使用者可以自定义所绘制结果的相关样式，例如线宽、颜色、测线段距离、面积等等。
+ * 主入口类是<a href="symbols/BMapLib.DrawingManager.html">DrawingManager</a>，
+ * 基于Baidu Map API 1.4。
+ *
+ * @author Baidu Map Api Group 
+ * @version 1.4
+ */
+
+/** 
+ * @namespace BMap的所有library类均放在BMapLib命名空间下
+ */
+var BMapLib = window.BMapLib = BMapLib || {};
+
+/**
+ * 定义常量, 绘制的模式
+ * @final {Number} DrawingTypeAZ
+ */
+var BMAP_DRAWING_MARKER    = "marker",     // 鼠标画点模式
+    BMAP_DRAWING_POLYLINE  = "polyline",   // 鼠标画线模式
+    BMAP_DRAWING_CIRCLE    = "circle",     // 鼠标画圆模式
+    BMAP_DRAWING_RECTANGLE = "rectangle",  // 鼠标画矩形模式
+    BMAP_DRAWING_POLYGON   = "polygon";    // 鼠标画多边形模式
+
+(function() {
+
+    /**
+     * 声明baidu包
+     */
+    var baidu = baidu || {guid : "$BAIDU$"};
+    (function() {
+        // 一些页面级别唯一的属性，需要挂载在window[baidu.guid]上
+        window[baidu.guid] = {};
+
+        /**
+         * 将源对象的所有属性拷贝到目标对象中
+         * @name baidu.extend
+         * @function
+         * @grammar baidu.extend(target, source)
+         * @param {Object} target 目标对象
+         * @param {Object} source 源对象
+         * @returns {Object} 目标对象
+         */
+        baidu.extend = function (target, source) {
+            for (var p in source) {
+                if (source.hasOwnProperty(p)) {
+                    target[p] = source[p];
+                }
+            }    
+            return target;
+        };
+
+        /**
+         * @ignore
+         * @namespace
+         * @baidu.lang 对语言层面的封装，包括类型判断、模块扩展、继承基类以及对象自定义事件的支持。
+         * @property guid 对象的唯一标识
+         */
+        baidu.lang = baidu.lang || {};
+
+        /**
+         * 返回一个当前页面的唯一标识字符串。
+         * @function
+         * @grammar baidu.lang.guid()
+         * @returns {String} 当前页面的唯一标识字符串
+         */
+        baidu.lang.guid = function() {
+            return "TANGRAM__" + (window[baidu.guid]._counter ++).toString(36);
+        };
+
+        window[baidu.guid]._counter = window[baidu.guid]._counter || 1;
+
+        /**
+         * 所有类的实例的容器
+         * key为每个实例的guid
+         */
+        window[baidu.guid]._instances = window[baidu.guid]._instances || {};
+
+        /**
+         * Tangram继承机制提供的一个基类，用户可以通过继承baidu.lang.Class来获取它的属性及方法。
+         * @function
+         * @name baidu.lang.Class
+         * @grammar baidu.lang.Class(guid)
+         * @param {string} guid 对象的唯一标识
+         * @meta standard
+         * @remark baidu.lang.Class和它的子类的实例均包含一个全局唯一的标识guid。
+         * guid是在构造函数中生成的，因此，继承自baidu.lang.Class的类应该直接或者间接调用它的构造函数。<br>
+         * baidu.lang.Class的构造函数中产生guid的方式可以保证guid的唯一性，及每个实例都有一个全局唯一的guid。
+         */
+        baidu.lang.Class = function(guid) {
+            this.guid = guid || baidu.lang.guid();
+            window[baidu.guid]._instances[this.guid] = this;
+        };
+
+        window[baidu.guid]._instances = window[baidu.guid]._instances || {};
+
+        /**
+         * 判断目标参数是否string类型或String对象
+         * @name baidu.lang.isString
+         * @function
+         * @grammar baidu.lang.isString(source)
+         * @param {Any} source 目标参数
+         * @shortcut isString
+         * @meta standard
+         *             
+         * @returns {boolean} 类型判断结果
+         */
+        baidu.lang.isString = function (source) {
+            return '[object String]' == Object.prototype.toString.call(source);
+        };
+
+        /**
+         * 判断目标参数是否为function或Function实例
+         * @name baidu.lang.isFunction
+         * @function
+         * @grammar baidu.lang.isFunction(source)
+         * @param {Any} source 目标参数
+         * @returns {boolean} 类型判断结果
+         */
+        baidu.lang.isFunction = function (source) {
+            return '[object Function]' == Object.prototype.toString.call(source);
+        };
+
+        /**
+         * 重载了默认的toString方法，使得返回信息更加准确一些。
+         * @return {string} 对象的String表示形式
+         */
+        baidu.lang.Class.prototype.toString = function(){
+            return "[object " + (this._className || "Object" ) + "]";
+        };
+
+        /**
+         * 释放对象所持有的资源，主要是自定义事件。
+         * @name dispose
+         * @grammar obj.dispose()
+         */
+        baidu.lang.Class.prototype.dispose = function(){
+            delete window[baidu.guid]._instances[this.guid];
+            for(var property in this){
+                if (!baidu.lang.isFunction(this[property])) {
+                    delete this[property];
+                }
+            }
+            this.disposed = true;
+        };
+
+        /**
+         * 自定义的事件对象。
+         * @function
+         * @name baidu.lang.Event
+         * @grammar baidu.lang.Event(type[, target])
+         * @param {string} type  事件类型名称。为了方便区分事件和一个普通的方法，事件类型名称必须以"on"(小写)开头。
+         * @param {Object} [target]触发事件的对象
+         * @meta standard
+         * @remark 引入该模块，会自动为Class引入3个事件扩展方法：addEventListener、removeEventListener和dispatchEvent。
+         * @see baidu.lang.Class
+         */
+        baidu.lang.Event = function (type, target) {
+            this.type = type;
+            this.returnValue = true;
+            this.target = target || null;
+            this.currentTarget = null;
+        };
+
+        /**
+         * 注册对象的事件监听器。引入baidu.lang.Event后，Class的子类实例才会获得该方法。
+         * @grammar obj.addEventListener(type, handler[, key])
+         * @param   {string}   type         自定义事件的名称
+         * @param   {Function} handler      自定义事件被触发时应该调用的回调函数
+         * @param   {string}   [key]        为事件监听函数指定的名称，可在移除时使用。如果不提供，方法会默认为它生成一个全局唯一的key。
+         * @remark  事件类型区分大小写。如果自定义事件名称不是以小写"on"开头，该方法会给它加上"on"再进行判断，即"click"和"onclick"会被认为是同一种事件。 
+         */
+        baidu.lang.Class.prototype.addEventListener = function (type, handler, key) {
+            if (!baidu.lang.isFunction(handler)) {
+                return;
+            }
+            !this.__listeners && (this.__listeners = {});
+            var t = this.__listeners, id;
+            if (typeof key == "string" && key) {
+                if (/[^\w\-]/.test(key)) {
+                    throw("nonstandard key:" + key);
+                } else {
+                    handler.hashCode = key; 
+                    id = key;
+                }
+            }
+            type.indexOf("on") != 0 && (type = "on" + type);
+            typeof t[type] != "object" && (t[type] = {});
+            id = id || baidu.lang.guid();
+            handler.hashCode = id;
+            t[type][id] = handler;
+        };
+         
+        /**
+         * 移除对象的事件监听器。引入baidu.lang.Event后，Class的子类实例才会获得该方法。
+         * @grammar obj.removeEventListener(type, handler)
+         * @param {string}   type     事件类型
+         * @param {Function|string} handler  要移除的事件监听函数或者监听函数的key
+         * @remark  如果第二个参数handler没有被绑定到对应的自定义事件中，什么也不做。
+         */
+        baidu.lang.Class.prototype.removeEventListener = function (type, handler) {
+            if (baidu.lang.isFunction(handler)) {
+                handler = handler.hashCode;
+            } else if (!baidu.lang.isString(handler)) {
+                return;
+            }
+            !this.__listeners && (this.__listeners = {});
+            type.indexOf("on") != 0 && (type = "on" + type);
+            var t = this.__listeners;
+            if (!t[type]) {
+                return;
+            }
+            t[type][handler] && delete t[type][handler];
+        };
+
+        /**
+         * 派发自定义事件，使得绑定到自定义事件上面的函数都会被执行。引入baidu.lang.Event后，Class的子类实例才会获得该方法。
+         * @grammar obj.dispatchEvent(event, options)
+         * @param {baidu.lang.Event|String} event   Event对象，或事件名称(1.1.1起支持)
+         * @param {Object} options 扩展参数,所含属性键值会扩展到Event对象上(1.2起支持)
+         * @remark 处理会调用通过addEventListenr绑定的自定义事件回调函数之外，还会调用直接绑定到对象上面的自定义事件。
+         * 例如：<br>
+         * myobj.onMyEvent = function(){}<br>
+         * myobj.addEventListener("onMyEvent", function(){});
+         */
+        baidu.lang.Class.prototype.dispatchEvent = function (event, options) {
+            if (baidu.lang.isString(event)) {
+                event = new baidu.lang.Event(event);
+            }
+            !this.__listeners && (this.__listeners = {});
+            options = options || {};
+            for (var i in options) {
+                event[i] = options[i];
+            }
+            var i, t = this.__listeners, p = event.type;
+            event.target = event.target || this;
+            event.currentTarget = this;
+            p.indexOf("on") != 0 && (p = "on" + p);
+            baidu.lang.isFunction(this[p]) && this[p].apply(this, arguments);
+            if (typeof t[p] == "object") {
+                for (i in t[p]) {
+                    t[p][i].apply(this, arguments);
+                }
+            }
+            return event.returnValue;
+        };
+
+        /**
+         * 为类型构造器建立继承关系
+         * @name baidu.lang.inherits
+         * @function
+         * @grammar baidu.lang.inherits(subClass, superClass[, className])
+         * @param {Function} subClass 子类构造器
+         * @param {Function} superClass 父类构造器
+         * @param {string} className 类名标识
+         * @remark 使subClass继承superClass的prototype，
+         * 因此subClass的实例能够使用superClass的prototype中定义的所有属性和方法。<br>
+         * 这个函数实际上是建立了subClass和superClass的原型链集成，并对subClass进行了constructor修正。<br>
+         * <strong>注意：如果要继承构造函数，需要在subClass里面call一下，具体见下面的demo例子</strong>
+         * @shortcut inherits
+         * @meta standard
+         * @see baidu.lang.Class
+         */
+        baidu.lang.inherits = function (subClass, superClass, className) {
+            var key, proto, 
+                selfProps = subClass.prototype, 
+                clazz = new Function();        
+            clazz.prototype = superClass.prototype;
+            proto = subClass.prototype = new clazz();
+            for (key in selfProps) {
+                proto[key] = selfProps[key];
+            }
+            subClass.prototype.constructor = subClass;
+            subClass.superClass = superClass.prototype;
+
+            if ("string" == typeof className) {
+                proto._className = className;
+            }
+        };
+
+        /**
+         * @ignore
+         * @namespace baidu.dom 操作dom的方法。
+         */
+        baidu.dom = baidu.dom || {};
+
+        /**
+         * 从文档中获取指定的DOM元素
+         * 
+         * @param {string|HTMLElement} id 元素的id或DOM元素
+         * @meta standard
+         * @return {HTMLElement} DOM元素，如果不存在，返回null，如果参数不合法，直接返回参数
+         */
+        baidu._g = baidu.dom._g = function (id) {
+            if (baidu.lang.isString(id)) {
+                return document.getElementById(id);
+            }
+            return id;
+        };
+
+        /**
+         * 从文档中获取指定的DOM元素
+         * @name baidu.dom.g
+         * @function
+         * @grammar baidu.dom.g(id)
+         * @param {string|HTMLElement} id 元素的id或DOM元素
+         * @meta standard
+         *             
+         * @returns {HTMLElement|null} 获取的元素，查找不到时返回null,如果参数不合法，直接返回参数
+         */
+        baidu.g = baidu.dom.g = function (id) {
+            if ('string' == typeof id || id instanceof String) {
+                return document.getElementById(id);
+            } else if (id && id.nodeName && (id.nodeType == 1 || id.nodeType == 9)) {
+                return id;
+            }
+            return null;
+        };
+
+        /**
+         * 在目标元素的指定位置插入HTML代码
+         * @name baidu.dom.insertHTML
+         * @function
+         * @grammar baidu.dom.insertHTML(element, position, html)
+         * @param {HTMLElement|string} element 目标元素或目标元素的id
+         * @param {string} position 插入html的位置信息，取值为beforeBegin,afterBegin,beforeEnd,afterEnd
+         * @param {string} html 要插入的html
+         * @remark
+         * 
+         * 对于position参数，大小写不敏感<br>
+         * 参数的意思：beforeBegin&lt;span&gt;afterBegin   this is span! beforeEnd&lt;/span&gt; afterEnd <br />
+         * 此外，如果使用本函数插入带有script标签的HTML字符串，script标签对应的脚本将不会被执行。
+         * 
+         * @shortcut insertHTML
+         * @meta standard
+         *             
+         * @returns {HTMLElement} 目标元素
+         */
+        baidu.insertHTML = baidu.dom.insertHTML = function (element, position, html) {
+            element = baidu.dom.g(element);
+            var range,begin;
+
+            if (element.insertAdjacentHTML) {
+                element.insertAdjacentHTML(position, html);
+            } else {
+                // 这里不做"undefined" != typeof(HTMLElement) && !window.opera判断，其它浏览器将出错？！
+                // 但是其实做了判断，其它浏览器下等于这个函数就不能执行了
+                range = element.ownerDocument.createRange();
+                // FF下range的位置设置错误可能导致创建出来的fragment在插入dom树之后html结构乱掉
+                // 改用range.insertNode来插入html, by wenyuxiang @ 2010-12-14.
+                position = position.toUpperCase();
+                if (position == 'AFTERBEGIN' || position == 'BEFOREEND') {
+                    range.selectNodeContents(element);
+                    range.collapse(position == 'AFTERBEGIN');
+                } else {
+                    begin = position == 'BEFOREBEGIN';
+                    range[begin ? 'setStartBefore' : 'setEndAfter'](element);
+                    range.collapse(begin);
+                }
+                range.insertNode(range.createContextualFragment(html));
+            }
+            return element;
+        };
+
+        /**
+         * 为目标元素添加className
+         * @name baidu.dom.addClass
+         * @function
+         * @grammar baidu.dom.addClass(element, className)
+         * @param {HTMLElement|string} element 目标元素或目标元素的id
+         * @param {string} className 要添加的className，允许同时添加多个class，中间使用空白符分隔
+         * @remark
+         * 使用者应保证提供的className合法性，不应包含不合法字符，className合法字符参考：http://www.w3.org/TR/CSS2/syndata.html。
+         * @shortcut addClass
+         * @meta standard
+         *              
+         * @returns {HTMLElement} 目标元素
+         */
+        baidu.ac = baidu.dom.addClass = function (element, className) {
+            element = baidu.dom.g(element);
+            var classArray = className.split(/\s+/),
+                result = element.className,
+                classMatch = " " + result + " ",
+                i = 0,
+                l = classArray.length;
+
+            for (; i < l; i++){
+                 if ( classMatch.indexOf( " " + classArray[i] + " " ) < 0 ) {
+                     result += (result ? ' ' : '') + classArray[i];
+                 }
+            }
+
+            element.className = result;
+            return element;
+        };
+
+        /**
+         * @ignore
+         * @namespace baidu.event 屏蔽浏览器差异性的事件封装。
+         * @property target     事件的触发元素
+         * @property pageX      鼠标事件的鼠标x坐标
+         * @property pageY      鼠标事件的鼠标y坐标
+         * @property keyCode    键盘事件的键值
+         */
+        baidu.event = baidu.event || {};
+
+        /**
+         * 事件监听器的存储表
+         * @private
+         * @meta standard
+         */
+        baidu.event._listeners = baidu.event._listeners || [];
+
+        /**
+         * 为目标元素添加事件监听器
+         * @name baidu.event.on
+         * @function
+         * @grammar baidu.event.on(element, type, listener)
+         * @param {HTMLElement|string|window} element 目标元素或目标元素id
+         * @param {string} type 事件类型
+         * @param {Function} listener 需要添加的监听器
+         * @remark
+         *  1. 不支持跨浏览器的鼠标滚轮事件监听器添加<br>
+         *  2. 改方法不为监听器灌入事件对象，以防止跨iframe事件挂载的事件对象获取失败            
+         * @shortcut on
+         * @meta standard
+         * @see baidu.event.un
+         *             
+         * @returns {HTMLElement|window} 目标元素
+         */
+        baidu.on = baidu.event.on = function (element, type, listener) {
+            type = type.replace(/^on/i, '');
+            element = baidu._g(element);
+            var realListener = function (ev) {
+                // 1. 这里不支持EventArgument,  原因是跨frame的事件挂载
+                // 2. element是为了修正this
+                listener.call(element, ev);
+            },
+            lis = baidu.event._listeners,
+            filter = baidu.event._eventFilter,
+            afterFilter,
+            realType = type;
+            type = type.toLowerCase();
+            // filter过滤
+            if(filter && filter[type]){
+                afterFilter = filter[type](element, type, realListener);
+                realType = afterFilter.type;
+                realListener = afterFilter.listener;
+            }
+            // 事件监听器挂载
+            if (element.addEventListener) {
+                element.addEventListener(realType, realListener, false);
+            } else if (element.attachEvent) {
+                element.attachEvent('on' + realType, realListener);
+            }
+          
+            // 将监听器存储到数组中
+            lis[lis.length] = [element, type, listener, realListener, realType];
+            return element;
+        };
+
+        /**
+         * 为目标元素移除事件监听器
+         * @name baidu.event.un
+         * @function
+         * @grammar baidu.event.un(element, type, listener)
+         * @param {HTMLElement|string|window} element 目标元素或目标元素id
+         * @param {string} type 事件类型
+         * @param {Function} listener 需要移除的监听器
+         * @shortcut un
+         * @meta standard
+         *             
+         * @returns {HTMLElement|window} 目标元素
+         */
+        baidu.un = baidu.event.un = function (element, type, listener) {
+            element = baidu._g(element);
+            type = type.replace(/^on/i, '').toLowerCase();
+            
+            var lis = baidu.event._listeners, 
+                len = lis.length,
+                isRemoveAll = !listener,
+                item,
+                realType, realListener;
+            
+            //如果将listener的结构改成json
+            //可以节省掉这个循环，优化性能
+            //但是由于un的使用频率并不高，同时在listener不多的时候
+            //遍历数组的性能消耗不会对代码产生影响
+            //暂不考虑此优化
+            while (len--) {
+                item = lis[len];
+                
+                // listener存在时，移除element的所有以listener监听的type类型事件
+                // listener不存在时，移除element的所有type类型事件
+                if (item[1] === type
+                    && item[0] === element
+                    && (isRemoveAll || item[2] === listener)) {
+                    realType = item[4];
+                    realListener = item[3];
+                    if (element.removeEventListener) {
+                        element.removeEventListener(realType, realListener, false);
+                    } else if (element.detachEvent) {
+                        element.detachEvent('on' + realType, realListener);
+                    }
+                    lis.splice(len, 1);
+                }
+            }            
+            return element;
+        };
+
+        /**
+         * 获取event事件,解决不同浏览器兼容问题
+         * @param {Event}
+         * @return {Event}
+         */
+        baidu.getEvent = baidu.event.getEvent = function (event) {
+            return window.event || event;
+        }
+
+        /**
+         * 获取event.target,解决不同浏览器兼容问题
+         * @param {Event}
+         * @return {Target}
+         */
+        baidu.getTarget = baidu.event.getTarget = function (event) {
+            var event = baidu.getEvent(event);
+            return event.target || event.srcElement;
+        }
+
+        /**
+         * 阻止事件的默认行为
+         * @name baidu.event.preventDefault
+         * @function
+         * @grammar baidu.event.preventDefault(event)
+         * @param {Event} event 事件对象
+         * @meta standard
+         */
+        baidu.preventDefault = baidu.event.preventDefault = function (event) {
+           var event = baidu.getEvent(event);
+           if (event.preventDefault) {
+               event.preventDefault();
+           } else {
+               event.returnValue = false;
+           }
+        };
+
+        /**
+         * 停止事件冒泡传播
+         * @param {Event}
+         */
+        baidu.stopBubble = baidu.event.stopBubble = function (event) {
+            event = baidu.getEvent(event);
+            event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;
+        }
+
+        baidu.browser = baidu.browser || {};
+
+            if (/msie (\d+\.\d)/i.test(navigator.userAgent)) {
+                //IE 8下，以documentMode为准
+                //在百度模板中，可能会有$，防止冲突，将$1 写成 \x241
+            /**
+             * 判断是否为ie浏览器
+             * @property ie ie版本号
+             * @grammar baidu.browser.ie
+             * @meta standard
+             * @shortcut ie
+             * @see baidu.browser.firefox,baidu.browser.safari,baidu.browser.opera,baidu.browser.chrome,baidu.browser.maxthon 
+             */
+               baidu.browser.ie = baidu.ie = document.documentMode || + RegExp['\x241'];
+}
+
+    })();
+
+    /** 
+     * @exports DrawingManager as BMapLib.DrawingManager 
+     */
+    var DrawingManager =
+        /**
+         * DrawingManager类的构造函数
+         * @class 鼠标绘制管理类，实现鼠标绘制管理的<b>入口</b>。
+         * 实例化该类后，即可调用该类提供的open
+         * 方法开启绘制模式状态。
+         * 也可加入工具栏进行选择操作。
+         * 
+         * @constructor
+         * @param {Map} map Baidu map的实例对象
+         * @param {Json Object} opts 可选的输入参数，非必填项。可输入选项包括：<br />
+         * {"<b>isOpen</b>" : {Boolean} 是否开启绘制模式
+         * <br />"<b>enableDrawingTool</b>" : {Boolean} 是否添加绘制工具栏控件，默认不添加
+         * <br />"<b>drawingToolOptions</b>" : {Json Object} 可选的输入参数，非必填项。可输入选项包括
+         * <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"<b>anchor</b>" : {ControlAnchor} 停靠位置、默认左上角
+         * <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"<b>offset</b>" : {Size} 偏移值。
+         * <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"<b>scale</b>" : {Number} 工具栏的缩放比例,默认为1
+         * <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"<b>drawingModes</b>" : {DrawingType<Array>} 工具栏上可以选择出现的绘制模式,将需要显示的DrawingType以数组型形式传入，如[BMAP_DRAWING_MARKER, BMAP_DRAWING_CIRCLE] 将只显示画点和画圆的选项
+         * <br />"<b>enableCalculate</b>" : {Boolean} 绘制是否进行测距(画线时候)、测面(画圆、多边形、矩形)
+         * <br />"<b>markerOptions</b>" : {CircleOptions} 所画的点的可选参数，参考api中的<a href="http://developer.baidu.com/map/reference/index.php?title=Class:%E6%80%BB%E7%B1%BB/%E8%A6%86%E7%9B%96%E7%89%A9%E7%B1%BB">对应类</a>
+         * <br />"<b>circleOptions</b>" : {CircleOptions} 所画的圆的可选参数，参考api中的<a href="http://developer.baidu.com/map/reference/index.php?title=Class:%E6%80%BB%E7%B1%BB/%E8%A6%86%E7%9B%96%E7%89%A9%E7%B1%BB">对应类</a>
+         * <br />"<b>polylineOptions</b>" : {CircleOptions} 所画的线的可选参数，参考api中的<a href="http://developer.baidu.com/map/reference/index.php?title=Class:%E6%80%BB%E7%B1%BB/%E8%A6%86%E7%9B%96%E7%89%A9%E7%B1%BB">对应类</a>
+         * <br />"<b>polygonOptions</b>" : {PolygonOptions} 所画的多边形的可选参数，参考api中的<a href="http://developer.baidu.com/map/reference/index.php?title=Class:%E6%80%BB%E7%B1%BB/%E8%A6%86%E7%9B%96%E7%89%A9%E7%B1%BB">对应类</a>
+         * <br />"<b>rectangleOptions</b>" : {PolygonOptions} 所画的矩形的可选参数，参考api中的<a href="http://developer.baidu.com/map/reference/index.php?title=Class:%E6%80%BB%E7%B1%BB/%E8%A6%86%E7%9B%96%E7%89%A9%E7%B1%BB">对应类</a>
+         *
+         * @example <b>参考示例：</b><br />
+         * var map = new BMap.Map("container");<br />map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);<br />
+         * var myDrawingManagerObject = new BMapLib.DrawingManager(map, {isOpen: true, 
+         *     drawingType: BMAP_DRAWING_MARKER, enableDrawingTool: true,
+         *     enableCalculate: false,
+         *     drawingToolOptions: {
+         *         anchor: BMAP_ANCHOR_TOP_LEFT,
+         *         offset: new BMap.Size(5, 5),
+         *         drawingTypes : [
+         *             BMAP_DRAWING_MARKER,
+         *             BMAP_DRAWING_CIRCLE,
+         *             BMAP_DRAWING_POLYLINE,
+         *             BMAP_DRAWING_POLYGON,
+         *             BMAP_DRAWING_RECTANGLE 
+         *          ]
+         *     },
+         *     polylineOptions: {
+         *         strokeColor: "#333"
+         *     });
+         */
+        BMapLib.DrawingManager = function(map, opts){
+            if (!map) {
+                return;
+            }
+            instances.push(this);
+            
+            opts = opts || {};
+
+            this._initialize(map, opts);
+        }
+
+    // 通过baidu.lang下的inherits方法，让DrawingManager继承baidu.lang.Class
+    baidu.lang.inherits(DrawingManager, baidu.lang.Class, "DrawingManager");
+
+    /**
+     * 开启地图的绘制模式
+     *
+     * @example <b>参考示例：</b><br />
+     * myDrawingManagerObject.open();
+     */
+    DrawingManager.prototype.open = function() {
+        // 判断绘制状态是否已经开启
+        if (this._isOpen == true){
+            return true;
+        }
+        closeInstanceExcept(this);
+
+        this._open();
+    }
+
+    /**
+     * 关闭地图的绘制状态
+     *
+     * @example <b>参考示例：</b><br />
+     * myDrawingManagerObject.close();
+     */
+    DrawingManager.prototype.close = function() {
+
+        // 判断绘制状态是否已经开启
+        if (this._isOpen == false){
+            return true;
+        }
+        var me = this;
+        this._close();
+        setTimeout(function(){
+            me._map.enableDoubleClickZoom();
+        },2000);
+        
+    }
+
+    /**
+     * 设置当前的绘制模式，参数DrawingType，为5个可选常量:
+     * <br/>BMAP_DRAWING_MARKER    画点
+     * <br/>BMAP_DRAWING_CIRCLE    画圆
+     * <br/>BMAP_DRAWING_POLYLINE  画线
+     * <br/>BMAP_DRAWING_POLYGON   画多边形
+     * <br/>BMAP_DRAWING_RECTANGLE 画矩形
+     * @param {DrawingType} DrawingType
+     * @return {Boolean} 
+     *
+     * @example <b>参考示例：</b><br />
+     * myDrawingManagerObject.setDrawingMode(BMAP_DRAWING_POLYLINE);
+     */
+    DrawingManager.prototype.setDrawingMode = function(drawingType) {
+        //与当前模式不一样时候才进行重新绑定事件
+        if (this._drawingType != drawingType) {
+            closeInstanceExcept(this);
+            this._setDrawingMode(drawingType);
+        }
+    }
+
+    /**
+     * 获取当前的绘制模式
+     * @return {DrawingType} 绘制的模式
+     *
+     * @example <b>参考示例：</b><br />
+     * alert(myDrawingManagerObject.getDrawingMode());
+     */
+    DrawingManager.prototype.getDrawingMode = function() {
+        return this._drawingType;
+    }
+
+    /**
+     * 打开距离或面积计算
+     *
+     * @example <b>参考示例：</b><br />
+     * myDrawingManagerObject.enableCalculate();
+     */
+    DrawingManager.prototype.enableCalculate = function() {
+        this._enableCalculate = true;
+        this._addGeoUtilsLibrary();
+    }
+
+    /**
+     * 关闭距离或面积计算
+     *
+     * @example <b>参考示例：</b><br />
+     * myDrawingManagerObject.disableCalculate();
+     */
+    DrawingManager.prototype.disableCalculate = function() {
+        this._enableCalculate = false;
+    }
+
+    /**
+     * 鼠标绘制完成后，派发总事件的接口
+     * @name DrawingManager#overlaycomplete
+     * @event
+     * @param {Event Object} e 回调函数会返回event参数，包括以下返回值：
+     * <br />{"<b>drawingMode</b> : {DrawingType} 当前的绘制模式
+     * <br />"<b>overlay</b>：{Marker||Polyline||Polygon||Circle} 对应的绘制模式返回对应的覆盖物
+     * <br />"<b>calculate</b>：{Number} 需要开启计算模式才会返回这个值，当绘制线的时候返回距离、绘制多边形、圆、矩形时候返回面积，单位为米，
+     * <br />"<b>label</b>：{Label} 计算面积时候出现在Map上的Label对象
+     *
+     * @example <b>参考示例：</b>
+     * myDrawingManagerObject.addEventListener("overlaycomplete", function(e) {
+     *     alert(e.drawingMode);
+     *     alert(e.overlay);
+     *     alert(e.calculate);
+     *     alert(e.label);
+     * });
+     */
+
+    /**
+     * 绘制点完成后，派发的事件接口
+     * @name DrawingManager#markercomplete
+     * @event
+     * @param {Marker} overlay 回调函数会返回相应的覆盖物，
+     * <br />{"<b>overlay</b> : {Marker} 
+     *
+     * @example <b>参考示例：</b>
+     * myDrawingManagerObject.addEventListener("circlecomplete", function(e, overlay) {
+     *     alert(overlay);
+     * });
+     */
+
+    /**
+     * 绘制圆完成后，派发的事件接口
+     * @name DrawingManager#circlecomplete
+     * @event
+     * @param {Circle} overlay 回调函数会返回相应的覆盖物，
+     * <br />{"<b>overlay</b> : {Circle} 
+     */
+
+    /**
+     * 绘制线完成后，派发的事件接口
+     * @name DrawingManager#polylinecomplete
+     * @event
+     * @param {Polyline} overlay 回调函数会返回相应的覆盖物，
+     * <br />{"<b>overlay</b> : {Polyline} 
+     */
+
+    /**
+     * 绘制多边形完成后，派发的事件接口
+     * @name DrawingManager#polygoncomplete
+     * @event
+     * @param {Polygon} overlay 回调函数会返回相应的覆盖物，
+     * <br />{"<b>overlay</b> : {Polygon} 
+     */
+
+    /**
+     * 绘制矩形完成后，派发的事件接口
+     * @name DrawingManager#rectanglecomplete
+     * @event
+     * @param {Polygon} overlay 回调函数会返回相应的覆盖物，
+     * <br />{"<b>overlay</b> : {Polygon} 
+     */
+
+    /**
+     * 初始化状态
+     * @param {Map} 地图实例
+     * @param {Object} 参数
+     */
+    DrawingManager.prototype._initialize = function(map, opts) {
+
+        /**
+         * map对象
+         * @private
+         * @type {Map}
+         */
+        this._map = map;
+
+        /**
+         * 配置对象
+         * @private
+         * @type {Object}
+         */
+        this._opts = opts;
+
+        /**
+         * 当前的绘制模式, 默认是绘制点
+         * @private
+         * @type {DrawingType}
+         */
+        this._drawingType = opts.drawingMode || BMAP_DRAWING_MARKER;
+
+        /**
+         * 是否添加添加鼠标绘制工具栏面板
+         */
+        if (opts.enableDrawingTool) {
+            var drawingTool  = new DrawingTool(this, opts.drawingToolOptions);
+            this._drawingTool = drawingTool;
+            map.addControl(drawingTool);
+        }
+
+        //是否计算绘制出的面积 
+        if (opts.enableCalculate === true) {
+            this.enableCalculate();
+        } else {
+            this.disableCalculate();
+        }
+
+        /**
+         * 是否已经开启了绘制状态
+         * @private
+         * @type {Boolean}
+         */
+        this._isOpen = !!(opts.isOpen === true);
+        if (this._isOpen) {
+            this._open();
+        }
+
+        this.markerOptions    = opts.markerOptions    || {};
+        this.circleOptions    = opts.circleOptions    || {};
+        this.polylineOptions  = opts.polylineOptions  || {};
+        this.polygonOptions   = opts.polygonOptions   || {};
+        this.rectangleOptions = opts.rectangleOptions || {};
+        this.controlButton =  opts.controlButton == "right" ? "right" : "left";
+
+    },
+
+    /**
+     * 开启地图的绘制状态
+     * @return {Boolean}，开启绘制状态成功，返回true；否则返回false。
+     */
+    DrawingManager.prototype._open = function() {
+
+        this._isOpen = true;
+
+        //添加遮罩，所有鼠标操作都在这个遮罩上完成
+        if (!this._mask) {
+            this._mask = new Mask();
+        }
+        this._map.addOverlay(this._mask);
+        this._setDrawingMode(this._drawingType);
+
+    }
+
+    /**
+     * 设置当前的绘制模式
+     * @param {DrawingType}
+     */
+    DrawingManager.prototype._setDrawingMode = function(drawingType) {
+
+        this._drawingType = drawingType;
+
+        /**
+         * 开启编辑状态时候才重新进行事件绑定
+         */
+        if (this._isOpen) {
+
+            //清空之前的自定义事件
+            this._mask.__listeners = {};
+
+            switch (drawingType) {
+                case BMAP_DRAWING_MARKER:
+                    this._bindMarker();
+                    break;
+                case BMAP_DRAWING_CIRCLE:
+                    this._bindCircle();
+                    break;
+                case BMAP_DRAWING_POLYLINE:
+                case BMAP_DRAWING_POLYGON:
+                    this._bindPolylineOrPolygon();
+                    break;
+                case BMAP_DRAWING_RECTANGLE:
+                    this._bindRectangle();
+                    break;
+            }
+        }
+
+        /** 
+         * 如果添加了工具栏，则也需要改变工具栏的样式
+         */
+        if (this._drawingTool && this._isOpen) {
+            this._drawingTool.setStyleByDrawingMode(drawingType);
+        }
+    }
+
+    /**
+     * 关闭地图的绘制状态
+     * @return {Boolean}，关闭绘制状态成功，返回true；否则返回false。
+     */
+    DrawingManager.prototype._close = function() {
+
+        this._isOpen = false;
+
+
+        if (this._mask) {
+            this._map.removeOverlay(this._mask);
+        }
+
+        /** 
+         * 如果添加了工具栏，则关闭时候将工具栏样式设置为拖拽地图
+         */
+        if (this._drawingTool) {
+            this._drawingTool.setStyleByDrawingMode("hander");
+        }
+    }
+
+    /**
+     * 绑定鼠标画点的事件
+     */
+    DrawingManager.prototype._bindMarker = function() {
+
+        var me   = this,
+            map  = this._map,
+            mask = this._mask;
+
+        /**
+         * 鼠标点击的事件
+         */
+        var clickAction = function (e) {
+            // 往地图上添加marker
+            var marker = new BMap.Marker(e.point, me.markerOptions);
+            map.addOverlay(marker);
+            me._dispatchOverlayComplete(marker);
+        }
+
+        mask.addEventListener('click', clickAction);
+    }
+
+    /**
+     * 绑定鼠标画圆的事件
+     */
+    DrawingManager.prototype._bindCircle = function() {
+
+        var me           = this,
+            map          = this._map,
+            mask         = this._mask,
+            circle       = null,
+            centerPoint  = null; //圆的中心点
+
+        /**
+         * 开始绘制圆形
+         */
+        var startAction = function (e) {
+            if(me.controlButton == "right" && (e.button == 1 || e.button==0)){
+                return ;
+            }
+            centerPoint = e.point;
+            circle = new BMap.Circle(centerPoint, 0, me.circleOptions);
+            map.addOverlay(circle);
+            mask.enableEdgeMove();
+            mask.addEventListener('mousemove', moveAction);
+            baidu.on(document, 'mouseup', endAction);
+        }
+
+        /**
+         * 绘制圆形过程中，鼠标移动过程的事件
+         */
+        var moveAction = function(e) {
+            circle.setRadius(me._map.getDistance(centerPoint, e.point));
+        }
+
+        /**
+         * 绘制圆形结束
+         */
+        var endAction = function (e) {
+            var calculate = me._calculate(circle, e.point);
+            me._dispatchOverlayComplete(circle, calculate);
+            centerPoint = null;
+            mask.disableEdgeMove();
+            mask.removeEventListener('mousemove', moveAction);
+            baidu.un(document, 'mouseup', endAction);
+        }
+
+        /**
+         * 鼠标点击起始点
+         */
+        var mousedownAction = function (e) {
+            baidu.preventDefault(e);
+            baidu.stopBubble(e);
+            if(me.controlButton == "right" && e.button == 1){
+                return ;
+            }
+            if (centerPoint == null) {
+                startAction(e);
+            } 
+        }
+
+        mask.addEventListener('mousedown', mousedownAction);
+    }
+
+    /**
+     * 画线和画多边形相似性比较大，公用一个方法
+     */
+    DrawingManager.prototype._bindPolylineOrPolygon = function() {
+
+        var me           = this,
+            map          = this._map,
+            mask         = this._mask,
+            points       = [],   //用户绘制的点
+            drawPoint    = null; //实际需要画在地图上的点
+            overlay      = null,
+            isBinded     = false;
+
+        /**
+         * 鼠标点击的事件
+         */
+        var startAction = function (e) {
+            if(me.controlButton == "right" && (e.button == 1 || e.button==0)){
+                return ;
+            }
+            points.push(e.point);
+            drawPoint = points.concat(points[points.length - 1]);
+            if (points.length == 1) {
+                if (me._drawingType == BMAP_DRAWING_POLYLINE) {
+
+                    overlay = new BMap.Polyline(drawPoint, me.polylineOptions);
+                } else if (me._drawingType == BMAP_DRAWING_POLYGON) {
+                    overlay = new BMap.Polygon(drawPoint, me.polygonOptions);
+                }
+                map.addOverlay(overlay);
+            } else {
+                overlay.setPath(drawPoint);
+            }
+            if (!isBinded) {
+                isBinded = true;
+                mask.enableEdgeMove();
+                mask.addEventListener('mousemove', mousemoveAction);
+                mask.addEventListener('dblclick', dblclickAction);
+            }
+        }
+
+        /**
+         * 鼠标移动过程的事件
+         */
+        var mousemoveAction = function(e) {
+            overlay.setPositionAt(drawPoint.length - 1, e.point);
+            var distance = parseInt(BMapLib.GeoUtils.getPolylineDistance(overlay))
+            document.getElementById('polylineLength').innerHTML = '长度' + distance + '米';
+        }
+
+        /**
+         * 鼠标双击的事件
+         */
+        var dblclickAction = function (e) {
+            baidu.stopBubble(e);
+            isBinded = false;
+            mask.disableEdgeMove();
+            mask.removeEventListener('mousedown',startAction);
+            mask.removeEventListener('mousemove', mousemoveAction);
+            mask.removeEventListener('dblclick', dblclickAction);
+            //console.log(me.controlButton);
+            if(me.controlButton == "right"){
+                points.push(e.point);
+            }
+            else if(baidu.ie <= 8){
+            }else{
+                points.pop();
+            }
+            //console.log(points.length);
+            overlay.setPath(points);
+            var calculate = me._calculate(overlay, points.pop());
+            me._dispatchOverlayComplete(overlay, calculate);
+            points.length = 0;
+            drawPoint.length = 0;
+            me.close();
+
+        }
+        
+        mask.addEventListener('mousedown', startAction);
+
+        //双击时候不放大地图级别
+        mask.addEventListener('dblclick', function(e){
+            baidu.stopBubble(e);
+        });
+    }
+
+    /**
+     * 绑定鼠标画矩形的事件
+     */
+    DrawingManager.prototype._bindRectangle = function() {
+
+        var me           = this,
+            map          = this._map,
+            mask         = this._mask,
+            polygon      = null,
+            startPoint   = null;
+
+        /**
+         * 开始绘制矩形
+         */
+        var startAction = function (e) {
+            baidu.stopBubble(e);
+            baidu.preventDefault(e);
+            if(me.controlButton == "right" && (e.button == 1 || e.button==0)){
+                return ;
+            }
+            startPoint = e.point;
+            var endPoint = startPoint;
+            polygon = new BMap.Polygon(me._getRectanglePoint(startPoint, endPoint), me.rectangleOptions);
+            map.addOverlay(polygon);
+            mask.enableEdgeMove();
+            mask.addEventListener('mousemove', moveAction);
+            baidu.on(document, 'mouseup', endAction);
+        }
+
+        /**
+         * 绘制矩形过程中，鼠标移动过程的事件
+         */
+        var moveAction = function(e) {
+            polygon.setPath(me._getRectanglePoint(startPoint, e.point));
+        }
+
+        /**
+         * 绘制矩形结束
+         */
+        var endAction = function (e) {
+            var calculate = me._calculate(polygon, polygon.getPath()[2]);
+            me._dispatchOverlayComplete(polygon, calculate);
+            startPoint = null;
+            mask.disableEdgeMove();
+            mask.removeEventListener('mousemove', moveAction);
+            baidu.un(document, 'mouseup', endAction);
+        }
+
+        mask.addEventListener('mousedown', startAction);
+    }
+
+    /**
+     * 添加显示所绘制图形的面积或者长度
+     * @param {overlay} 覆盖物
+     * @param {point} 显示的位置
+     */
+    DrawingManager.prototype._calculate = function (overlay, point) {
+        var result = {
+            data  : 0,    //计算出来的长度或面积
+            label : null  //显示长度或面积的label对象
+        };
+        if (this._enableCalculate && BMapLib.GeoUtils) {
+            var type = overlay.toString();
+            //不同覆盖物调用不同的计算方法
+            switch (type) {
+                case "[object Polyline]":
+                    result.data = BMapLib.GeoUtils.getPolylineDistance(overlay);
+                    break;
+                case "[object Polygon]":
+                    result.data = BMapLib.GeoUtils.getPolygonArea(overlay);
+                    break;
+                case "[object Circle]":
+                    var radius = overlay.getRadius();
+                    result.data = Math.PI * radius * radius;
+                    break;
+            }
+            //一场情况处理
+            if (!result.data || result.data < 0) {
+                result.data = 0;
+            } else {
+                //保留2位小数位
+                result.data = result.data.toFixed(2);
+            }
+            result.label = this._addLabel(point, result.data);
+        }
+        return result;
+    }
+
+    /**
+     * 开启测距和测面功能需要依赖于GeoUtils库
+     * 所以这里判断用户是否已经加载,若未加载则用js动态加载
+     */
+    DrawingManager.prototype._addGeoUtilsLibrary = function () {
+        if (!BMapLib.GeoUtils) {
+            var script = document.createElement('script');
+            script.setAttribute("type", "text/javascript");
+            script.setAttribute("src", 'http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js');
+            document.body.appendChild(script);
+        }
+    }
+
+    /**
+     * 向地图中添加文本标注
+     * @param {Point}
+     * @param {String} 所以显示的内容
+     */
+    DrawingManager.prototype._addLabel = function (point, content) {
+        var label = new BMap.Label(content, {
+            position: point
+        });
+        this._map.addOverlay(label);
+        return label;
+    }
+
+    /**
+     * 根据起终点获取矩形的四个顶点
+     * @param {Point} 起点
+     * @param {Point} 终点
+     */
+    DrawingManager.prototype._getRectanglePoint = function (startPoint, endPoint) {
+        return [
+            new BMap.Point(startPoint.lng,startPoint.lat),
+            new BMap.Point(endPoint.lng,startPoint.lat),
+            new BMap.Point(endPoint.lng,endPoint.lat),
+            new BMap.Point(startPoint.lng,endPoint.lat)
+        ];
+    }
+
+    /**
+     * 派发事件
+     */
+    DrawingManager.prototype._dispatchOverlayComplete = function (overlay, calculate) {
+        var options = {
+            'overlay'     : overlay,
+            'drawingMode' : this._drawingType
+        };
+        if (calculate) {
+            options.calculate = calculate.data || null;
+            options.label = calculate.label || null;
+        }
+        this.dispatchEvent(this._drawingType + 'complete', overlay);
+        this.dispatchEvent('overlaycomplete', options);
+    }
+
+    /**
+     * 创建遮罩对象
+     */
+    function Mask(){
+        /**
+         * 鼠标到地图边缘的时候是否自动平移地图
+         */
+        this._enableEdgeMove = false;
+    }
+
+    Mask.prototype = new BMap.Overlay();
+
+    /**
+     * 这里不使用api中的自定义事件，是为了更灵活使用
+     */
+    Mask.prototype.dispatchEvent = baidu.lang.Class.prototype.dispatchEvent;
+    Mask.prototype.addEventListener = baidu.lang.Class.prototype.addEventListener;
+    Mask.prototype.removeEventListener = baidu.lang.Class.prototype.removeEventListener;
+
+    Mask.prototype.initialize = function(map){
+        var me = this;
+        this._map = map;
+        var div = this.container = document.createElement("div");
+        var size = this._map.getSize();
+        div.style.cssText = "position:absolute;background:url(about:blank);cursor:crosshair;width:" + size.width + "px;height:" + size.height + "px";
+        this._map.addEventListener('resize', function(e) {
+            me._adjustSize(e.size);
+        });
+        this._map.getPanes().floatPane.appendChild(div);
+        this._bind();
+        return div; 
+    };
+
+    Mask.prototype.draw = function() {
+        var map   = this._map,
+            point = map.pixelToPoint(new BMap.Pixel(0, 0)),
+            pixel = map.pointToOverlayPixel(point);
+        this.container.style.left = pixel.x + "px";
+        this.container.style.top  = pixel.y + "px"; 
+    };
+
+    /**
+     * 开启鼠标到地图边缘，自动平移地图
+     */
+    Mask.prototype.enableEdgeMove = function() {
+        this._enableEdgeMove = true;
+    }
+
+    /**
+     * 关闭鼠标到地图边缘，自动平移地图
+     */
+    Mask.prototype.disableEdgeMove = function() {
+        clearInterval(this._edgeMoveTimer);
+        this._enableEdgeMove = false;
+    }
+
+    /**
+     * 绑定事件,派发自定义事件
+     */
+    Mask.prototype._bind = function() {
+
+        var me = this,
+            map = this._map,
+            container = this.container,
+            lastMousedownXY = null,
+            lastClickXY = null;
+
+        /**
+         * 根据event对象获取鼠标的xy坐标对象
+         * @param {Event}
+         * @return {Object} {x:e.x, y:e.y}
+         */
+        var getXYbyEvent = function(e){
+            return {
+                x : e.clientX,
+                y : e.clientY
+            }
+        };
+
+        var domEvent = function(e) {
+            var type = e.type;
+                e = baidu.getEvent(e);
+                point = me.getDrawPoint(e); //当前鼠标所在点的地理坐标
+
+            var dispatchEvent = function(type) {
+                e.point = point;
+                me.dispatchEvent(e);
+            }
+
+            if (type == "mousedown") {
+                lastMousedownXY = getXYbyEvent(e);
+            }
+
+            var nowXY = getXYbyEvent(e);
+            //click经过一些特殊处理派发，其他同事件按正常的dom事件派发
+            if (type == "click") {
+                //鼠标点击过程不进行移动才派发click和dblclick
+                if (Math.abs(nowXY.x - lastMousedownXY.x) < 5 && Math.abs(nowXY.y - lastMousedownXY.y) < 5 ) {
+                    if (!lastClickXY || !(Math.abs(nowXY.x - lastClickXY.x) < 5 && Math.abs(nowXY.y - lastClickXY.y) < 5)) {
+                        dispatchEvent('click');
+                        lastClickXY = getXYbyEvent(e);
+                    } else {
+                        lastClickXY = null;
+                    }
+                }
+            } else {
+                dispatchEvent(type);
+            }
+        }
+
+        /**
+         * 将事件都遮罩层的事件都绑定到domEvent来处理
+         */
+        var events = ['click', 'mousedown', 'mousemove', 'mouseup', 'dblclick'],
+            index = events.length;
+        while (index--) {
+            baidu.on(container, events[index], domEvent);
+        }
+
+        //鼠标移动过程中，到地图边缘后自动平移地图
+        baidu.on(container, 'mousemove', function(e) {
+            if (me._enableEdgeMove) {
+                me.mousemoveAction(e);
+            }
+        });
+    };
+
+    //鼠标移动过程中，到地图边缘后自动平移地图
+    Mask.prototype.mousemoveAction = function(e) {
+        function getClientPosition(e) {
+            var clientX = e.clientX,
+                clientY = e.clientY;
+            if (e.changedTouches) {
+                clientX = e.changedTouches[0].clientX;
+                clientY = e.changedTouches[0].clientY;
+            }
+            return new BMap.Pixel(clientX, clientY);
+        }
+
+        var map       = this._map,
+            me        = this,
+            pixel     = map.pointToPixel(this.getDrawPoint(e)),
+            clientPos = getClientPosition(e),
+            offsetX   = clientPos.x - pixel.x,
+            offsetY   = clientPos.y - pixel.y;
+        pixel = new BMap.Pixel((clientPos.x - offsetX), (clientPos.y - offsetY));
+        this._draggingMovePixel = pixel;
+        var point = map.pixelToPoint(pixel),
+            eventObj = {
+                pixel: pixel,
+                point: point
+            };
+        // 拖拽到地图边缘移动地图
+        this._panByX = this._panByY = 0;
+        if (pixel.x <= 20 || pixel.x >= map.width - 20
+            || pixel.y <= 50 || pixel.y >= map.height - 10) {
+            if (pixel.x <= 20) {
+                this._panByX = 8;
+            } else if (pixel.x >= map.width - 20) {
+                this._panByX = -8;
+            }
+            if (pixel.y <= 50) {
+                this._panByY = 8;
+            } else if (pixel.y >= map.height - 10) {
+                this._panByY = -8;
+            }
+            if (!this._edgeMoveTimer) {
+                this._edgeMoveTimer = setInterval(function(){
+                    map.panBy(me._panByX, me._panByY, {"noAnimation": true});
+                }, 30);
+            }
+        } else {
+            if (this._edgeMoveTimer) {
+                clearInterval(this._edgeMoveTimer);
+                this._edgeMoveTimer = null;
+            }
+        }
+    }
+
+    /*
+     * 调整大小
+     * @param {Size}
+     */
+    Mask.prototype._adjustSize = function(size) {
+        this.container.style.width  = size.width + 'px';
+        this.container.style.height = size.height + 'px';
+    };
+
+    /**
+     * 获取当前绘制点的地理坐标
+     *
+     * @param {Event} e e对象
+     * @return Point对象的位置信息
+     */
+    Mask.prototype.getDrawPoint = function(e) {
+        
+        var map = this._map,
+        trigger = baidu.getTarget(e),
+        x = e.offsetX || e.layerX || 0,
+        y = e.offsetY || e.layerY || 0;
+        if (trigger.nodeType != 1) trigger = trigger.parentNode;
+        while (trigger && trigger != map.getContainer()) {
+            if (!(trigger.clientWidth == 0 &&
+                trigger.clientHeight == 0 &&
+                trigger.offsetParent && trigger.offsetParent.nodeName == 'TD')) {
+                x += trigger.offsetLeft || 0;
+                y += trigger.offsetTop || 0;
+            }
+            trigger = trigger.offsetParent;
+        }
+        var pixel = new BMap.Pixel(x, y);
+        var point = map.pixelToPoint(pixel);
+        return point;
+
+    }
+
+    /**
+     * 绘制工具面板，自定义控件
+     */
+    function DrawingTool(drawingManager, drawingToolOptions) {
+        this.drawingManager = drawingManager;
+
+        drawingToolOptions = this.drawingToolOptions = drawingToolOptions || {};
+        // 默认停靠位置和偏移量
+        this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
+        this.defaultOffset = new BMap.Size(10, 10);
+
+        //默认所有工具栏都显示
+        this.defaultDrawingModes = [
+            BMAP_DRAWING_MARKER,
+            BMAP_DRAWING_CIRCLE,
+            BMAP_DRAWING_POLYLINE,
+            BMAP_DRAWING_POLYGON,
+            BMAP_DRAWING_RECTANGLE
+        ];
+        //工具栏可显示的绘制模式
+        if (drawingToolOptions.drawingModes) {
+            this.drawingModes = drawingToolOptions.drawingModes;
+        } else {
+            this.drawingModes = this.defaultDrawingModes
+        }
+
+        //用户设置停靠位置和偏移量
+        if (drawingToolOptions.anchor) {
+            this.setAnchor(drawingToolOptions.anchor);
+        }
+        if (drawingToolOptions.offset) {
+            this.setOffset(drawingToolOptions.offset);
+        }
+    }
+
+    // 通过JavaScript的prototype属性继承于BMap.Control
+    DrawingTool.prototype = new BMap.Control();
+
+    // 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
+    // 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
+    DrawingTool.prototype.initialize = function(map){
+        // 创建一个DOM元素
+        var container = this.container = document.createElement("div");
+        container.className = "BMapLib_Drawing";
+        //用来设置外层边框阴影
+        var panel = this.panel = document.createElement("div");
+        panel.className = "BMapLib_Drawing_panel";
+        if (this.drawingToolOptions && this.drawingToolOptions.scale) {
+            this._setScale(this.drawingToolOptions.scale);
+        }
+        container.appendChild(panel);
+        // 添加内容
+        panel.innerHTML = this._generalHtml();
+        //绑定事件
+        this._bind(panel);
+        // 添加DOM元素到地图中
+        map.getContainer().appendChild(container);
+        // 将DOM元素返回
+        return container;
+    }
+
+    //生成工具栏的html元素
+    DrawingTool.prototype._generalHtml = function(map){
+
+        //鼠标经过工具栏上的提示信息
+        var tips = {};
+        tips["hander"]               = "拖动地图";
+        tips[BMAP_DRAWING_MARKER]    = "画点";
+        tips[BMAP_DRAWING_CIRCLE]    = "画圆";
+        tips[BMAP_DRAWING_POLYLINE]  = "画折线";
+        tips[BMAP_DRAWING_POLYGON]   = "画多边形";
+        tips[BMAP_DRAWING_RECTANGLE] = "画矩形";
+
+        var getItem = function(className, drawingType) {
+            return '<a class="' + className + '" drawingType="' + drawingType + '" href="javascript:void(0)" title="' + tips[drawingType] + '" onfocus="this.blur()"></a>';
+        }
+
+        var html = [];
+        html.push(getItem("BMapLib_box BMapLib_hander", "hander"));
+        for (var i = 0, len = this.drawingModes.length; i < len; i++) {
+            var classStr = 'BMapLib_box BMapLib_' + this.drawingModes[i];
+            if (i == len-1) {
+                classStr += ' BMapLib_last';
+            }
+            html.push(getItem(classStr, this.drawingModes[i]));
+        }
+        return html.join('');
+    }
+
+    /**
+     * 设置工具栏的缩放比例
+     */
+    DrawingTool.prototype._setScale = function(scale){
+        var width  = 390,
+            height = 50,
+            ml = -parseInt((width - width * scale) / 2, 10),
+            mt = -parseInt((height - height * scale) / 2, 10);
+        this.container.style.cssText = [
+            "-moz-transform: scale(" + scale + ");",
+            "-o-transform: scale(" + scale + ");",
+            "-webkit-transform: scale(" + scale + ");",
+            "transform: scale(" + scale + ");",
+            "margin-left:" + ml + "px;",
+            "margin-top:" + mt + "px;",
+            "*margin-left:0px;", //ie6、7
+            "*margin-top:0px;",  //ie6、7
+            "margin-left:0px\\0;", //ie8
+            "margin-top:0px\\0;",  //ie8
+            //ie下使用滤镜
+            "filter: progid:DXImageTransform.Microsoft.Matrix(",
+            "M11=" + scale + ",",
+            "M12=0,",
+            "M21=0,",
+            "M22=" + scale + ",",
+            "SizingMethod='auto expand');"
+        ].join('');
+    }
+
+    //绑定工具栏的事件
+    DrawingTool.prototype._bind = function(panel){
+        var me = this;
+        baidu.on(this.panel, 'click', function (e) {
+            var target = baidu.getTarget(e);
+            var drawingType = target.getAttribute('drawingType');
+            me.setStyleByDrawingMode(drawingType);
+            me._bindEventByDraingMode(drawingType);
+        });
+    }
+
+    //设置工具栏当前选中的项样式
+    DrawingTool.prototype.setStyleByDrawingMode = function(drawingType){
+        if (!drawingType) {
+            return;
+        }
+        var boxs = this.panel.getElementsByTagName("a");
+        for (var i = 0, len = boxs.length; i < len; i++) {
+            var box = boxs[i];
+            if (box.getAttribute('drawingType') == drawingType) {
+                var classStr = "BMapLib_box BMapLib_" + drawingType + "_hover";
+                if (i == len - 1) {
+                    classStr += " BMapLib_last";
+                }
+                box.className = classStr;
+            } else {
+                box.className = box.className.replace(/_hover/, "");
+            }
+        }
+    }
+
+    //设置工具栏当前选中的项样式
+    DrawingTool.prototype._bindEventByDraingMode = function(drawingType){
+        var me = this;
+        var drawingManager = this.drawingManager;
+        //点在拖拽地图的按钮上
+        if (drawingType == "hander") {
+            drawingManager.close();
+            drawingManager._map.enableDoubleClickZoom();
+        } else {
+            drawingManager.setDrawingMode(drawingType);
+            drawingManager.open();
+            drawingManager._map.disableDoubleClickZoom();
+        }
+    }
+
+    //用来存储用户实例化出来的drawingmanager对象
+    var instances = [];
+
+    /*
+     * 关闭其他实例的绘制模式
+     * @param {DrawingManager} 当前的实例
+     */
+    function closeInstanceExcept(instance) {
+        var index = instances.length;
+        while (index--) {
+            if (instances[index] != instance) {
+                instances[index].close();
+            }
+        }
+    }
+
+})();
+
+
+var styleOptions = {
+    strokeColor:"red",    //边线颜色。
+    fillColor:"red",      //填充颜色。当参数为空时，圆形将没有填充效果。
+    strokeWeight: 3,       //边线的宽度，以像素为单位。
+    strokeOpacity: 0.8,    //边线透明度，取值范围0 - 1。
+    fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
+    strokeStyle: 'solid' //边线的样式，solid或dashed。
+}
+
+
+
+var mapOptions = {
+    enableMapClick: true
+}
+
+
+//实例化鼠标绘制工具
+var drawingManager = new BMapLib.DrawingManager(window.map, {
+    isOpen: true, //是否开启绘制模式
+    enableDrawingTool: true, //是否显示工具栏
+    drawingToolOptions: {
+        anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
+        offset: new BMap.Size(5, 5), //偏离值
+        scale: 0.8 //工具栏缩放比例
+    },
+    circleOptions: styleOptions, //圆的样式
+    polylineOptions: styleOptions, //线的样式
+    polygonOptions: styleOptions, //多边形的样式
+    rectangleOptions: styleOptions //矩形的样式
+});  

src/assets/GeoUtils.js

+/**
+ * @fileoverview GeoUtils类提供若干几何算法，用来帮助用户判断点与矩形、
+ * 圆形、多边形线、多边形面的关系,并提供计算折线长度和多边形的面积的公式。 
+ * 主入口类是<a href="symbols/BMapLib.GeoUtils.html">GeoUtils</a>，
+ * 基于Baidu Map API 1.2。
+ *
+ * @author Baidu Map Api Group 
+ * @version 1.2
+ */
+
+/** 
+ * @namespace BMap的所有library类均放在BMapLib命名空间下
+ */
+var BMapLib = window.BMapLib = BMapLib || {};
+(function() { 
+    
+    /**
+     * 地球半径
+     */
+    var EARTHRADIUS = 6370996.81; 
+
+    /** 
+     * @exports GeoUtils as BMapLib.GeoUtils 
+     */
+    var GeoUtils =
+    /**
+     * GeoUtils类，静态类，勿需实例化即可使用
+     * @class GeoUtils类的<b>入口</b>。
+     * 该类提供的都是静态方法，勿需实例化即可使用。     
+     */
+    BMapLib.GeoUtils = function(){
+        
+    }
+    
+    /**
+     * 判断点是否在矩形内
+     * @param {Point} point 点对象
+     * @param {Bounds} bounds 矩形边界对象
+     * @returns {Boolean} 点在矩形内返回true,否则返回false
+     */
+    GeoUtils.isPointInRect = function(point, bounds){
+        //检查类型是否正确
+        if (!(point instanceof BMap.Point) || 
+            !(bounds instanceof BMap.Bounds)) {
+            return false;
+        }
+        var sw = bounds.getSouthWest(); //西南脚点
+        var ne = bounds.getNorthEast(); //东北脚点
+        return (point.lng >= sw.lng && point.lng <= ne.lng && point.lat >= sw.lat && point.lat <= ne.lat);
+    }
+    
+    /**
+     * 判断点是否在圆形内
+     * @param {Point} point 点对象
+     * @param {Circle} circle 圆形对象
+     * @returns {Boolean} 点在圆形内返回true,否则返回false
+     */
+    GeoUtils.isPointInCircle = function(point, circle){
+        //检查类型是否正确
+        if (!(point instanceof BMap.Point) || 
+            !(circle instanceof BMap.Circle)) {
+            return false;
+        }
+
+        //point与圆心距离小于圆形半径，则点在圆内，否则在圆外
+        var c = circle.getCenter();
+        var r = circle.getRadius();
+
+        var dis = GeoUtils.getDistance(point, c);
+        if(dis <= r){
+            return true;
+        } else {
+            return false;
+        }
+    }
+    
+    /**
+     * 判断点是否在折线上
+     * @param {Point} point 点对象
+     * @param {Polyline} polyline 折线对象
+     * @returns {Boolean} 点在折线上返回true,否则返回false
+     */
+    GeoUtils.isPointOnPolyline = function(point, polyline){
+        //检查类型
+        if(!(point instanceof BMap.Point) ||
+            !(polyline instanceof BMap.Polyline)){
+            return false;
+        }
+
+        //首先判断点是否在线的外包矩形内，如果在，则进一步判断，否则返回false
+        var lineBounds = polyline.getBounds();
+        if(!this.isPointInRect(point, lineBounds)){
+            return false;
+        }
+
+        //判断点是否在线段上，设点为Q，线段为P1P2 ，
+        //判断点Q在该线段上的依据是：( Q - P1 ) × ( P2 - P1 ) = 0，且 Q 在以 P1，P2为对角顶点的矩形内
+        var pts = polyline.getPath();
+        for(var i = 0; i < pts.length - 1; i++){
+            var curPt = pts[i];
+            var nextPt = pts[i + 1];
+            //首先判断point是否在curPt和nextPt之间，即：此判断该点是否在该线段的外包矩形内
+            if (point.lng >= Math.min(curPt.lng, nextPt.lng) && point.lng <= Math.max(curPt.lng, nextPt.lng) &&
+                point.lat >= Math.min(curPt.lat, nextPt.lat) && point.lat <= Math.max(curPt.lat, nextPt.lat)){
+                //判断点是否在直线上公式
+                var precision = (curPt.lng - point.lng) * (nextPt.lat - point.lat) - 
+                    (nextPt.lng - point.lng) * (curPt.lat - point.lat);                
+                if(precision < 2e-10 && precision > -2e-10){//实质判断是否接近0
+                    return true;
+                }                
+            }
+        }
+        
+        return false;
+    }
+    
+    /**
+     * 判断点是否多边形内
+     * @param {Point} point 点对象
+     * @param {Polyline} polygon 多边形对象
+     * @returns {Boolean} 点在多边形内返回true,否则返回false
+     */
+    GeoUtils.isPointInPolygon = function(point, polygon){
+        //检查类型
+        if(!(point instanceof BMap.Point) ||
+            !(polygon instanceof BMap.Polygon)){
+            return false;
+        }
+
+        //首先判断点是否在多边形的外包矩形内，如果在，则进一步判断，否则返回false
+        var polygonBounds = polygon.getBounds();
+        if(!this.isPointInRect(point, polygonBounds)){
+            return false;
+        }
+
+        var pts = polygon.getPath();//获取多边形点
+        
+        //下述代码来源：http://paulbourke.net/geometry/insidepoly/，进行了部分修改
+        //基本思想是利用射线法，计算射线与多边形各边的交点，如果是偶数，则点在多边形外，否则
+        //在多边形内。还会考虑一些特殊情况，如点在多边形顶点上，点在多边形边上等特殊情况。
+        
+        var N = pts.length;
+        var boundOrVertex = true; //如果点位于多边形的顶点或边上，也算做点在多边形内，直接返回true
+        var intersectCount = 0;//cross points count of x 
+        var precision = 2e-10; //浮点类型计算时候与0比较时候的容差
+        var p1, p2;//neighbour bound vertices
+        var p = point; //测试点
+        
+        p1 = pts[0];//left vertex        
+        for(var i = 1; i <= N; ++i){//check all rays            
+            if(p.equals(p1)){
+                return boundOrVertex;//p is an vertex
+            }
+            
+            p2 = pts[i % N];//right vertex            
+            if(p.lat < Math.min(p1.lat, p2.lat) || p.lat > Math.max(p1.lat, p2.lat)){//ray is outside of our interests                
+                p1 = p2; 
+                continue;//next ray left point
+            }
+            
+            if(p.lat > Math.min(p1.lat, p2.lat) && p.lat < Math.max(p1.lat, p2.lat)){//ray is crossing over by the algorithm (common part of)
+                if(p.lng <= Math.max(p1.lng, p2.lng)){//x is before of ray                    
+                    if(p1.lat == p2.lat && p.lng >= Math.min(p1.lng, p2.lng)){//overlies on a horizontal ray
+                        return boundOrVertex;
+                    }
+                    
+                    if(p1.lng == p2.lng){//ray is vertical                        
+                        if(p1.lng == p.lng){//overlies on a vertical ray
+                            return boundOrVertex;
+                        }else{//before ray
+                            ++intersectCount;
+                        } 
+                    }else{//cross point on the left side                        
+                        var xinters = (p.lat - p1.lat) * (p2.lng - p1.lng) / (p2.lat - p1.lat) + p1.lng;//cross point of lng                        
+                        if(Math.abs(p.lng - xinters) < precision){//overlies on a ray
+                            return boundOrVertex;
+                        }
+                        
+                        if(p.lng < xinters){//before ray
+                            ++intersectCount;
+                        } 
+                    }
+                }
+            }else{//special case when ray is crossing through the vertex                
+                if(p.lat == p2.lat && p.lng <= p2.lng){//p crossing over p2                    
+                    var p3 = pts[(i+1) % N]; //next vertex                    
+                    if(p.lat >= Math.min(p1.lat, p3.lat) && p.lat <= Math.max(p1.lat, p3.lat)){//p.lat lies between p1.lat & p3.lat
+                        ++intersectCount;
+                    }else{
+                        intersectCount += 2;
+                    }
+                }
+            }            
+            p1 = p2;//next ray left point
+        }
+        
+        if(intersectCount % 2 == 0){//偶数在多边形外
+            return false;
+        } else { //奇数在多边形内
+            return true;
+        }            
+    }
+
+    /**
+     * 将度转化为弧度
+     * @param {degree} Number 度     
+     * @returns {Number} 弧度
+     */
+    GeoUtils.degreeToRad =  function(degree){
+        return Math.PI * degree/180;    
+    }
+    
+    /**
+     * 将弧度转化为度
+     * @param {radian} Number 弧度     
+     * @returns {Number} 度
+     */
+    GeoUtils.radToDegree = function(rad){
+        return (180 * rad) / Math.PI;       
+    }
+    
+    /**
+     * 将v值限定在a,b之间，纬度使用
+     */
+    function _getRange(v, a, b){
+        if(a != null){
+          v = Math.max(v, a);
+        }
+        if(b != null){
+          v = Math.min(v, b);
+        }
+        return v;
+    }
+    
+    /**
+     * 将v值限定在a,b之间，经度使用
+     */
+    function _getLoop(v, a, b){
+        while( v > b){
+          v -= b - a
+        }
+        while(v < a){
+          v += b - a
+        }
+        return v;
+    }
+
+    /**
+     * 计算两点之间的距离,两点坐标必须为经纬度
+     * @param {point1} Point 点对象
+     * @param {point2} Point 点对象
+     * @returns {Number} 两点之间距离，单位为米
+     */
+    GeoUtils.getDistance = function(point1, point2){
+        //判断类型
+        if(!(point1 instanceof BMap.Point) ||
+            !(point2 instanceof BMap.Point)){
+            return 0;
+        }
+
+        point1.lng = _getLoop(point1.lng, -180, 180);
+        point1.lat = _getRange(point1.lat, -74, 74);
+        point2.lng = _getLoop(point2.lng, -180, 180);
+        point2.lat = _getRange(point2.lat, -74, 74);
+        
+        var x1, x2, y1, y2;
+        x1 = GeoUtils.degreeToRad(point1.lng);
+        y1 = GeoUtils.degreeToRad(point1.lat);
+        x2 = GeoUtils.degreeToRad(point2.lng);
+        y2 = GeoUtils.degreeToRad(point2.lat);
+
+        return EARTHRADIUS * Math.acos((Math.sin(y1) * Math.sin(y2) + Math.cos(y1) * Math.cos(y2) * Math.cos(x2 - x1)));    
+    }
+    
+    /**
+     * 计算折线或者点数组的长度
+     * @param {Polyline|Array<Point>} polyline 折线对象或者点数组
+     * @returns {Number} 折线或点数组对应的长度
+     */
+    GeoUtils.getPolylineDistance = function(polyline){
+        //检查类型
+        if(polyline instanceof BMap.Polyline || 
+            polyline instanceof Array){
+            //将polyline统一为数组
+            var pts;
+            if(polyline instanceof BMap.Polyline){
+                pts = polyline.getPath();
+            } else {
+                pts = polyline;
+            }
+            
+            if(pts.length < 2){//小于2个点，返回0
+                return 0;
+            }
+
+            //遍历所有线段将其相加，计算整条线段的长度
+            var totalDis = 0;
+            for(var i =0; i < pts.length - 1; i++){
+                var curPt = pts[i];
+                var nextPt = pts[i + 1]
+                var dis = GeoUtils.getDistance(curPt, nextPt);
+                totalDis += dis;
+            }
+
+            return totalDis;
+            
+        } else {
+            return 0;
+        }
+    }
+    
+    /**
+     * 计算多边形面或点数组构建图形的面积,注意：坐标类型只能是经纬度，且不适合计算自相交多边形的面积
+     * @param {Polygon|Array<Point>} polygon 多边形面对象或者点数组
+     * @returns {Number} 多边形面或点数组构成图形的面积
+     */
+    GeoUtils.getPolygonArea = function(polygon){
+        //检查类型
+        if(!(polygon instanceof BMap.Polygon) &&
+            !(polygon instanceof Array)){
+            return 0;
+        }
+        var pts;
+        if(polygon instanceof BMap.Polygon){
+            pts = polygon.getPath();
+        }else{
+            pts = polygon;    
+        }
+        console.log(polygon);
+        
+        if(pts.length < 3){//小于3个顶点，不能构建面
+            return 0;
+        }
+        
+        var totalArea = 0;//初始化总面积
+        var LowX = 0.0;
+        var LowY = 0.0;
+        var MiddleX = 0.0;
+        var MiddleY = 0.0;
+        var HighX = 0.0;
+        var HighY = 0.0;
+        var AM = 0.0;
+        var BM = 0.0;
+        var CM = 0.0;
+        var AL = 0.0;
+        var BL = 0.0;
+        var CL = 0.0;
+        var AH = 0.0;
+        var BH = 0.0;
+        var CH = 0.0;
+        var CoefficientL = 0.0;
+        var CoefficientH = 0.0;
+        var ALtangent = 0.0;
+        var BLtangent = 0.0;
+        var CLtangent = 0.0;
+        var AHtangent = 0.0;
+        var BHtangent = 0.0;
+        var CHtangent = 0.0;
+        var ANormalLine = 0.0;
+        var BNormalLine = 0.0;
+        var CNormalLine = 0.0;
+        var OrientationValue = 0.0;
+        var AngleCos = 0.0;
+        var Sum1 = 0.0;
+        var Sum2 = 0.0;
+        var Count2 = 0;
+        var Count1 = 0;
+        var Sum = 0.0;
+        var Radius = EARTHRADIUS; //6378137.0,WGS84椭球半径 
+        var Count = pts.length;        
+        for (var i = 0; i < Count; i++) {
+            if (i == 0) {
+                LowX = pts[Count - 1].lng * Math.PI / 180;
+                LowY = pts[Count - 1].lat * Math.PI / 180;
+                MiddleX = pts[0].lng * Math.PI / 180;
+                MiddleY = pts[0].lat * Math.PI / 180;
+                HighX = pts[1].lng * Math.PI / 180;
+                HighY = pts[1].lat * Math.PI / 180;
+            }
+            else if (i == Count - 1) {
+                LowX = pts[Count - 2].lng * Math.PI / 180;
+                LowY = pts[Count - 2].lat * Math.PI / 180;
+                MiddleX = pts[Count - 1].lng * Math.PI / 180;
+                MiddleY = pts[Count - 1].lat * Math.PI / 180;
+                HighX = pts[0].lng * Math.PI / 180;
+                HighY = pts[0].lat * Math.PI / 180;
+            }
+            else {
+                LowX = pts[i - 1].lng * Math.PI / 180;
+                LowY = pts[i - 1].lat * Math.PI / 180;
+                MiddleX = pts[i].lng * Math.PI / 180;
+                MiddleY = pts[i].lat * Math.PI / 180;
+                HighX = pts[i + 1].lng * Math.PI / 180;
+                HighY = pts[i + 1].lat * Math.PI / 180;
+            }
+            AM = Math.cos(MiddleY) * Math.cos(MiddleX);
+            BM = Math.cos(MiddleY) * Math.sin(MiddleX);
+            CM = Math.sin(MiddleY);
+            AL = Math.cos(LowY) * Math.cos(LowX);
+            BL = Math.cos(LowY) * Math.sin(LowX);
+            CL = Math.sin(LowY);
+            AH = Math.cos(HighY) * Math.cos(HighX);
+            BH = Math.cos(HighY) * Math.sin(HighX);
+            CH = Math.sin(HighY);
+            CoefficientL = (AM * AM + BM * BM + CM * CM) / (AM * AL + BM * BL + CM * CL);
+            CoefficientH = (AM * AM + BM * BM + CM * CM) / (AM * AH + BM * BH + CM * CH);
+            ALtangent = CoefficientL * AL - AM;
+            BLtangent = CoefficientL * BL - BM;
+            CLtangent = CoefficientL * CL - CM;
+            AHtangent = CoefficientH * AH - AM;
+            BHtangent = CoefficientH * BH - BM;
+            CHtangent = CoefficientH * CH - CM;
+            AngleCos = (AHtangent * ALtangent + BHtangent * BLtangent + CHtangent * CLtangent) / (Math.sqrt(AHtangent * AHtangent + BHtangent * BHtangent + CHtangent * CHtangent) * Math.sqrt(ALtangent * ALtangent + BLtangent * BLtangent + CLtangent * CLtangent));
+            AngleCos = Math.acos(AngleCos);            
+            ANormalLine = BHtangent * CLtangent - CHtangent * BLtangent;
+            BNormalLine = 0 - (AHtangent * CLtangent - CHtangent * ALtangent);
+            CNormalLine = AHtangent * BLtangent - BHtangent * ALtangent;
+            if (AM != 0)
+                OrientationValue = ANormalLine / AM;
+            else if (BM != 0)
+                OrientationValue = BNormalLine / BM;
+            else
+                OrientationValue = CNormalLine / CM;
+            if (OrientationValue > 0) {
+                Sum1 += AngleCos;
+                Count1++;
+            }
+            else {
+                Sum2 += AngleCos;
+                Count2++;
+            }
+        }        
+        var tempSum1, tempSum2;
+        tempSum1 = Sum1 + (2 * Math.PI * Count2 - Sum2);
+        tempSum2 = (2 * Math.PI * Count1 - Sum1) + Sum2;
+        if (Sum1 > Sum2) {
+            if ((tempSum1 - (Count - 2) * Math.PI) < 1)
+                Sum = tempSum1;
+            else
+                Sum = tempSum2;
+        }
+        else {
+            if ((tempSum2 - (Count - 2) * Math.PI) < 1)
+                Sum = tempSum2;
+            else
+                Sum = tempSum1;
+        }
+        totalArea = (Sum - (Count - 2) * Math.PI) * Radius * Radius;
+
+        return totalArea; //返回总面积
+    }
+   
+})();//闭包结束

src/index.html

@@ -7,8 +7,16 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
+  <style>
+    body{
+
+      background: rgb(66,187,250);
+      background: radial-gradient(circle, rgba(66,187,250,1) 20%, rgba(10,53,68,1) 100%);
+      color:white;
+    }
+</style>
 </head>
 <body>
   <app-root></app-root>
 </body>
-</html>

src/styles.less

 /* You can add global styles to this file, and also import other style files */
+/* MODAL STYLES
+-------------------------------*/
+jw-modal {
+    /* modals are hidden by default */
+    display: none;
+
+    .jw-modal {
+        /* modal container fixed across whole screen */
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+
+        /* z-index must be higher than .jw-modal-background */
+        z-index: 1000;
+        
+        /* enables scrolling for tall modals */
+        overflow: auto;
+
+        .jw-modal-body {
+            padding: 20px;
+            background: #fff;
+            color:black;
+            /* margin exposes part of the modal background */
+            margin: 400px;
+        }
+    }
+
+    .jw-modal-background {
+        /* modal background fixed across whole screen */
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+
+        /* semi-transparent black  */
+        background-color: #000;
+        opacity: 0.75;
+        
+        /* z-index must be below .jw-modal and above everything else  */
+        z-index: 900;
+    }
+}
+
+body.jw-modal-open {
+    /* body overflow is hidden to hide main scrollbar when modal window is open */
+    overflow: hidden;
+}