【NSBD】——My first Map

    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 the OpenLayers,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 

        It means that OpenLayers is an API, that provides you with tools to develop your own web maps.

     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?