feat: 优化地图显示

README.md

@@ -102,6 +102,21 @@ yarn build
   - https://lbs.amap.com/demo/list/js-api-v2
   - 坐标获取 https://lbs.gaode.com/console/show/picker
   - https://lbs.amap.com/demo/loca-api/demos/districtlayer/loca_dist_getstatus
+  - https://juejin.cn/post/6979147635156320286
+- 地图商家
+  - https://www.gpsov.com/cn2/index.php
+  - http://www.tuxingis.com/locaspace.html
+  - https://www.openstreetmap.org/#map=4/69.62/-74.90
+  - https://www.arcgis.com/apps/mapviewer/index.html
+  - http://lbs.tianditu.gov.cn/server/MapService.html
+  - https://www.cnblogs.com/tuxingis/p/15419703.html
+- 增加清晰度
+  - 使用地图下载器下载 google 地图瓦片图数据并操作成 wmts 服务给高德引用
+  - http://lbs.zjkelan.com/JSAPIBook/chapter2/3.1.html
+  - https://www.cnblogs.com/amadoGrowers/p/14949540.html
+  - https://blog.51cto.com/bigemap/4980388
+  - https://blog.51cto.com/bigemap/2883864
+  - https://juejin.cn/post/7213189189303107643
 
 - [（上）Vue+Echarts构建可视化大数据平台实战项目分享](https://54web3.cc/blog/induction-tutorial/vue-echarts-prev-section)
 - [（下）Vue+Echarts构建大数据可视化酷炫展示公司品牌实战项目分享](https://54web3.cc/blog/induction-tutorial/vue-echarts-next-section)

src/components/bgBox/index.vue

@@ -180,6 +180,8 @@ export default {
 
 <style lang="less" scoped>
 .container-box {
+  width: 1920px;
+  height: 1080px;
   transform-origin: 0 0 0;
   position: relative;
   color: #fff;

src/views/page2/index.vue

@@ -98,10 +98,35 @@ export default {
             zoom: 9.22, // 初始化地图级别
             // center: [107.943579, 30.131735], // 初始化地图中心点位置
             center: [108.597461, 28.047503], // 初始化地图中心点位置
+            resizeEnable: true,
             layers: [
-              new AMap.TileLayer.Satellite(),
-              new AMap.TileLayer.RoadNet(),
+              // new AMap.TileLayer.Satellite(),
+              // new AMap.TileLayer.RoadNet(),
+              // 谷歌图
+              // new AMap.TileLayer({
+              //   // getTileUrl: `//mt1.google.cn/vt/lyrs=s&hl=zh-CN&gl=CN&x=[x]&y=[y]&z=[z]&s=Gali`,
+              //   getTileUrl: `http://mt{1,2,3,0}.google.cn/vt/lyrs=y@142&hl=zh-CN&gl=cn&x=[x]&y=[y]&z=[z]&s=Galil`,
+              //   zIndex: 20,
+              //   zoom: 17,
+              // }),
+              // new AMap.TileLayer({
+              //   getTileUrl: `//mt1.google.cn/vt/imgtp=png32&lyrs=h@207000000&hl=zh-CN&gl=cn&x=[x]&y=[y]&z=[z]&s=Galil`,
+              //   zIndex: 20,
+              //   zoom: 17,
+              // }),
+              // 天地图
+              new AMap.TileLayer({
+                getTileUrl: `//t{0,1,2,3,4,5,6,7}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX=[z]&TILEROW=[y]&TILECOL=[x]&tk=d7fcf6db577fd86e0cc48e9169065727`,
+                zIndex: 20,
+                zoom: 17,
+              }),
+              new AMap.TileLayer({
+                getTileUrl: `//t{0,1,2,3,4,5,6,7}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX=[z]&TILEROW=[y]&TILECOL=[x]&tk=d7fcf6db577fd86e0cc48e9169065727`,
+                zIndex: 20,
+                zoom: 17,
+              }),
             ],
+            // zooms: [16, 20],
           })
           window.map.setFeatures([`point`]) // 单一种类要素显示
           let list = json.features.map((item) => item)