├── babel.config.js
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   └── logo.png
    ├── router
    │   └── router.js
    ├── main.js
    ├── App.vue
    ├── store
    │   └── index.js
    ├── components
    │   ├── layerControl.vue
    │   └── toolbar.vue
    └── common
    │   └── js
    │       └── draw.js
├── .gitignore
├── README.md
├── package.json
├── LICENSE
└── vue.config.js


/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrSmallLiu/LGIS/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrSmallLiu/LGIS/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw*
22 | 


--------------------------------------------------------------------------------
/src/router/router.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import Home from '@/components/Home'
 4 | 
 5 | Vue.use(Router)
 6 | 
 7 | export default new Router({
 8 |     routes: [
 9 |         {
10 |             path: '/',
11 |             name: 'home',
12 |             component: Home
13 |         }
14 |     ]
15 | })


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # LGIS
 2 | Based on cesium 3D GIS platform, support WMTS WFS PBF MVT , OSGB……
 3 | ## 运行简介
 4 | 该工程基于Vue开发。运行步骤如下
 5 | * 1.下载node.js并安装
 6 | * 2.在项目路径 运行 npm install，安装需要依赖
 7 | * 3.npm run serve，启动项目，默认端口为8080
 8 | * 4.在浏览器中输入localhost:8080即可
 9 | * 5.打包可以运行 npm run build。
10 | 
11 |   
12 | *博客现有数据可视化，近期会开始写积累的一些GIS方面的东西。PostGIS、postgresql、矢量瓦片等*
13 | *csdn博客：https://blog.csdn.net/qq_35241223*
14 | *运行不起来可以加我联系方式 qq:1016817543*
15 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import iView from 'iview'
 4 | import 'iview/dist/styles/iview.css'
 5 | import Cesium from "cesium/Cesium";
 6 | import 'cesium/Widgets/widgets.css';
 7 | import store from './store';
 8 | // Vue.prototype.Cesium = Cesium;
 9 | window.Cesium = Cesium;
10 | 
11 | // import vueRouter from 'vue-router'
12 | Vue.use(iView);
13 | Vue.config.productionTip = false
14 | 
15 | new Vue({
16 |   render: h => h(App),
17 |   store
18 | }).$mount('#app')


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
 4 |     <Home> </Home>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 |   import Home from "./components/toolbar.vue";
10 |   export default {
11 |     name: "app",
12 |     components: {
13 |       Home
14 |     }
15 |   };
16 | </script>
17 | 
18 | <style>
19 |   #app {
20 |     font-family: "Avenir", Helvetica, Arial, sans-serif;
21 |     -webkit-font-smoothing: antialiased;
22 |     -moz-osx-font-smoothing: grayscale;
23 |     /* text-align: center; */
24 |     color: #2c3e50;
25 |     /* margin-top: 60px; */
26 |     height: 100%;
27 |   }
28 | </style>


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" style="height:100%">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport" content="width=device-width,initial-scale=1.0">
 8 |   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 9 |   <!-- <link href="../static/Cesium/Widgets/widgets.css" rel="stylesheet"> -->
10 |   <title>chestnut-gis</title>
11 | </head>
12 | <!-- <script src="../static/Cesium/Cesium.js"></script> -->
13 | 
14 | <body style="height:100%">
15 |   <noscript>
16 |     <strong>We're sorry but chestnut-gis doesn't work properly without JavaScript enabled. Please enable it to
17 |       continue.</strong>
18 |   </noscript>
19 |   <div id="app"></div>
20 |   <!-- built files will be auto injected -->
21 | </body>
22 | 
23 | </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "chestnut-gis",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "cesium": "^1.51.0",
12 |     "iview": "^3.1.5",
13 |     "vue": "^2.5.17",
14 |     "vue-router": "^3.0.1",
15 |     "vuex": "^3.0.1"
16 |   },
17 |   "devDependencies": {
18 |     "@vue/cli-plugin-babel": "^3.0.5",
19 |     "@vue/cli-plugin-eslint": "^3.0.5",
20 |     "@vue/cli-service": "^3.0.5",
21 |     "vue-template-compiler": "^2.5.17"
22 |   },
23 |   "eslintConfig": {
24 |     "root": true,
25 |     "env": {
26 |       "node": true
27 |     },
28 |     "extends": [
29 |       "plugin:vue/essential",
30 |       "eslint:recommended"
31 |     ],
32 |     "rules": {},
33 |     "parserOptions": {
34 |       "parser": "babel-eslint"
35 |     }
36 |   },
37 |   "postcss": {
38 |     "plugins": {
39 |       "autoprefixer": {}
40 |     }
41 |   },
42 |   "browserslist": [
43 |     "> 1%",
44 |     "last 2 versions",
45 |     "not ie <= 8"
46 |   ]
47 | 
48 | }


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Mr小刘
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | // 修改state时在console打印，便于调试
 4 | import createLogger from 'vuex/dist/logger'
 5 | 
 6 | Vue.use(Vuex)
 7 | 
 8 | const debug = process.env.NODE_ENV !== 'production'
 9 | 
