Working With OpenLayers（Section 1: Creating a Basic Map）

時間 2020-07-10

標籤 working openlayers section creating basic map 简体版

原文原文鏈接

Working With OpenLayerscss

This module walks through the basics of creating web maps with OpenLayers. The reader will learn how to create an OpenLayers map from scratch, overlay data from various sources, and work with vector feature editing and styling.html

In this module you will:

Learn how to create a map from scratch with OpenLayers.
· Learn how to overlay various types of data on different base layers.
· Learn how to edit and style vector data client-side.

Before you start:

· Ensure that Module 4: Creating a Base Map has been completed.
· It is recommended (but not required) to use Firefox and install Firebug.

Links to have on hand:

· OpenLayers - http://openlayers.org

· OpenLayers API Documentation - http://dev.openlayers.org/apidocs
OpenLayers Examples - http://openlayers.org/dev/doc/examples

Section 1: Creating a Basic Map

Navigate to the following directory:

C:\Program Files\GeoServer 1.6.5\data_dir\www
Create a new file called ol-basics.html.
1. Open ol-basics.html in the text editor of your choice and enter in the following text:

<html>web

<head>api

<title>Basic Map</title>app

#map_container {ui

width: 512px;this

height: 256px;url

border: 1px solid gray;code

}

</style>

</script>

</head>

<body>

<h2>Basic Map</h2>

// your application code here

</script>

</body>

</html>

Save changes to ol‑basics.html.
1. Visit the following url in the web browser:

http://localhost:8910/geoserver/www/ol-basics.html

2. Open ol-basics.html.
1. Locate the line 「// your application code here」 and replace it with the following:
var map = new OpenLayers.Map("map_container");

var wms = new OpenLayers.Layer.WMS(

"OpenLayers WMS",

"http://labs.metacarta.com/wms/vmap0",

{layers: "basic"}

);

map.addLayer(wms);

map.zoomToMaxExtent();

4. Save changes to ol-basics.html.

5. Return to the web browser and refresh the page. (F5)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。