20191218

 <!--
 <!--
  * @Author: jiangbotao
  * @Author: jiangbotao
  * @Date: 2019-12-09 23:17:48
  * @Date: 2019-12-09 23:17:48
- * @LastEditors: jiangbotao
- * @LastEditTime: 2019-12-16 00:56:05
+ * @LastEditors  : jiangbotao
+ * @LastEditTime : 2019-12-18 19:27:37
  * @FilePath: \mymapbox\src\components\Map3857.vue
  * @FilePath: \mymapbox\src\components\Map3857.vue
  -->
  -->
 <template>
 <template>
@@ -12,10 +12,7 @@
 </template>
 </template>
 
 
 <script>
 <script>
-import Vue from 'vue'
-import { message } from'ant-design-vue';
-Vue.use(message)
-
+import { notification } from 'ant-design-vue';
 import mapboxgl from 'mapbox-gl';
 import mapboxgl from 'mapbox-gl';
 import { Logo, MeasureService } from '@supermap/iclient-mapboxgl';
 import { Logo, MeasureService } from '@supermap/iclient-mapboxgl';
 
 
@@ -73,14 +70,18 @@ export default {
                 new MeasureService(url).measureDistance(param, function (serviceResult) {
                 new MeasureService(url).measureDistance(param, function (serviceResult) {
                     var distance = serviceResult.result.distance;
                     var distance = serviceResult.result.distance;
                     var unit = serviceResult.result.unit;
                     var unit = serviceResult.result.unit;
-                    message.info('当前长度: '+ distance+" "+unit);
+                    notification.warning({
+                        message: '当前长度: '+ distance+" "+unit
+                    });
                 });
                 });
             }else{
             }else{
                 new MeasureService(url).measureArea(param, function (serviceResult) {
                 new MeasureService(url).measureArea(param, function (serviceResult) {
                     var area = serviceResult.result.area;
                     var area = serviceResult.result.area;
                     var unit = serviceResult.result.unit;
                     var unit = serviceResult.result.unit;
                     var rounded_area = Math.round(area * 100) / 100;
                     var rounded_area = Math.round(area * 100) / 100;
-                    message.info('当前面积: '+ rounded_area+" 平方"+unit);
+                    notification.warning({
+                        message: '当前面积: '+ rounded_area+" 平方"+unit
+                    });
                 });
                 });
             }
             }
         }
         }

 <!--
 <!--
  * @Author: jiangbotao
  * @Author: jiangbotao
  * @Date: 2019-12-09 23:17:48
  * @Date: 2019-12-09 23:17:48
- * @LastEditors: jiangbotao
- * @LastEditTime: 2019-12-16 01:29:01
+ * @LastEditors  : jiangbotao
+ * @LastEditTime : 2019-12-18 19:29:18
  * @FilePath: \mymapbox\src\components\Map3857.vue
  * @FilePath: \mymapbox\src\components\Map3857.vue
  -->
  -->
 <template>
 <template>
     <div >
     <div >
         <div id="map"></div>
         <div id="map"></div>
-        <a-card title="业务图层操作" :bordered="false" style="width: 320px">
-            <p>
-                <a-button v-on:click="addLayer">加载图层</a-button>
-                <a-button v-on:click="clearLayer">隐藏图层</a-button>
-                <a-button v-on:click="showLayer">展示图层</a-button>
-            </p>
-        </a-card>
+        <div id="btnGroup">
+            <a-button-group size="large">
+                <a-button type="primary" v-on:click="addLayer">加载图层</a-button>
+                <a-button type="primary" v-on:click="clearLayer">隐藏图层</a-button>
+                <a-button type="primary" v-on:click="showLayer">展示图层</a-button>
+            </a-button-group>
+        </div>
     </div>
     </div>
 </template>
 </template>
 
 
@@ -141,10 +141,7 @@ export default {
     width: 100%;
     width: 100%;
     background-color: white
     background-color: white
 }
 }
