[link] geoext fixed link & reformating
parent
e3c78317cf
commit
54cbfe30f1
|
@ -1,5 +1,5 @@
|
|||
:Author: Seth Girvin
|
||||
:Reviewer:
|
||||
:Reviewer:
|
||||
:Version: osgeolive13.0
|
||||
:License: Creative Commons Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)
|
||||
|
||||
|
@ -13,16 +13,25 @@
|
|||
A JavaScript Toolkit for Rich Web Mapping Applications
|
||||
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
||||
|
||||
GeoExt is Open Source and enables building desktop-like GIS applications through the web. It is a JavaScript framework that combines the GIS functionality of
|
||||
`OpenLayers <https://openlayers.org/>`_ with the user interface of the `ExtJS <https://www.sencha.com/products/extjs/>`_ library provided by `Sencha <https://www.sencha.com>`_.
|
||||
GeoExt is Open Source and enables building desktop-like GIS applications through
|
||||
the web. It is a JavaScript framework that combines the GIS functionality of
|
||||
`OpenLayers <https://openlayers.org/>`_ with the user interface of the `ExtJS
|
||||
<https://www.sencha.com/products/extjs/>`_ library provided by `Sencha
|
||||
<https://www.sencha.com>`_.
|
||||
|
||||
User interface components include a map panel, layer tree panel, feature grid, and an overview map. GeoExt components can be used just like any other ExtJS component
|
||||
and can be easily configured and extended. Lower level classes are also available allowing OpenLayers features and layers to be used as ExtJS data models, and for various
|
||||
map layer types to be serialized.
|
||||
User interface components include a map panel, layer tree panel, feature grid,
|
||||
and an overview map. GeoExt components can be used just like any other ExtJS
|
||||
component and can be easily configured and extended. Lower level classes are
|
||||
also available allowing OpenLayers features and layers to be used as ExtJS data
|
||||
models, and for various
|
||||
map layer types to be serialized.
|
||||
|
||||
GeoExt3 is dual licensed. The license you choose depends on the license of the framework ExtJS you use with it.
|
||||
If you are using the GPL v3 version of the ExtJS framework you will use it under GPLv3. If you own a Sencha ExtJS Commercial License, you
|
||||
have the right to use GeoExt3 under the BSD License.
|
||||
GeoExt is dual licensed. The license you choose depends on the license of the
|
||||
framework ExtJS you use with it.
|
||||
If you are using the GPL v3 version of the ExtJS framework you will use it under
|
||||
GPLv3.
|
||||
If you own a Sencha ExtJS Commercial License, you have the right to use GeoExt
|
||||
under the BSD License.
|
||||
|
||||
@SCREENSHOT_geoext@
|
||||
|
||||
|
@ -39,14 +48,17 @@ Core Features
|
|||
|
||||
* Data Models and Stores
|
||||
|
||||
* Integration of the OpenLayers data model with the ExtJS data model enabling sorting and filtering of features
|
||||
using ExtJS components
|
||||
* Integration of the OpenLayers data model with the ExtJS data model enabling
|
||||
sorting and filtering of features using ExtJS components
|
||||
* ExtJS stores and models for OpenLayers features and layers
|
||||
|
||||
* Miscellaneous
|
||||
|
||||
* Integration with `MapFish Print <http://mapfish.github.io/mapfish-print-doc/>`_ and
|
||||
`GeoServer Printing Module <https://docs.geoserver.org/latest/en/user/extensions/printing/index.html>`_
|
||||
* Integration with
|
||||
|
||||
* `MapFish Print <http://mapfish.github.io/mapfish-print-doc/>`_
|
||||
* and `GeoServer Printing Module <https://docs.geoserver.org/latest/en/user/extensions/printing/index.html>`_
|
||||
|
||||
* Layer Serializers (WMS, WMTS, XYZ)
|
||||
|
||||
Details
|
||||
|
@ -54,19 +66,26 @@ Details
|
|||
|
||||
**Website:** @WEB_geoext@
|
||||
|
||||
**License:** GPLv3 or BSD License dependent on ExtJS license - see `License <https://github.com/geoext/geoext3/blob/master/LICENSE>`_
|
||||
and `License FAQ <https://github.com/geoext/geoext3/blob/master/LICENSE-FAQ.md>`_
|
||||
**License:** GPLv3 or BSD License dependent on ExtJS license
|
||||
|
||||
* see `License <https://github.com/geoext/geoext/blob/master/LICENSE>`_
|
||||
* and `License FAQ <https://github.com/geoext/geoext/blob/master/LICENSE-FAQ.md>`_
|
||||
|
||||
**Software Version:** |version-geoext|
|
||||
|
||||
**API Interface:** JavaScript
|
||||
|
||||
**Support:** Mailing list https://www.geoext.org/cgi-bin/mailman/listinfo/users and https://stackoverflow.com/questions/tagged/geoext3
|
||||
**Support:** Mailing lists
|
||||
|
||||
* https://www.geoext.org/cgi-bin/mailman/listinfo/users
|
||||
* and https://stackoverflow.com/questions/tagged/geoext
|
||||
|
||||
|
||||
@VMDK_geoext@
|
||||
@QUICKSTART_geoext@
|
||||
|
||||
.. presentation-note
|
||||
GeoExt is Open Source and enables building desktop-like GIS applications through the web. It is a JavaScript framework that combines the GIS functionality of
|
||||
OpenLayers with the user interface of the ExtJS library provided by Sencha.
|
||||
GeoExt is Open Source and enables building desktop-like GIS applications
|
||||
through the web. It is a JavaScript framework that combines the GIS
|
||||
functionality of OpenLayers with the user interface of the ExtJS library
|
||||
provided by Sencha.
|
||||
|
|
|
@ -13,9 +13,13 @@
|
|||
@NAME_geoext@ Quickstart
|
||||
********************************************************************************
|
||||
|
||||
GeoExt is a JavaScript library that runs in the browser, it combines and enhances the ExtJS framework and OpenLayers library.
|
||||
This quick start details the steps to create a rich web application using GeoExt components in less than 200 lines of code.
|
||||
We will be using the installed MapServer web services on OSGeoLive a MapServer to supply map layers to the application. Completing the steps below will result in the demo GeoExt application at http://localhost/geoext/.
|
||||
GeoExt is a JavaScript library that runs in the browser, it combines and
|
||||
enhances the ExtJS framework and OpenLayers library.
|
||||
This quick start details the steps to create a rich web application using GeoExt
|
||||
components in less than 200 lines of code.
|
||||
We will be using the installed MapServer web services on OSGeoLive a MapServer
|
||||
to supply map layers to the application. Completing the steps below will result
|
||||
in the demo GeoExt application at http://localhost/geoext/.
|
||||
|
||||
.. contents:: Contents
|
||||
:local:
|
||||
|
@ -23,7 +27,9 @@ We will be using the installed MapServer web services on OSGeoLive a MapServer t
|
|||
Create an HTML page
|
||||
===================
|
||||
|
||||
In this step we will set-up an empty HTML page which will contain the application. We'll use the text editor FeatherPad installed on OSGeoLive to create a new HTML file at ``/var/www/html/geoext/demo.html``
|
||||
In this step we will set-up an empty HTML page which will contain the
|
||||
application. We'll use the text editor FeatherPad installed on OSGeoLive to
|
||||
create a new HTML file at ``/var/www/html/geoext/demo.html``
|
||||
|
||||
#. Open FeatherPad from the command line with elevated permissions, so you can save the file, using System Tools > QTerminal and then running run the command below:
|
||||
|
||||
|
@ -31,9 +37,13 @@ In this step we will set-up an empty HTML page which will contain the applicatio
|
|||
|
||||
sudo featherpad
|
||||
|
||||
#. Next paste in the HTML below, and save the file as ``/var/www/html/geoext/demo.html``. The file contains links to the ExtJS and OpenLayers JavaScript libraries, and two CSS files used to style ExtJS and OpenLayers components.
|
||||
#. Next paste in the HTML below, and save the file as
|
||||
``/var/www/html/geoext/demo.html``. The file contains links to the ExtJS and
|
||||
OpenLayers JavaScript libraries, and two CSS files used to style ExtJS and
|
||||
OpenLayers components.
|
||||
|
||||
We will use the ``Ext.Loader`` class to load in GeoExt JavaScript source files. These are all in the ``src`` folder in ``/var/www/html/geoext/``.
|
||||
We will use the ``Ext.Loader`` class to load in GeoExt JavaScript source files.
|
||||
These are all in the ``src`` folder in ``/var/www/html/geoext/``.
|
||||
|
||||
.. code-block:: html
|
||||
|
||||
|
@ -66,15 +76,18 @@ In this step we will set-up an empty HTML page which will contain the applicatio
|
|||
|
||||
You should now be able to view an empty HTML page in Firefox at http://localhost/geoext/demo.html
|
||||
|
||||
All the JavaScript in the following sections should be pasted after the ``// all JavaScript application code should go here`` comment in the
|
||||
``Ext.onReady`` function. Placing code here ensures the JavaScript libraries have been loaded before running any custom JavaScript code.
|
||||
All the JavaScript in the following sections should be pasted after the ``// all
|
||||
JavaScript application code should go here`` comment in the ``Ext.onReady``
|
||||
function. Placing code here ensures the JavaScript libraries have been loaded
|
||||
before running any custom JavaScript code.
|
||||
|
||||
Configure OpenLayers objects
|
||||
============================
|
||||
|
||||
Next we will configure some OpenLayers objects used by the application.
|
||||
Next we will configure some OpenLayers objects used by the application.
|
||||
|
||||
#. First lets create a map tile layer using OpenStreetMap, and some WMS layers that are available from the MapServer Itasca demo on OSGeoLive.
|
||||
#. First lets create a map tile layer using OpenStreetMap, and some WMS layers
|
||||
that are available from the MapServer Itasca demo on OSGeoLive.
|
||||
|
||||
.. code-block:: js
|
||||
|
||||
|
@ -110,7 +123,9 @@ Next we will configure some OpenLayers objects used by the application.
|
|||
name: 'Highways'
|
||||
});
|
||||
|
||||
#. Next we are going to add in a WFS vector layer - this is a little more complicated, but follows the same approach of creating a source and then a layer as the previous layers:
|
||||
#. Next we are going to add in a WFS vector layer - this is a little more
|
||||
complicated, but follows the same approach of creating a source and then a
|
||||
layer as the previous layers:
|
||||
|
||||
.. code-block:: js
|
||||
|
||||
|
@ -130,8 +145,9 @@ Next we will configure some OpenLayers objects used by the application.
|
|||
name: 'Airports'
|
||||
});
|
||||
|
||||
#. Now we are going to create our OpenLayers map object configured with the layers we just created. We will also set the center
|
||||
and zoom level of the map, and add in a select interaction so we can select features in our vector layer.
|
||||
#. Now we are going to create our OpenLayers map object configured with the
|
||||
layers we just created. We will also set the center
|
||||
and zoom level of the map, and add in a select interaction so we can select features in our vector layer.
|
||||
|
||||
.. code-block:: js
|
||||
|
||||
|
@ -151,9 +167,12 @@ Next we will configure some OpenLayers objects used by the application.
|
|||
Work with GeoExt components
|
||||
===========================
|
||||
|
||||
Now the map and layers have been configured we are going to create and configure our GeoExt components.
|
||||
Now the map and layers have been configured we are going to create and configure
|
||||
our GeoExt components.
|
||||
|
||||
#. First of all we will create a ``GeoExt.component.Map``. This uses the OpenLayers map we created, and will be positioned in the 'center' region of our application.
|
||||
#. First of all we will create a ``GeoExt.component.Map``. This uses the
|
||||
OpenLayers map we created, and will be positioned in the 'center' region of
|
||||
our application.
|
||||
|
||||
.. code-block:: js
|
||||
|
||||
|
@ -163,10 +182,13 @@ Now the map and layers have been configured we are going to create and configure
|
|||
});
|
||||
|
||||
|
||||
#. Next we will create a layer tree component. The tree has its own data store - ``GeoExt.data.store.LayersTree``, which we will fill
|
||||
with layers from our OpenLayers map. The store will then be used to populate our tree panel. We will also add in a plugin to the
|
||||
tree to allow the map layer order to be changed by dragging and dropping the layers. The ``flex`` property causes the tree panel
|
||||
to fill up all available space in its region of the screen.
|
||||
#. Next we will create a layer tree component. The tree has its own data store -
|
||||
``GeoExt.data.store.LayersTree``, which we will fill
|
||||
with layers from our OpenLayers map. The store will then be used to populate
|
||||
our tree panel. We will also add in a plugin to the
|
||||
tree to allow the map layer order to be changed by dragging and dropping the
|
||||
layers. The ``flex`` property causes the tree panel
|
||||
to fill up all available space in its region of the screen.
|
||||
|
||||
.. code-block:: js
|
||||
|
||||
|
@ -185,8 +207,9 @@ Now the map and layers have been configured we are going to create and configure
|
|||
}
|
||||
});
|
||||
|
||||
#. We are also going to create a grid component to display the attributes of features in our WFS layer.
|
||||
Similar to the layer tree store and tree panel, we create a ``GeoExt.data.store.Features`` store and a grid panel.
|
||||
#. We are also going to create a grid component to display the attributes of
|
||||
features in our WFS layer.
|
||||
Similar to the layer tree store and tree panel, we create a ``GeoExt.data.store.Features`` store and a grid panel.
|
||||
|
||||
.. code-block:: js
|
||||
|
||||
|
@ -215,8 +238,10 @@ Now the map and layers have been configured we are going to create and configure
|
|||
height: 300
|
||||
});
|
||||
|
||||
#. Our final GeoExt component is an overview map - ``GeoExt.component.OverviewMap``.
|
||||
We will configure this to display the OpenStreetMap layer we created earlier, and place it in an ExtJS panel.
|
||||
#. Our final GeoExt component is an overview map -
|
||||
``GeoExt.component.OverviewMap``.
|
||||
We will configure this to display the OpenStreetMap layer we created earlier,
|
||||
and place it in an ExtJS panel.
|
||||
|
||||
.. code-block:: js
|
||||
|
||||
|
@ -238,7 +263,9 @@ Now the map and layers have been configured we are going to create and configure
|
|||
Create a viewport
|
||||
=================
|
||||
|
||||
The final step in creating our application is to create a viewport - a container representing the application which will display all the components we created above.
|
||||
The final step in creating our application is to create a viewport - a container
|
||||
representing the application which will display all the components we created
|
||||
above.
|
||||
|
||||
.. code-block:: js
|
||||
|
||||
|
@ -260,7 +287,8 @@ The final step in creating our application is to create a viewport - a container
|
|||
]
|
||||
});
|
||||
|
||||
You should now be able to refresh the link http://localhost/geoext/demo.html in your browser and see a complete GeoExt application similar to the image below.
|
||||
You should now be able to refresh the link http://localhost/geoext/demo.html in
|
||||
your browser and see a complete GeoExt application similar to the image below.
|
||||
|
||||
.. image:: /images/projects/geoext/geoext_quickstart.png
|
||||
:scale: 100 %
|
||||
|
@ -269,9 +297,9 @@ You should now be able to refresh the link http://localhost/geoext/demo.html in
|
|||
What's next?
|
||||
============
|
||||
|
||||
* The `GeoExt homepage <https://geoext.github.io/geoext3/>`_ contains full `API documentation <https://geoext.github.io/geoext3/v3.1.0/docs>`_
|
||||
and examples
|
||||
* A `GeoExt workshop <https://github.com/geoext/geoext3-ws>`_ details all the steps for configuring and using
|
||||
GeoExt3 in your ExtJS applications
|
||||
* The `GeoExt homepage <https://geoext.github.io/geoext/>`_ contains full `API
|
||||
documentation <https://geoext.github.io/geoext/v3.1.0/docs>`_ and examples
|
||||
* A `GeoExt workshop <https://github.com/geoext/geoext3-ws>`_ details all the
|
||||
steps for configuring and using GeoExt3 in your ExtJS applications
|
||||
* The `OpenLayers v4.6.5 API docs <https://openlayers.org/en/v4.6.5/apidoc>`_
|
||||
* The `ExtJS 6.2.0 API docs <https://docs.sencha.com/extjs/6.2.0/>`_
|
||||
|
|
Loading…
Reference in New Issue