【NSBD】——My first Map
来源:互联网 发布:室内装修平面设计软件 编辑:程序博客网 时间:2024/05/18 22:51
Recently,In my project,we have to make a map by using the technology named OpenLayers.So I begin to learn openplayers on the Internet.
On the Internet ,I find a book namedOpenLayers beginers guide.pdf,and the web sites ——"http://openlayers.org/" ,some API documents aboutOpenLayers.
In this article , I want to introduce some simple things about theOpenLayers,it include three questions:what is it ? why we use it ? and how to use it ?
1、What is OpenLayers?
OpenLayers is an open source , client side JavaScript library for making interactive web maps, viewable in nearly any web browser.
(1) Client side
If you want to make aOpenLayers,you only need to things, the first thing is the code itself ,and the second thing is a web browser.you can use it on your own computer.
(2)Library
2、Why we use it ?
It can help you create powerful web-mapping application very easily.So it's easy ,powerful and fun.
(1)easy
you don't need to have the knowledge of GIS(Geographic Information System).OpenLayers is not tied to any proprietary technology or company, so you don't have to worry so much about your application breaking.
(2)Powerful
OpenLayers allows you to build entire mapping applications from the ground up, with the ability to customize every aspect of your map—layers, controls, events, etc. You can use a multitude of different map server backends together, including a powerful vector layer. And on the vector layers,you can also make markers.
3、How to use it ?
You only have to use a text editor such as NotePad++ to create a HTML file .In this HTML there has three steps to develop your own map easily.
first ,you should import the css and Javascript about the openlayers.
<link rel="stylesheet" href="http://openlayers.org/en/v3.17.1/css/ol.css" type="text/css"> <style> .map { height: 400px; width: 100%; } </style> <script src="http://openlayers.org/en/v3.17.1/build/ol.js" type="text/javascript"></script>
second ,you have to create a <div> as the map container.
<div id="map" class="map"></div>
<style> .map { height: 400px; width: 100%; } </style>
third,write the JavaScript code to create a simple map
var map = new ol.Map({ target: 'map', //To attach the map object to the <div>, the map object takes a target into arguments. The value is the id of the <div>: layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([37.41, 8.82]), //initialize the center position and the zoom size zoom: 4 }) });
finally ,our map is created successfully ,look at this picture,are you feel it's so easy?
- 【NSBD】——My first Map
- 【NSBD】——Jquery tagsinput标签
- 【NSBD】——Combotree 加载数据
- 【NSBD】——系统导入导出
- 【NSBD】——导入导出代码实现
- Ruby—My First Real Ruby Website
- 【NSBD】——二维码的生成与打印
- 【NSBD】——datagrid多次选中记录问题
- HDU 3706——Second My Problem First
- My first
- MY FIRST
- my first
- my First
- My First !
- MY FIRST
- My First
- MY First
- My First
- strcmp实现以及为什么要通过unsigned char转换
- java io文件读写的总结
- HDU.5128 The E-pang Palace
- Struts2实现文件上传
- Java 异常
- 【NSBD】——My first Map
- Oracle 函数
- 数据结构实验之二叉树的建立与遍历
- 实现一个函数,把字符数组中的每个空格替换成“%20”。 例如输入“we are happy.”,则输出“we%20are%20happy”
- Corn Fields(poj3254)状态压缩dp
- Cookie到底是干什么的?
- maven 部署到tomcat6/tomcat7
- [Android] Qt安卓教程(1): 从Qt5.1开始
- 风雨见彩虹