守押地图 封装

liuyg

2021-10-26 0e1bb11ad7a6c9d090118614edf12f5fae6a09e4

守押地图   封装

 src/components/map/main.vue

@@ -92,51 +92,72 @@
    };
  },
  mounted() {
    //建立地图
    // this.createmap(1); //1为本地
    this.createmap(); //空或其他是外网

    this.parentParameter();

    window.ol2d = this.ol2d;

    var view = this.ol2d.getView();

    view.setCenter([115.85883507433789, 28.708432053474827]);

    view.setZoom(13);

    this.ol2d.addLayer(this.gunAddlayer);
    this.ol2d.addLayer(this.peopleAddlayer);
    this.ol2d.addLayer(this.carAddlayer);
    this.ol2d.addLayer(this.peopleLineAddlayer);
    this.ol2d.addLayer(this.startPoint);
  },
  methods: {
    createmap(val) {
      if (val == 1) {
    // 本地开发使用;
    // this.ol2d = new OlMap({
    //   layers: [
        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: 4,
    //       title: "影像",
            //     zIndex: 5,
            //     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);
    // }

            //         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: [
@@ -177,24 +198,8 @@
        minZoom: 1,
      }),
    });

    this.parentParameter();

    window.ol2d = this.ol2d;

    var view = this.ol2d.getView();

    view.setCenter([115.85883507433789, 28.708432053474827]);

    view.setZoom(13);

    this.ol2d.addLayer(this.gunAddlayer);
    this.ol2d.addLayer(this.peopleAddlayer);
    this.ol2d.addLayer(this.carAddlayer);
    this.ol2d.addLayer(this.peopleLineAddlayer);
    this.ol2d.addLayer(this.startPoint);
      }
  },
  methods: {
    addEntitys(item, icon, scale, name, type) {
      this[type].getSource().clear();