1

shuishen

2022-09-08 08f2f7bd98da4106c687621f16f24edd344caf87

 src/components/xymap/map.vue

@@ -3,14 +3,18 @@
 * @version:
 * @Author: song
 * @Date: 2021-04-08 15:14:57
 * @LastEditors: song
 * @LastEditTime: 2021-04-24 11:59:43
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-08-31 17:34:59
-->
<template>
    <div id="xymap"></div>
</template>

<script>
import baseLayerImgUrl from '@/assets/baseUrl'
import { Image as ImageLayer } from "ol/layer"
import { ImageStatic } from "ol/source"

import OLCesium from "olcs/OLCesium.js"
import "ol/ol.css"
import OlView from "ol/View.js"
@@ -55,13 +59,6 @@
        const that = this
        const ol2d = new OlMap({
            layers: [
                new OlLayerTile({
                    zIndex: 5,
                    title: "cesium切图",
                    source: new XYZ({
                        url: "/wp/{z}/{x}/{y}.png", // 注记
                    }),
                }),
            ],

            // 注意地图控件的写法
@@ -74,7 +71,8 @@
            ]),
            target: "xymap",
            view: new OlView({
                center: [116.026801, 28.683427],
                center: [115.79647126999, 28.6421878133715], // 经管
                // center: [116.026801, 28.683427], // 师大
                zoom: 16,
                projection: "EPSG:4326",
            }),
@@ -84,6 +82,17 @@

        this.view = view

        baseLayerImgUrl.forEach((item) => {
            ol2d.addLayer(
                new ImageLayer({
                    source: new ImageStatic({
                        url: item.url,
                        imageExtent: item.rectangle //映射到地图的范围
                    })
                })
            )
        })

        ol2d.on("singleclick", (e) => {
            that.$emit('setXyValue', e.coordinate)
        })