10 | const state = {
11 |     layerTreeData: [{
12 |         title: "底图",
13 |         expand: true,
14 |         children: [{
15 |                 title: "底图"
16 |             },
17 |             {
18 |                 title: "注记"
19 |             }
20 |         ]
21 |     }, {
22 |         title: "自定义图层",
23 |         expand: true,
24 |         children: [{
25 |                 title: "WMTS"
26 |             },
27 |             {
28 |                 title: "OSGB"
29 |             }
30 |         ]
31 |     }],
32 |     viewer:Object
33 | }
34 | const getters = {
35 |     GetLayerTreeData: state => state.layerTreeData
36 | }
37 | const mutations = {
38 |     SetLayerTreeData: (state, data) => {
39 |         state.layerTreeData = data;
40 |     },
41 |     setViewer:(state,viewer) => {
42 |         state.viewer=viewer
43 |     }
44 | }
45 | // const actions = {}
46 | 
47 | export default new Vuex.Store({
48 |     state,
49 |     getters,
50 |     mutations,
51 |     // actions,
52 |     // 严格模式，非法修改state时报错
53 |     strict: false,
54 |     plugins: debug ? [createLogger()] : []
55 | })


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | 
 3 | const webpack = require('webpack');
 4 | 
 5 | const cesiumSource = 'node_modules/cesium/Source';
 6 | const cesiumWorkers = '../Build/Cesium/Workers';
 7 | const cesiumThirdParty = '../Build/Cesium/ThirdParty';
 8 | 
 9 | const CopyWebpackPlugin = require('copy-webpack-plugin');
10 | 
11 | module.exports = {
12 |     devServer: {
13 |         open: true
14 |     },
15 |     configureWebpack: {
16 |         context: __dirname,
17 |         // 为 cesium 模块创建别名，更方便进行 import 和 require
18 |         resolve: {
19 |             alias: {
20 |                 cesium: path.resolve(__dirname, cesiumSource)
21 |             }
22 |         },
23 |         amd: {
24 |             // Enable webpack-friendly use of require in Cesium
25 |             // Tells Cesium that the version of AMD webpack uses to evaluate require statements is not compliant with the standard toUrl function
26 |             toUrlUndefined: true
27 |         },
28 |         plugins: [
29 |             new CopyWebpackPlugin([
30 |                 { from: path.join(cesiumSource, cesiumWorkers), to: 'Cesium/Workers' },
31 |                 { from: path.join(cesiumSource, cesiumThirdParty), to: 'Cesium/ThirdParty' },
32 |                 { from: path.join(cesiumSource, 'Assets'), to: 'Cesium/Assets' },
33 |                 { from: path.join(cesiumSource, 'Widgets'), to: 'Cesium/Widgets' }
34 |             ]),
35 |             new webpack.DefinePlugin({
36 |                 // Define relative base path in cesium for loading assets
37 |                 CESIUM_BASE_URL: JSON.stringify('Cesium')
38 |             })
39 |         ]
40 |     }
41 | }