-.ant-card {
-    width: 320px;
-    height: 120px;
-    background-color: #e6f7ff;
+#btnGroup {
     right: 5px;
     right: 5px;
     position: absolute;
     position: absolute;
     top: 5px;
     top: 5px;

 <!--
 <!--
  * @Author: jiangbotao
  * @Author: jiangbotao
  * @Date: 2019-12-09 23:17:48
  * @Date: 2019-12-09 23:17:48
- * @LastEditors: jiangbotao
- * @LastEditTime: 2019-12-15 12:36:14
+ * @LastEditors  : jiangbotao
+ * @LastEditTime : 2019-12-18 19:39:20
  * @FilePath: \mymapbox\src\components\Map3857.vue
  * @FilePath: \mymapbox\src\components\Map3857.vue
  -->
  -->
 <template>
 <template>
@@ -36,6 +36,14 @@ export default {
                         "type": "raster",
                         "type": "raster",
                         "tiles": [host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}'],
                         "tiles": [host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}'],
                         "tileSize": 256
                         "tileSize": 256
+                    },
+                    'china_boundary': {
+                        "type": "geojson",
+                        "data": "./static/china.json"
+                    },
+                    'wz_boundary': {
+                        "type": "geojson",
+                        "data": "./static/330300_full.json"
                     }
                     }
                 },
                 },
                 "layers": [{
                 "layers": [{
@@ -44,10 +52,45 @@ export default {
                     "source": "raster-tiles",
                     "source": "raster-tiles",
                     "minzoom": 0,
                     "minzoom": 0,
                     "maxzoom": 22
                     "maxzoom": 22
+                },{
+                    "id": "cn_boundary",
+                    "type": "fill",
+                    "source": "china_boundary",
+                    'paint': {
+                        'fill-color': '#081a45',
+                        'fill-outline-color': 'rgba(200, 100, 240, 1)',
+                        'fill-opacity': 0.9
+                    },
+                    "minzoom": 7,
+                    "maxzoom": 22
+                },{
+                    "id": "wz_boundary",
+                    "type": "fill",
+                    "source": "wz_boundary",
+                    'paint': {
+                        'fill-color': '#1e3e77',
+                        'fill-outline-color': 'rgba(200, 100, 240, 1)',
+                        'fill-opacity': 0.2
+                    },
+                    "minzoom": 7,
+                    "maxzoom": 22
+                },{
+                    'id': 'wz_boundary_line',
+                    'type': 'line',
+                    "source": "wz_boundary",
+                    'layout': {
+                        'line-cap': 'round',
+                        'line-join': 'round'
+                    },
+                    'paint': {
+                        'line-color': '#3e9ad3',
+                        'line-dasharray': [0.2, 2],
+                        'line-width': 2
+                    }
                 }]
                 }]
             },
             },
-            center: [110.143, 30.236], // starting position
-            zoom: 3 // starting zoom
+            center: [120.70211, 27.67169], // starting position
+            zoom: 8 // starting zoom
         });
         });
         map.addControl(new Logo(), 'bottom-right');
         map.addControl(new Logo(), 'bottom-right');
         map.addControl(new mapboxgl.NavigationControl(), 'top-left');
         map.addControl(new mapboxgl.NavigationControl(), 'top-left');

@@ -6,7 +6,7 @@
  * @FilePath: \supermapvue\src\main.js
  * @FilePath: \supermapvue\src\main.js
  */
  */
 import Vue from 'vue'
 import Vue from 'vue'
-import { Layout, Menu, Icon, Card, Button } from 'ant-design-vue'
+import { Layout, Menu, Icon, Button } from 'ant-design-vue'
 import App from './App'
 import App from './App'
 import router from './router'
 import router from './router'
 // import 'ant-design-vue/dist/antd.css'
 // import 'ant-design-vue/dist/antd.css'
@@ -17,7 +17,6 @@ Vue.config.productionTip = false
 Vue.use(Layout)
 Vue.use(Layout)
 Vue.use(Menu)
 Vue.use(Menu)
 Vue.use(Icon)
 Vue.use(Icon)
-Vue.use(Card)
 Vue.use(Button)
 Vue.use(Button)
 
 
 /* eslint-disable no-new */
 /* eslint-disable no-new */