OpenLayers是一个高性能，功能丰富的库，用于在Web上创建交互式地图。它可以显示任何网页上任何来源加载的地图图块，矢量数据和标记。开发OpenLayers是为了进一步使用各种地理信息。

npm安装

npm install ol

引入文件

<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>

创建dom节点

<div id="map" class="map"></div>

定义样式

必须要定义好长和宽 才能正常使用

<style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>

初始化

var map = new ol.Map({
    controls: ol.control.defaults({
        attribution: false,
        rotate: false,
        zoom: false
    }),
    target: 'container',
    layers: [
        new ol.layer.Tile({
            // source: new ol.source.OSM()  这个使用openstreemap 国内可用，但是无法将国内显示改为英文
            source: new ol.source.TileImage({url: 'http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i380072576!3m8!2szh-EN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0!5m1!1e0'}) //谷歌地图支持中国地区显示英文和中文，其他国家显示英文和当地国家语言
        })
    ],
    view: new ol.View({
        center: ol.proj.fromLonLat(centerPoint),
        zoom: 10
    })
});

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://fly63.com/nav/2703