openlayers

openlayers 介绍

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})});链接: http://www.fly63.com/nav/2703

网站地址:https://openlayers.org

GitHub:https://github.com/openlayers/openlayers

网站描述:一个高性能，功能丰富的库

openlayers

官方网站：https://openlayers.org

小编说

以上是编程之家为你收集整理的openlayers全部内容。

如果觉得编程之家网站内容还不错，欢迎将编程之家推荐给好友。