使用 OpenLayer 在 Vuejs 中加载 WMS

Question

>我正在尝试从 Vue.js 中的本地主机地理服务器读取 WMS 图层。我在与 vue.js 不同的端口上运行地理服务器。

我应该如何在 Vue JS 中加载我的 WMS 层，如以下示例所示：https://vuelayers.github.io/#/docs/component/tile-layer

<template>
<vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true" data-projection="EPSG:4326" style="height: 400px">
<vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>
<vl-layer-tile>
<vl-source-sputnik></vl-source-sputnik>
</vl-layer-tile>
<vl-layer-tile id="wmts">
<vl-source-wmts :attributions="attribution" :url="url" :layer-name="layerName" :matrix-set="matrixSet" :format="format" 
:style-name="styleName"></vl-source-wmts>
</vl-layer-tile>
</vl-map>
</template>
//////////////////////////////// For WMS SOURCES 
<script>
export default {
data () {
return { 
zoom: 4,
center: [50, 40],
rotation: 0,
cmp: 'vl-source-wms',
url: 'http://localhost:8081/geoserver/cite/wms',
layers: 'cite:vnm_polbnda_adm3_2014_pdc',
extParams: { TILED: true },
serverType: 'geoserver',
}
},
}
</script>

在我的浏览器中：从源"http://localhost:3000"访问 XMLHttpRequest 的"http://192.168.1.23:3000/sockjs-node/info?t=1578388235952"已被 CORS 策略阻止：当请求的凭据模式为"include"时，响应中"访问控制-允许源"标头的值不得是通配符"*"。由 XMLHttpRequest 发起的请求的凭据模式由 withCredentials 属性控制。

Answer 1

您遇到了 CORS 问题(CORS 代表跨域资源共享(。您需要在服务器上启用 CORS。

devServer: {
...
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
"Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
}
}

可以在此处找到一些启用 CORS 的好资源：

https://scotch.io/courses/build-an-online-shop-with-vue/enabling-cors

如果你有一个PHP后端，你可以只包含以下标头：

header(“Access-Control-Allow-Origin: *”);