--------------------------------------------------------------------------------
/src/components/layerControl.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <Tree :data="layerData" show-checkbox></Tree>
  3 | </template>
  4 | <script>
  5 | import { mapGetters, mapMutations } from "vuex";
  6 | export default {
  7 |   name: "LayerControl",
  8 |   data() {
  9 |     return {
 10 |       // layerData: []
 11 |     };
 12 |   },
 13 |   mounted: function() {
 14 |     // this.layerData = [];
 15 |   },
 16 | 
 17 |   computed: {
 18 |     // layerData: {
 19 |     //   get: function() {
 20 |     //     return this.GetLayerTreeData;
 21 |     //   },
 22 |     //   set: function(value) {
 23 |     //     console.log("value", value);
 24 |     //     // debugger;
 25 |     //     this.SetLayerTreeData(value);
 26 |     //   }
 27 |     // }
 28 |   },
 29 |   props: {
 30 |     viewer: null,
 31 |     selLayer: {
 32 |       Type: String
 33 |     },
 34 |     layerData: {
 35 |       Type: Array
 36 |     }
 37 |   },
 38 |   watch: {
 39 |     selLayer(newValue) {
 40 |       if (newValue) {
 41 |         // console.log(this.viewer.imageryLayers.length);
 42 |         //cl=this.viewer.imageryLayers.get_layers()
 43 |         //更改底图，并且改变选择状态
 44 |         this.changeLayer(newValue);
 45 |       }
 46 |     }
 47 |   },
 48 |   methods: {
 49 |     changeLayer: function(layerID) {
 50 |       //   console.log(this.GetLayerTreeData);
 51 |       // debugger
 52 |       if (
 53 |         layerID != "天地图底图" &&
 54 |         layerID != "谷歌底图" &&
 55 |         layerID != "ArcGIS底图"
 56 |       ) {
 57 |         return;
 58 |       }
 59 |       this.viewer.imageryLayers.removeAll();
 60 |       switch (layerID) {
 61 |         case "天地图底图":
 62 |           this.viewer.imageryLayers.addImageryProvider(
 63 |             new window.Cesium.WebMapTileServiceImageryProvider({
 64 |               url:
 65 |                 "http://t0.tianditu.com/vec_w/wmts?tk=2aa7f0081af9c7cf6c6a60d20335dd99&service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles",
 66 |               //url:"http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles",
 67 |               layer: "tdtBasicLayer",
 68 |               style: "default",
 69 |               format: "image/jpeg",
 70 |               tileMatrixSetID: "GoogleMapsCompatible",
 71 |               show: false,
 72 |               maximumLevel: 16
 73 |             })
 74 |           );
 75 |           break;
 76 |         case "谷歌底图":
 77 |           let url =
 78 |             "http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali";
 79 |           this.viewer.imageryLayers.addImageryProvider(
 80 |             new window.Cesium.UrlTemplateImageryProvider({
 81 |               url: url
 82 |             })
 83 |           );
 84 |           break;
 85 |         case "ArcGIS底图":
 86 |           this.viewer.imageryLayers.addImageryProvider(
 87 |             new window.Cesium.ArcGisMapServerImageryProvider({
 88 |               url:
 89 |                 "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
 90 |               enablePickFeatures: false
 91 |             })
 92 |           );
 93 |           break;
 94 |         default:
 95 |           break;
 96 |       }
 97 |       this.viewer.imageryLayers.addImageryProvider(
 98 |         new Cesium.WebMapTileServiceImageryProvider({
 99 |           url:
100 |             "http://t0.tianditu.gov.cn/cva_w/wmts?tk=2aa7f0081af9c7cf6c6a60d20335dd99&service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles",
101 |           layer: "tdtAnnoLayer",
102 |           style: "default",
103 |           format: "image/jpeg",
104 |           tileMatrixSetID: "GoogleMapsCompatible",
105 |           show: false
106 |         })
107 |       );
108 |     }
109 |   }
110 | };
111 | </script>


