OpenLayers Demo
2017-12-08 10:13
225 查看
在地图上放置一张地图
要包含一个网页的地图,你将需要3件事情:
包括OpenLayers
JavaScript来创建一个简单的地图
应用程序中的地图包含在
<!doctype html> <html lang="en"> <head> <link rel="stylesheet" href="https://openlayers.org/en/v4.6.2/css/ol.css" type="text/css"> <style> .map { height: 400px; width: 100%; } </style> <script src="https://openlayers.org/en/v4.6.2/build/ol.js" type="text/javascript"></script> <title>OpenLayers example</title> </head> <body> <h2>My Map</h2> <div id="map" class="map"></div> <script type="text/javascript"> 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([114.3,30.60]), zoom: 4 }) }); </script> </body> </html>
要包含一个网页的地图,你将需要3件事情:
包括OpenLayers
<div>地图容器
JavaScript来创建一个简单的地图
包括OpenLayers
<script src="https://openlayers.org/en/v4.6.2/build/ol.js" type="text/javascript"></script>
<div>
包含地图
<div id="map" class="map"></div>
应用程序中的地图包含在
<div>HTML元素中。通过这个
<div>,可以通过CSS控制宽度,高度和边界等地图属性。这里是CSS元素,用于使地图高400像素和浏览器窗口一样宽。
<style> .map { height: 400px; width: 100%; } </style>
JavaScript来创建一个简单的地图
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([114.3,30.60]), zoom: 4 }) });
相关文章推荐
- PHP+openlayers实现的一个登陆校园卡网获取消费数据中地点生成个人运动轨迹的小DEMO
- openlayers Demo
- openlayers copy and past(复制粘贴实现)copyfeature.js
- OpenLayers Labeled Features Example
- 使用geoserver+openLayers加载google地图
- [原]openlayers+ext
- openwebrtc 服务端和android客户端demo安装,openwebrtcandroid
- 创建springbootdemo后运行报MongoSocketOpenException错误解决方法
- Create Open ODS View demo
- Oracle PLSQL Demo - 13.游标的各种属性[Found NotFound ISOpen RowCount CURSOR]
- WebGIS(PostgreSQL+GeoServer+OpenLayers)之二 GeoServer安装与数据配置
- openlayers+geojson
- WebGIS(PostgreSQL+GeoServer+OpenLayers)之三 OpenLayers客户端数据显示
- (转)PostGIS+QGIS+GeoServer+OpenLayers实现数据的存储、服务的发布以及地图的显示
- OpenLayers开篇: Hello OpenLayers
- 使用geoserver+openLayers加载google地图
- openlayers+geojson
- 展开/收缩DIV层面板(Open/Close Div Layers)
- AndroidNFC与sim卡测试demo报Asset path '/system/framework/org.simalliance.openmobileapi.jar' does not exis
- 地图的开发研究--基于openlayers+geoserver+tomcat的离线地图-JAVA项目跨域问题的解决