溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
OpenLayers很容易的在網站里放置動態地圖。它能顯示展開圖及從資源中加載地圖標記及矢量數據。它被開發出盡可能的使用所有的地圖信息。并且它是完全免費及開源的.
詳細了解可去它的官網：http://openlayers.org/
簡單使用，如展示一個塊地圖
<!doctype html>
<html lang="en">
<head>
<!--引入openlayers的css-->
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.2.0/css/ol.css" type="text/css">
<style>
.mymap {
height: 400px;
width: 100%;
}
</style>
<!--
如果在老的android平臺及早期IE還需要在openlayers之前引入下面的js來兼容
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList"></script>
-->
<!--引入openlayers的js-->
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.2.0/build/ol.js"></script>
</head>
<body>
<div id="mymap" class="mymap"></div>
<script type="text/javascript">
/*
創建openlayers中的一個map對象。并傳遞一個json對象來配置地圖的一些參數。
target中的值是document中塊標簽的id，用于顯示地圖的容器指定。
layers：地圖圖層的配置，這里指定一個簡單的塊狀地圖圖層。
view：用于指地圖顯示的中心位置及縮放比例還旋轉
*/
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([xxx, xxx]),
zoom: 4
})
});
</script>
</body>
</html>免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
