守押地图 封装

liuyg

2021-10-26 0e1bb11ad7a6c9d090118614edf12f5fae6a09e4

守押地图   封装

 src/components/map/main.vue

@@ -92,91 +92,9 @@
    };
  },
  mounted() {
    // 本地开发使用;
    // this.ol2d = new OlMap({
    //   layers: [
    //     new OlLayerTile({
    //       zIndex: 4,
    //       title: "影像",
    //       source: new XYZ({
    //         url: "https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal", // 行政区划
    //       }),
    //     }),
    //     // ,
    //     // new OlLayerTile({
    //     //     zIndex: 5,
    //     //     title: '道路+中文注记',
    //     //     source: new XYZ({
    //     //         url: 'http://t3.tianditu.com/DataServer?T=cta_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0' // 注记
    //     //     })
    //     // })
    //   ],

    //   // 注意地图控件的写法
    //   controls: defaults().extend([
    //     new FullScreen(),
    //     new ScaleLine(),
    //     new MousePosition(),
    //     new Rotate(),
    //     new Attribution(),
    //   ]),
    //   target: "track_map",
    //   view: new OlView({
    //     center: [0, 0],
    //     zoom: 2,
    //     projection: "EPSG:4326",
    //   }),
    // });

    // var projection = getProjection("EPSG:4326");
    // var projectionExtent = projection.getExtent();
    // var size = getWidth(projectionExtent) / 256;
    // var resolutions = [];
    // for (var z = 2; z < 19; ++z) {
    //   //计算比例尺
    //   resolutions[z] = size / Math.pow(2, z);
    // }

    // 正式服务器上使用
    this.ol2d = new OlMap({
      layers: [
        new OlLayerTile({
          //矢量地图

          source: new WMTS({
            url: "http://47.49.21.207:7001/PGIS_S_TileMapServer/Maps/YX",
            layer: "JX14YGJCIMGL7_L14",
            style: "default",
            matrixSet: "JX14YGJCIMGL7_L14",
            format: "image/png",
            wrapX: true,
            tileGrid: new WMTSTileGrid({
              origin: getTopLeft(projectionExtent),
              //resolutions: res.slice(0, 15),
              resolutions: resolutions,
              matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],
            }),
          }),
        }),
      ],

      // 注意地图控件的写法
      controls: defaults().extend([
        new FullScreen(),
        new ScaleLine(),
        // new MousePosition(),
        new Rotate(),
        new Attribution(),
      ]),
      target: "track_map",
      view: new OlView({
        center: [115.85883507433789, 28.708432053474827],
        projection: projection,
        zoom: 11,
        maxZoom: 15,
        minZoom: 1,
      }),
    });
    //建立地图
    // this.createmap(1); //1为本地
    this.createmap(); //空或其他是外网

    this.parentParameter();

@@ -195,6 +113,93 @@
    this.ol2d.addLayer(this.startPoint);
  },
  methods: {
    createmap(val) {
      if (val == 1) {
        // 本地开发使用;
        this.ol2d = new OlMap({
          layers: [
            new OlLayerTile({
              zIndex: 4,
              title: "影像",
              source: new XYZ({
                url: "https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal", // 行政区划
              }),
            }),
            // ,
            // new OlLayerTile({
            //     zIndex: 5,
            //     title: '道路+中文注记',
            //     source: new XYZ({
            //         url: 'http://t3.tianditu.com/DataServer?T=cta_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0' // 注记
            //     })
            // })
          ],
          // 注意地图控件的写法
          controls: defaults().extend([
            new FullScreen(),
            new ScaleLine(),
            new MousePosition(),
            new Rotate(),
            new Attribution(),
          ]),
          target: "track_map",
          view: new OlView({
            center: [0, 0],
            zoom: 2,
            projection: "EPSG:4326",
          }),
        });
        var projection = getProjection("EPSG:4326");
        var projectionExtent = projection.getExtent();
        var size = getWidth(projectionExtent) / 256;
        var resolutions = [];
        for (var z = 2; z < 19; ++z) {
          //计算比例尺
          resolutions[z] = size / Math.pow(2, z);
        }
      } else {
        // 正式服务器上使用
        this.ol2d = new OlMap({
          layers: [
            new OlLayerTile({
              //矢量地图

              source: new WMTS({
                url: "http://47.49.21.207:7001/PGIS_S_TileMapServer/Maps/YX",
                layer: "JX14YGJCIMGL7_L14",
                style: "default",
                matrixSet: "JX14YGJCIMGL7_L14",
                format: "image/png",
                wrapX: true,
                tileGrid: new WMTSTileGrid({
                  origin: getTopLeft(projectionExtent),
                  //resolutions: res.slice(0, 15),
                  resolutions: resolutions,
                  matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],
                }),
              }),
            }),
          ],

          // 注意地图控件的写法
          controls: defaults().extend([
            new FullScreen(),
            new ScaleLine(),
            // new MousePosition(),
            new Rotate(),
            new Attribution(),
          ]),
          target: "track_map",
          view: new OlView({
            center: [115.85883507433789, 28.708432053474827],
            projection: projection,
            zoom: 11,
            maxZoom: 15,
            minZoom: 1,
          }),
        });
      }
    },
    addEntitys(item, icon, scale, name, type) {
      this[type].getSource().clear();