nsgk_mobile/src/components/Map/MapGisLyDrawing.vue

<template>
  <div>
    <p class="fuTitle">地块位置</p>
    <div id="full-screen-acceptance" style="width: 100%;height:45vh;position:relative;">
        <div :id=this.uuidMap style="width: 100%;height: 100%"></div>
      </div>
    <div id="info" style="display: none"></div>
  </div>
</template>

<script>
  import {getQueryLand} from "@/api/homesteadSurvey/zjdzd";
  import {getByLyZjddm } from "@/api/onlineHome/homestead/circulation";
import $ from "jquery";

export default {
  components: {
    getQueryLand,getByLyZjddm
  },
  data() {
    return {
      uuidMap: this.guidProduct(),
      map:this.guidProduct(),
    };
  },
  props: ['theGeom','message'],
  methods: {
    //地图加载
    guidProduct(){
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        var r = Math.random() * 16 | 0,
          v = c == 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
      });
    },
    //地图查看
    drawingLyPaceCountryDarw() {
      //加载地图编辑
      var that = this;
      getByLyZjddm(that.message).then(qlrRes => {
        document.getElementById(that.uuidMap).innerHTML = '';
        var hc_land;
        var projection = new ol.proj.Projection({
          //地图投影类型
          code: "EPSG:3857",
          units: "degrees",
          //extent:extent
        });

        var aerial = new ol.layer.Tile({
          source: new ol.source.XYZ({
            url: "http://t{0-7}.tianditu.com/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=cc4aba6e967096098249efa069733067",
          }),
          isGroup: true,
          name: "卫星影像图",
          resolution:Math.random() * 0.00000001
        });

        var yingxzi = new ol.layer.Tile({
          source: new ol.source.XYZ({
            url: "http://t{0-7}.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067",
          }),
          isGroup: true,
          name: "天地图文字标注--卫星影像图",
          resolution:Math.random() * 0.00000001
        });
        //加载地图
        that.map = new ol.Map({
          controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]), //隐藏放大缩小按钮
          layers: [aerial, yingxzi],
          projection: projection,
          target: that.uuidMap,
          view: new ol.View({
            //center: ol.proj.fromLonLat([115.452752, 31.789033]),
            zoom: 15,
            minZoom: 5, //地图缩小限制
            maxZoom: 18.3, //地图放大限制
          }),
          interactions: ol.interaction.defaults({
            pinchRotate: false // 移动端禁止地图旋转
          }),
          //view: new ol.View({ol.view.getResolution() + Math.random() * 0.00000001)});//随机数缩放实现刷新
        });
        //图层查询定位开始 ---------start
      hc_land = new ol.layer.Vector({
        title: "add Layer",
        source: new ol.source.Vector({
          projection: projection,
          features: new ol.format.GeoJSON().readFeatures("{\n" +
            "    \"type\": \"Feature\",\n" +
            "    \"geometry\":" + qlrRes.data.theGeom + "}"),
        }),
        resolution:Math.random() * 0.00000001,
        style: new ol.style.Style({
          fill: new ol.style.Fill({
            //矢量图层填充颜色，以及透明度
            color: "rgba(204, 255, 204,0.3)",
          }),
          stroke: new ol.style.Stroke({
            //边界样式
            color: "#CCFF66",
            width: 3,
          }),
        }),
      });
      that.map.addLayer(hc_land);
      var maxXMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxX;
      var maxYMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxY;
      var minXMap = hc_land.values_.source.featuresRtree_.rbush_.data.minX;
      var minYMap = hc_land.values_.source.featuresRtree_.rbush_.data.minY;
      //定位查询位置
      var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置
      that.map.getView().animate({
        // 只设置需要的属性即可
        center: center, // 中心点
        zoom: 16.9, // 缩放级别
        rotation: undefined, // 缩放完成view视图旋转弧度
        duration: 1000, // 缩放持续时间，默认不需要设置
        resolution:Math.random() * 0.00000001,
      });
    });
    },
  },
  watch: {},
};
</script>

<style scoped>
#that.message {
  width: 100%;
  height: 100%;
}
.fuTitle {
  border-top: 1px solid #e9e9e9;
  text-align: center;
  padding: 10px 0px 0px 0px;
  font-size: 36px;
  color: #999;
}
.ant-btn-red {
  position: relative;
  display: inline-block;
  background: #D0EEFF;
  border: 1px solid #99D3F5;
  border-radius: 4px;
  padding: 4px 12px;
  overflow: hidden;
  color: #1E88C7;
  text-decoration: none;
  text-indent: 0;
  line-height: 20px;

}
#land-btn-wrap{
  position: absolute;
  right: 3%;
  top: 5%;
  z-index: 2000;
}
</style>