解决屏幕缩放导致鼠标位置不准确的问题，右侧，切换校区后的显示BUG

shuishen

2023-12-14 e733164e1c779b3aef7245936b9daf7875bf791e

 src/store/modules/openlayerData.js

@@ -33,6 +33,7 @@
import OlSourceOSM from "ol/source/OSM.js";
import OlLayerTile from "ol/layer/Tile.js";
import OlMap from "ol/Map.js";
import { defaults as defaultInteractions } from "ol/interaction";

import XYZ from "ol/source/XYZ";

@@ -42,32 +43,6 @@

import TilegridTileGrid from "ol/tilegrid/TileGrid";

const tileUrl =
  "https://fkxt.jxstnu.edu.cn/changjing/arcgis/rest/services/ksd1/MapServer/tile/{z}/{y}/{x}";
// 坐标原点
const origin = [-400.0, 399.9999999999998];
// 分辨率
const resolutions = [
  0.00019035688046642243, 0.00014276766034981682, 0.00009517844023321122,
  0.00004758922011660561,
];
const fullExtent = [
  112.51302281804038, -0.17416638494176828, 112.76131189483516,
  0.000004509395743004334,
];
const tileGrid = new TilegridTileGrid({
  tileSize: 256,
  origin: origin,
  extent: fullExtent,
  resolutions: resolutions,
});
// 瓦片数据源
const tileArcGISXYZ = new XYZ({
  tileGrid: tileGrid,
  projection: "EPSG:4326",
  url: tileUrl,
});

const openlayerData = {
  state: {
    mapscene: {
@@ -75,20 +50,28 @@
    },
    openlayers: {
      map2D: new OlMap({
        layers: [
          // 瓦片图层
          //   new OlLayerTile({
          //     source: tileArcGISXYZ,
          //   }),
        ],
        view: new OlView({
          // 初始化中心点坐标
          //   center: [112.63716735643777, -0.087080937773012637833],
          // 注意：此处指定缩放级别不能通过zoom来指定，指定了也无效，必须通过resolution来指定
          //   resolution: 0.00014276766034981682,
          projection: "EPSG:4326",
          //   extent: fullExtent,
        interactions: defaultInteractions({
          pinchRotate: false, // 移动端禁止地图旋转
        }),
        layers: [
          /**
             *  new OlLayerTile({
                zIndex: 4,
                title: "影像",
                source: new XYZ({
                  url: "http://t4.tianditu.com/DataServer?T=vec_w&tk=b9031f80391e6b65bd1dd80dcde1b097&x={x}&y={y}&l={z}", // 行政区划
                }),
              }),
              new OlLayerTile({
                zIndex: 5,
                title: "影像",
                source: new XYZ({
                  url: "http://t4.tianditu.com/DataServer?T=cva_w&tk=b9031f80391e6b65bd1dd80dcde1b097&x={x}&y={y}&l={z}", // 行政区划
                }),
              }),
             */
        ],
        view: new OlView({}),
      }),
      map3D: null,