173：vue+openlayers 解决国内openstreetmap地图加载不出来的问题（代码示例）

作者： 还是大剑师兰特 ，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，优快云知名博主，深耕openlayers、leaflet、mapbox、cesium，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。

查看本专栏目录 - 本文是第 173个示例

一、示例效果图

二、示例简介

近来写程序，发现openlayers用OSM方式来加载OpenStreetMap地图，一片爆红，瓦片加载不出来。 本示例的目的是介绍演示如何在vue+openlayers中解决OpenStreetMap地图在国内被DNS污染，加载不出来瓦片的问题，通常我们是直接引用OSM，这里采用的是XYZ方式来加载瓦片的路径，最重要是url的路径要稍加修改一点点，就能加载出来OpenStreetMap了。