--------------------------------------------------------------------------------
/src/common/js/draw.js:
--------------------------------------------------------------------------------
  1 | class draw{
  2 |  drawPoint=function (viewer, callback) {
  3 | 
  4 |     var _this = this;
  5 |     _this.viewer=viewer
  6 |     //坐标存储
  7 |     var positions = [];
  8 |     var handler = new Cesium.ScreenSpaceEventHandler(_this.viewer.scene.canvas);
  9 | 
 10 |     //单击鼠标左键画点
 11 |     handler.setInputAction(function (movement) {
 12 |         var cartesian = _this.viewer.scene.camera.pickEllipsoid(movement.position, _this.viewer.scene.globe.ellipsoid);
 13 |         positions.push(cartesian);
 14 |         _this.viewer.entities.add({
 15 |             position: cartesian,
 16 |             point: {
 17 |                 color: Cesium.Color.RED,
 18 |                 pixelSize: 5,
 19 |                 heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
 20 |             }
 21 |         });
 22 |     }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
 23 | 
 24 |     //单击鼠标右键结束画点
 25 |     handler.setInputAction(function (movement) {
 26 |         handler.destroy();
 27 | 
 28 |         callback(positions);
 29 |     }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
 30 | 
 31 | };
 32 | drawLineString= function (viewer,callback) {
 33 |         var _this = this;
 34 |         _this.viewer=viewer
 35 |         var PolyLinePrimitive = (function () {
 36 |             function _(positions) {
 37 |                 this.options = {
 38 |                     polyline: {
 39 |                         show: true,
 40 |                         positions: [],
 41 |                         material: Cesium.Color.RED,
 42 |                         width: 3
 43 |                     }
 44 |                 };
 45 |                 this.positions = positions;
 46 |                 this._init();
 47 |             }
 48 | 
 49 |             _.prototype._init = function () {
 50 |                 var _self = this;
 51 |                 var _update = function () {
 52 |                     return _self.positions;
 53 |                 };
 54 |                 //实时更新polyline.positions
 55 |                 this.options.polyline.positions = new Cesium.CallbackProperty(_update, false);
 56 |                 _this.viewer.entities.add(this.options);
 57 |             };
 58 |             return _;
 59 |         })();
 60 | 
 61 |         var handler = new Cesium.ScreenSpaceEventHandler(_this.viewer.scene.canvas);
 62 |         var positions = [];
 63 |         var poly = undefined;
 64 |         //鼠标左键单击画点
 65 |         handler.setInputAction(function (movement) {
 66 |             var cartesian = _this.viewer.scene.camera.pickEllipsoid(movement.position, _this.viewer.scene.globe.ellipsoid);
 67 |             if (positions.length == 0) {
 68 |                 positions.push(cartesian.clone());
 69 |             }
 70 |             positions.push(cartesian);
 71 |         }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
 72 |         //鼠标移动
 73 |         handler.setInputAction(function (movement) {
 74 |             var cartesian = _this.viewer.scene.camera.pickEllipsoid(movement.endPosition, _this.viewer.scene.globe.ellipsoid);
 75 |             if (positions.length >= 2) {
 76 |                 if (!Cesium.defined(poly)) {
 77 |                     poly = new PolyLinePrimitive(positions);
 78 |                 } else {
 79 |                     if (cartesian != undefined) {
 80 |                         positions.pop();
 81 |                         cartesian.y += (1 + Math.random());
 82 |                         positions.push(cartesian);
 83 |                     }
 84 |                 }
 85 |             }
 86 |         }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
 87 |         //单击鼠标右键结束画线
 88 |         handler.setInputAction(function (movement) {
 89 |             handler.destroy();
 90 |             callback(positions);
 91 |         }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
 92 |     };
 93 |     drawPolygon= function (viewer,callback) {
 94 |         var _this = this;
 95 |         _this.viewer=viewer
 96 |         var PolygonPrimitive = (function () {
 97 |             function _(positions) {
 98 |                 this.options = {
 99 |                     name: '多边形',
100 |                     polygon: {
101 |                         hierarchy: [],
102 |                         perPositionHeight: true,
103 |                         material: Cesium.Color.RED.withAlpha(0.4)
104 |                     }
105 |                 };
106 |                 this.hierarchy = positions;
107 |                 this._init();
108 |             }
109 | 
110 |             _.prototype._init = function () {
111 |                 var _self = this;
112 |                 var _update = function () {
113 |                     return _self.hierarchy;
114 |                 };
115 |                 //实时更新polygon.hierarchy
116 |                 this.options.polygon.hierarchy = new Cesium.CallbackProperty(_update, false);
117 |                 _this.viewer.entities.add(this.options);
118 |             };
119 |             return _;
120 |         })();
121 | 
122 |         var handler = new Cesium.ScreenSpaceEventHandler(_this.viewer.scene.canvas);
123 |         var positions = [];
124 |         var poly = undefined;
125 | 
126 |         //鼠标单击画点
127 |         handler.setInputAction(function (movement) {
128 |             var cartesian = _this.viewer.scene.camera.pickEllipsoid(movement.position, _this.viewer.scene.globe.ellipsoid);
129 |             if (positions.length == 0) {
130 |                 positions.push(cartesian.clone());
131 |             }
132 |             positions.push(cartesian);
133 |         }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
134 |         //鼠标移动
135 |         handler.setInputAction(function (movement) {
136 |             var cartesian = _this.viewer.scene.camera.pickEllipsoid(movement.endPosition, _this.viewer.scene.globe.ellipsoid);
137 |             if (positions.length >= 2) {
138 |                 if (!Cesium.defined(poly)) {
139 |                     poly = new PolygonPrimitive(positions);
140 |                 } else {
141 |                     if (cartesian != undefined) {
142 |                         positions.pop();
143 |                         cartesian.y += (1 + Math.random());
144 |                         positions.push(cartesian);
145 |                     }
146 |                 }
147 |             }
148 |         }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
149 |         //鼠标右键单击结束绘制
150 |         handler.setInputAction(function (movement) {
151 |             handler.destroy();
152 |             callback(positions);
153 |         }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
154 |     };
155 |     drawRect= function (viewer,callback) {
156 |         let _self = this;
157 |         _self.viewer=viewer
158 |         let pointsArr = [];
159 |         _self.shape = {
160 |             points: [],
161 |             rect: null,
162 |             entity: null
163 |         };
164 |         var tempPosition;
165 |         var handle = new Cesium.ScreenSpaceEventHandler(_self.viewer.scene.canvas);
166 |         //鼠标左键单击画点
167 |         handle.setInputAction(function (click) {
168 |             tempPosition = _self.getPointFromWindowPoint(click.position);
169 |             //选择的点在球面上
170 |             if (tempPosition) {
171 |                 if (_self.shape.points.length == 0) {
172 |                     pointsArr.push(tempPosition);
173 |                     _self.shape.points.push(_self.viewer.scene.globe.ellipsoid.cartesianToCartographic(tempPosition));
174 |                     _self.shape.rect = Cesium.Rectangle.fromCartographicArray(_self.shape.points);
175 |                     _self.shape.rect.east += 0.000001;
176 |                     _self.shape.rect.north += 0.000001;
177 |                     _self.shape.entity = _self.viewer.entities.add({
178 |                         rectangle: {
179 |                             coordinates: _self.shape.rect,
180 |                             material: Cesium.Color.BLACK.withAlpha(0.4),
181 |                             outline: true,
182 |                             outlineWidth: 2,
183 |                             outlineColor: Cesium.Color.RED,
184 |                             height: 0
185 |                         }
186 |                     });
187 |                     _self.bufferEntity = _self.shape.entity;
188 |                 }
189 |                 else {
190 |                     handle.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
191 |                     handle.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
192 |                     callback(pointsArr);
193 |                 }
194 |             }
195 |         }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
196 |         //鼠标移动
197 |         handle.setInputAction(function (movement) {
198 |             if (_self.shape.points.length == 0) {
199 |                 return;
200 |             }
201 |             var moveEndPosition = _self.getPointFromWindowPoint(movement.endPosition);
202 |             //选择的点在球面上
203 |             if (moveEndPosition) {
204 |                 pointsArr[1] = moveEndPosition;
205 |                 _self.shape.points[1] = _self.viewer.scene.globe.ellipsoid.cartesianToCartographic(moveEndPosition);
206 |                 _self.shape.rect = Cesium.Rectangle.fromCartographicArray(_self.shape.points);
207 |                 if (_self.shape.rect.west == _self.shape.rect.east)
208 |                     _self.shape.rect.east += 0.000001;
209 |                 if (_self.shape.rect.south == _self.shape.rect.north)
210 |                     _self.shape.rect.north += 0.000001;
211 |                 _self.shape.entity.rectangle.coordinates = _self.shape.rect;
212 |             }
213 |         }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
214 |     };
215 |     clearHandle=function (viewer) {
216 | 
217 |         //移除所有实体Entity
218 |         this.viewer.entities.removeAll();
219 |         this.viewer=viewer
220 |         //移除cesium加载的ImageryLayer
221 |         for (var i = 0; i < this.removeImageryLayers.length; i++) {
222 |             this.viewer.imageryLayers.remove(this.removeImageryLayers[i]);
223 |         }
224 |     };
225 | }
226 | export default new draw()
227 | 


--------------------------------------------------------------------------------
/src/components/toolbar.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="layout">
  3 |     <Layout :style="{height: '100%'}">
  4 |       <Header>
  5 |         <Menu active-name="tdt" mode="horizontal" theme="dark" v-on:on-select="toolbarChange">
  6 |           <div class="layout-logo"></div>
  7 |           <div class="layout-nav">
  8 |             <Submenu name="baselayerChange" style="font-size:16px">
  9 |               <template slot="title">
 10 |                 <Icon type="logo-buffer" size="28"/>底图切换
 11 |               </template>
 12 |               <MenuItem name="天地图底图">天地图</MenuItem>
 13 |               <MenuItem name="谷歌底图">谷歌</MenuItem>
 14 |               <MenuItem name="ArcGIS底图">ArcGIS Online</MenuItem>
 15 |             </Submenu>
 16 |             <Submenu name="addLayer" style="font-size:16px">
 17 |               <template slot="title">
 18 |                 <Icon type="logo-buffer" size="28"/>添加图层
 19 |               </template>
 20 |               <MenuItem name="OSGB">倾斜摄影模型</MenuItem>
 21 |               <MenuItem name="DEM">DEM</MenuItem>
 22 |             </Submenu>
 23 |             <Submenu name="addGraphic" style="font-size:16px">
 24 |               <template slot="title">
 25 |                 <Icon type="logo-buffer" size="28"/>标绘
 26 |               </template>
 27 |               <MenuItem name="point">标点</MenuItem>
 28 |               <MenuItem name="line">标线</MenuItem>
 29 |               <MenuItem name="polygon">标面</MenuItem>
 30 |               <MenuItem name="clear">清除</MenuItem>
 31 |             </Submenu>
 32 |             <MenuItem name="clearPrimitive">
 33 |               <Icon type="md-refresh" size="28"/>还原
 34 |             </MenuItem>
 35 |           </div>
 36 |         </Menu>
 37 |       </Header>
 38 |       <Layout>
 39 |         <Sider hide-trigger :style="{background: '#fff'}">
 40 |           <LayerControl
 41 |             style="width:200px;overflow:auto"
 42 |             :layerData="layerTreeData"
 43 |             :selLayer="selLayer"
 44 |             :viewer="viewer"
 45 |           ></LayerControl>
 46 |         </Sider>
 47 |         <Layout>
 48 |           <Content :style="{height: '100%',  background: '#fff'}">
 49 |             <div id="mapContent" style="height:100%"></div>
 50 |           </Content>
 51 |         </Layout>
 52 |       </Layout>
 53 |     </Layout>
 54 |     <Modal v-model="osgbModal_is" title="添加倾斜摄影模型" width="560" @on-ok="osgbAdd">
 55 |       <!-- <p>After you click ok, the dialog box will close in 2 seconds.</p> -->
 56 |       <div>
 57 |         OSGB地址:
 58 |         <Input v-model="osgbUrl" placeholder="请输入OSGB瓦片地址" clearable style="width: 240px"/>
 59 |       </div>
 60 |       <div style="margin-top:18px;">
 61 |         OSGB位置:
 62 |         <Input v-model="osgbLon" placeholder="请输入OSGB经度" clearable style="width: 100px"/>
 63 |         <Input v-model="osgbLat" placeholder="请输入OSGB纬度" clearable style="width: 100px"/>
 64 |         <Input v-model="osgbHeight" placeholder="请输入OSGB高度" clearable style="width: 100px"/>
 65 |       </div>
 66 |     </Modal>
 67 |     <Modal v-model="demModal_is" title="添加DEM" width="560" @on-ok="demAdd">
 68 |       <!-- <p>After you click ok, the dialog box will close in 2 seconds.</p> -->
 69 |       <div>
 70 |         DEM地址:
 71 |         <Input v-model="demUrl" placeholder="请输入DEM瓦片地址" clearable style="width: 240px"/>
 72 |       </div>
 73 |     </Modal>
 74 |   </div>
 75 | </template>
 76 | <script>
 77 | import LayerControl from "./layerControl.vue";
 78 | import draw from "../common/js/draw";
 79 | export default {
 80 |   name: "Home",
 81 |   components: {
 82 |     LayerControl
 83 |   },
 84 |   props: {},
 85 |   data() {
 86 |     return {
 87 |       viewer: null,
 88 |       osgbModal_is: false, //倾斜摄影模型的对话框
 89 |       demModal_is: false,
 90 |       demUrl: "http://127.0.0.1:8082",
 91 |       // osgbModalLoading_is: true, //倾斜摄影模型是否异步
 92 |       osgbUrl: "http://127.0.0.1:8081/tiles/tileset.json",
 93 |       osgbLon: 116.398207,
 94 |       osgbLat: 39.907155,
 95 |       osgbHeight: -150,
 96 |       selLayer: "天地图底图",
 97 |       layerTreeData: [
 98 |         {
 99 |           title: "底图",
100 |           expand: true,
101 |           children: [
102 |             {
103 |               title: "天地图底图",
104 |               checked: true
105 |             },
106 |             {
107 |               title: "注记",
108 |               checked: true
109 |             }
110 |           ]
111 |         }
112 |       ],
113 |       drawType: null
114 |     };
115 |   },
116 |   mounted: function() {
117 |     window.Cesium.Ion.defaultAccessToken =
118 |       "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1YWNkNjZiZC0wYjQ1LTQ4NjQtYTM5OC1lYzhlYmY0MWZlNzQiLCJpZCI6NjE2Mywic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0NTQ2MDQ4MH0.1C-TB8mSOxn_eUDi_S76XqpmnpPqXFsT9q5dsIEAtVE";
119 |     this.viewer = new window.Cesium.Viewer("mapContent", {
120 |       imageryProvider: new window.Cesium.WebMapTileServiceImageryProvider({
121 |         url:
122 |           "http://t0.tianditu.gov.cn/img_w/wmts?tk=2aa7f0081af9c7cf6c6a60d20335dd99&service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles",
123 |         layer: "tdtBasicLayer",
124 |         style: "default",
125 |         format: "image/jpeg",
126 |         tileMatrixSetID: "GoogleMapsCompatible",
127 |         show: false,
128 |         maximumLevel: 16
129 |       }),
130 |       homeButton: false,
131 |       navigationHelpButton: false,
132 |       timeline: false,
133 |       animation: false,
134 |       sceneModePicker: false,
135 |       baseLayerPicker: false,
136 |       geocoder: false,
137 |       fullscreenButton: false,
138 |       navigationInstructionsInitiallyVisible: false
139 |       // terrainProvider: window.Cesium.createWorldTerrain()
140 |     });
141 |     this.$store.commit("setViewer", this.viewer);
142 |     // console.log(this.$store.state.viewer)
143 |     //     //this.$store.state.viewer = this.viewer;
144 |     //     //console.log(this.$store.state.newslist)
145 |     this.viewer._cesiumWidget._creditContainer.style.display = "none";
146 |     this.viewer.camera.flyTo({
147 |       destination: window.Cesium.Cartesian3.fromDegrees(116, 39, 8000000)
148 |     });
149 |   },
150 |   methods: {
151 |     toolbarChange: function(layerID) {
152 |       // this.layerTreeData = [
153 |       //   {
154 |       //     title: "底图",
155 |       //     expand: true,
156 |       //     children: [
157 |       //       {
158 |       //         title: layerID,
159 |       //         checked: true
160 |       //       },
161 |       //       {
162 |       //         title: "注记",
163 |       //         checked: true
164 |       //       }
165 |       //     ]
166 |       //   }
167 |       // ];
168 |       this.selLayer = layerID;
169 |       //判断选择的是否是标绘
170 |       if (
171 |         layerID == "point" ||
172 |         layerID == "line" ||
173 |         layerID == "polygon" ||
174 |         layerID == "clear"
175 |       ) {
176 |         this.drawType = layerID;
177 |       }
178 |       if (layerID == "OSGB") {
179 |         this.osgbModal_is = true;
180 |       }
181 |       if (layerID == "DEM") {
182 |         this.demModal_is = true;
183 |       }
184 |       if (layerID == "clearPrimitive") {
185 |         this.removeAllPrimitive();
186 |       }
187 |     },
188 |     layerTreeChange(data) {
189 |       this.layerTreeData = data;
190 |     },
191 |     osgbAdd() {
192 |       this.osgbModal_is = false;
193 |       let tileset = new window.Cesium.Cesium3DTileset({
194 |         url: this.osgbUrl
195 |       });
196 |       // debugger;
197 |       this.viewer.scene.primitives.add(tileset);
198 |       let that = this;
199 |       tileset.readyPromise.then(function() {
200 |         let position = window.Cesium.Cartesian3.fromDegrees(
201 |           that.osgbLon,
202 |           that.osgbLat,
203 |           that.osgbHeight
204 |         );
205 |         let mat = window.Cesium.Transforms.eastNorthUpToFixedFrame(position);
206 |         let rotationX = window.Cesium.Matrix4.fromRotationTranslation(
207 |           window.Cesium.Matrix3.fromRotationZ(window.Cesium.Math.toRadians(0))
208 |         );
209 |         window.Cesium.Matrix4.multiply(mat, rotationX, mat);
210 |         tileset._root.transform = mat;
211 |         that.viewer.camera.flyTo({
212 |           destination: window.Cesium.Cartesian3.fromDegrees(
213 |             that.osgbLon,
214 |             that.osgbLat,
215 |             that.osgbHeight + 1000
216 |           )
217 |         });
218 |       });
219 |     },
220 |     demAdd() {
221 |       this.demModal_is = false;
222 |       var rectangle = new window.Cesium.Rectangle(
223 |         window.Cesium.Math.toRadians(112.99962),
224 |         window.Cesium.Math.toRadians(34.99978),
225 |         window.Cesium.Math.toRadians(115.999916),
226 |         window.Cesium.Math.toRadians(38.000076)
227 |       );
228 |       var terrainLayer = new window.Cesium.CesiumTerrainProvider({
229 |         url: this.demUrl
230 |       });
231 |       this.viewer.terrainProvider = terrainLayer;
232 |       this.viewer.scene.camera.flyTo({ destination: rectangle });
233 |     },
234 |     removeAllPrimitive() {
235 |       this.viewer.scene.primitives.removeAll();
236 |       this.viewer.terrainProvider = new window.Cesium.EllipsoidTerrainProvider();
237 |       this.viewer.camera.flyTo({
238 |         destination: window.Cesium.Cartesian3.fromDegrees(116, 39, 8000000)
239 |       });
240 |     }
241 |   },
242 |   watch: {
243 |     drawType(newValue) {
244 |       switch (newValue) {
245 |         case "point":
246 |           draw.drawPoint(this.$store.state.viewer, function() {});
247 |           break;
248 |         case "line":
249 |           draw.drawLineString(this.$store.state.viewer, function() {});
250 |           break;
251 |         case "polygon":
252 |           draw.drawPolygon(this.$store.state.viewer, function() {});
253 |           break;
254 |         case "clear":
255 |           draw.clearHandle(this.$store.state.viewer);
256 |           break;
257 |       }
258 |     }
259 |   }
260 | };
261 | </script>
262 | <style scoped>
263 | .baseLayerChangeClass {
264 |   width: 50px;
265 | }
266 | 
267 | .layout {
268 |   border: 1px solid #d7dde4;
269 |   background: #f5f7f9;
270 |   position: relative;
271 |   border-radius: 4px;
272 |   overflow: hidden;
273 |   height: 100%;
274 | }
275 | 
276 | .layout-logo {
277 |   width: 100px;
278 |   height: 30px;
279 |   background: #5b6270;
280 |   border-radius: 3px;
281 |   float: left;
282 |   position: relative;
283 |   top: 15px;
284 |   left: 20px;
285 | }
286 | 
287 | .layout-nav {
288 |   width: 580px;
289 |   margin: 0 auto;
290 |   margin-right: 20px;
291 | }
292 | </style>


--------------------------------------------------------------------------------