选择要编辑的要素#

Selecting a feature to edit

中文

正如我们在设计 ShapeEditor 这一节中讨论的那样，GeoDjango 内置的地图小部件一次只能显示一个特征。为了在地图上显示所有 shapefile 的特征，我们将必须直接使用 OpenLayers，并结合瓦片地图服务器 (Tile Map Server) 和自定义基于 AJAX 的点击事件处理程序。基本的工作流程如下所示：

让我们从实现瓦片地图服务器 (Tile Map Server) 开始，然后看看如何使用 OpenLayers、结合自定义点击事件处理程序和一些服务器端 AJAX 代码，以响应用户点击地图时的操作。

英文

As we discussed in the section on designing the ShapeEditor, GeoDjango’s built-in map widgets can only display a single feature at a time. In order to display a map with all the shapefile’s features on it, we will have to use OpenLayers directly, along with a Tile Map Server and a custom AJAX-based click handler. The basic workflow will look like this:

Let’s start by implementing the Tile Map Server, and then see what’s involved in using OpenLayers, along with a custom click-handler and some server-side AJAX code, to respond when the user clicks on the map.

使用 OpenLayers 显示地图#

Using OpenLayers to display the map

中文

现在我们的 TMS 服务器已经运行起来了，我们可以使用 OpenLayers 库在 slippy map 中显示渲染的地图瓦片。这个 slippy map 将用于我们的 edit_shapefile 视图函数，以显示 Shapefile 的所有要素，允许用户选择要编辑的要素。

让我们实现 edit_shapefile 视图。编辑 editor 应用的 urls.py 模块，并添加以下高亮部分:

urlpatterns = patterns('shapeEditor.editor.views',
        url(r'^$', 'list_shapefiles'),
        url(r'^import$', 'import_shapefile'),
        url(r'^export/(?P<shapefile_id>\d+)$', 'export_shapefile'),
        url(r'^edit/(?P<shapefile_id>\d+)$', 'edit_shapefile'),
)

这样，任何符合 /editor/edit/N 形式的 URL 都会被传递给 edit_shapefile() 视图函数。

接下来，实现该函数。编辑 editor 应用的 views.py 模块，并添加以下代码:

def edit_shapefile(request, shapefile_id):
    try:
        shapefile = Shapefile.objects.get(id=shapefile_id)
    except Shapefile.DoesNotExist:
        return HttpResponseNotFound()

    tms_url = "http://"+request.get_host()+"/tms/"

    return render(request, "select_feature.html",
                {'shapefile': shapefile,
                'tms_url': tms_url})

可以看到，我们获取了目标 Shapefile 对象，计算访问 TMS 服务器的 URL，然后将它们传递给名为 select_feature.html 的模板。真正的地图渲染将在该模板中完成。

现在，我们需要编写该模板。在 editor 应用的 templates 目录下创建一个名为 select_feature.html 的新文件，然后输入以下内容：

<html>
    <head>
        <title>ShapeEditor</title>
        <style type="text/css">
            div#map {
                width: 600px;
                height: 400px;
                border: 1px solid #ccc;
            }
        </style>
    </head>
    <body>
        <h1>Edit Shapefile</h1>
        <b>Please choose a feature to edit</b>
        <br/>
        <div id="map" class="map"></div>
        <br/>
        <div style="margin-left:20px">
            <button type="button"
                onClick='window.location="/editor";'>
                Cancel
            </button>
        </div>
    </body>
</html>

这只是模板的基本框架，但它已经可以使用了。在终端窗口运行 Django 服务器（python manage.py runserver），然后访问 http://127.0.0.1:8000/editor，点击某个 Shapefile 旁的 Edit 超链接，你应该会看到 选择要素页面 的基本框架:

.. image:: ./img/463-0.png

align:

center

请注意，我们在 HTML 中创建了一个 <div> 元素用于存放 OpenLayers 地图，并使用 CSS 设定了地图的固定大小和边框。但目前地图仍然不会显示，因为我们还没有编写 JavaScript 代码来启动 OpenLayers。接下来，让我们来实现这一部分。

在模板的 <head> 部分添加以下 <script> 标签:

<script src="http://openlayers.org/api/OpenLayers.js">
</script>
<script type="text/javascript">
    function init() {}
</script>

同时，将 <body> 标签修改为:

<body onload="init()">

这里包含两个 <script> 标签：第一个用于从 http://openlayers.org 加载 OpenLayers.js 库，第二个用于编写我们即将实现的 JavaScript 代码，以创建地图。此外，我们定义了一个 init() JavaScript 函数，它会在页面加载时被调用。

接下来，替换 function init() {} 这一行代码，改为以下内容：

function init() {
    map = new OpenLayers.Map('map',
                            {maxResolution: 0.703125,
                            numZoomLevels: 11});
    layer = new OpenLayers.Layer.TMS('TMS',
                            "{{ tms_url }}",
                            {serviceVersion: "1.0",
                            layername: "{{ shapefile.id }}",
                            type: 'png'});
    map.addLayer(layer);
    map.zoomToMaxExtent();
}

即使你没有使用过 JavaScript，这段代码的逻辑也相对清晰： - OpenLayers.Map 对象创建一个 slippy map。 - OpenLayers.Layer.TMS 对象定义了一个从 TMS 服务器获取地图数据的图层。 - 然后我们将该图层添加到地图，并将地图缩放到最大范围，以便用户可以看到整个世界地图。

注意： - OpenLayers.Map 需要传递 div 的 ID 以确定地图的容器，并可以接受一个选项字典： - maxResolution 指定地图的最大分辨率。 - numZoomLevels 设定地图的缩放级别数。 - OpenLayers.Layer.TMS 需要传递 TMS 服务器的 URL`（由 Python 视图函数传递给模板），还需要 `Tile Map Service 版本以及 `layername`（即 Shapefile 的记录 ID）。

到此，我们已经完成了 基本的 slippy map 实现！保存更改，并确保 Django 服务器正在运行。访问 http://127.0.0.1:8000/editor，点击某个 Shapefile 旁的 Edit 超链接，你应该会看到工作中的 slippy map:

.. image:: ./img/465-0.png

align:

center

你现在可以进行 缩放、平移、点击 交互。当然，目前的交互功能仍然有限（除了 Cancel 按钮），但我们已经成功集成了 Tile Map Server 与 OpenLayers JavaScript 组件！ 🎉

备注

如果地图未能正确显示怎么办？

如果地图没有正确显示，可能有多个原因： - 首先，检查 Django 服务器日志，任何 Python 异常都会在那里打印出来。 - 如果 Django 服务器日志没有错误，请打开浏览器的 错误控制台，查看 JavaScript 是否报错。 - 由于我们现在正在编写 JavaScript 代码，错误信息可能会出现在 浏览器端，而不是 Django 服务器日志中。 - 在 Firefox 中，可以从 工具**（Tools）菜单中选择 **错误控制台**（Error Console）。 - 其他浏览器也有类似的 **JavaScript 错误日志窗口。

JavaScript 调试对 Web 开发人员来说可能会有些棘手，即使是有经验的开发者也是如此。如果你遇到了困难，可以参考这篇文章进行 JavaScript 调试： http://www.webmonkey.com/2010/02/javascript_debugging_for_beginners

英文

Now that we have our TMS server up and running, we can use the OpenLayers library to display the rendered map tiles within a slippy map. This slippy map will be used within our edit shapefile view function to display all the shapefile’s features, allowing the user to select a feature within the shapefile to edit.

Let’s implement this edit shapefile view. Edit the urls.py module within the editor application, and add the following highlighted entry to this file:

urlpatterns = patterns('shapeEditor.editor.views',
        url(r'^$', 'list_shapefiles'),
        url(r'^import$', 'import_shapefile'),
        url(r'^export/(?P<shapefile_id>\d+)$', 'export_shapefile'),
        url(r'^edit/(?P<shapefile_id>\d+)$', 'edit_shapefile'),
)

This will pass any incoming URLs of the form /editor/edit/N to the edit_shapefile() view function.

Let’s implement that function. Edit the editor application’s views.py module and add the following code:

def edit_shapefile(request, shapefile_id):
    try:
        shapefile = Shapefile.objects.get(id=shapefile_id)
    except Shapefile.DoesNotExist:
        return HttpResponseNotFound()

    tms_url = "http://"+request.get_host()+"/tms/"

    return render(request, "select_feature.html",
                {'shapefile' : shapefile,
                'tms_url': tms_url})

As you can see, we obtain the desired Shapefile object, calculate the URL used to access our TMS server, and pass both on to a template called select_feature.html. That template is where all the hard work will take place.

Now we need to write the template. Start by creating a new file named select_feature.html in the editor application’s templates directory, and enter the following into this file:

<html>
    <head>
        <title>ShapeEditor</title>
        <style type="text/css">
            div#map {
                width: 600px;
                height: 400px;
                border: 1px solid #ccc;
            }
        </style>
    </head>
    <body>
        <h1>Edit Shapefile</h1>
        <b>Please choose a feature to edit</b>
        <br/>
        <div id="map" class="map"></div>
        <br/>
        <div style="margin-left:20px">
            <button type="button"
                onClick='window.location="/editor";'>
                Cancel
            </button>
        </div>
    </body>
</html>

This is only the basic outline for this template, but it gives us something to work with. With the Django development server running (python manage.py runserver in a terminal window), go to http://127.0.0.1:8000/editor click on the Edit hyperlink for a shapefile. You should see the basic outline for the select feature page:

.. image:: ./img/463-0.png

align:

center

Notice that we created a <div> element to hold the OpenLayers map, and we use a CSS stylesheet to give the map a fixed size and border. The map itself isn’t being displayed yet, because we haven’t written the JavaScript code needed to launch OpenLayers. Let’s do that now.

Add the following <script> tags to the <head> section of your template:

<script src="http://openlayers.org/api/OpenLayers.js">
</script>
<script type="text/javascript">
    function init() {}
</script>

Also, change the <body> tag definition to look like this:

<body onload="init()">

Notice that there are two <script> tags: the first loads the OpenLayers.js library from the http://openlayers.org website, while the second will hold the JavaScript code that we’ll write to create the map. We’ve also defined a JavaScript function called init() which will be called when the page is loaded.

Let’s implement that initialization function. Replace the line which says function init() {} with the following:

function init() {
    map = new OpenLayers.Map('map',
                            {maxResolution: 0.703125,
                            numZoomLevels: 11});
    layer = new OpenLayers.Layer.TMS('TMS',
                            "{{ tms_url }}",
                            {serviceVersion: "1.0",
                            layername: "{{ shapefile.id }}",
                            type: 'png'});
    map.addLayer(layer);
    map.zoomToMaxExtent();
}

Even if you haven’t used JavaScript before, this code should be quite straightforward: the first instruction creates an OpenLayers.Map object representing the slippy map. We then create an OpenLayers.Layer.TMS object to represent a map layer that takes data from a TMS server. Then we add the layer to the map, and zoom the map out as far as possible so that the user sees the entire world when the map is first displayed.

Notice that the Map object accepts the ID of the <div> tag in which to place the map, along with a dictionary of options. The maxResolution option defines the maximum resolution to use for the map, and the numZoomLevels option tells OpenLayers how many zoom levels the map should support.

For the Layer.TMS object, we pass in the URL used to access the Tile Map Server (which is a parameter passed to the template from our Python view), along with the version of the Tile Map Service to use and the name of the layer—which in our Tile Map Server is the record ID of the shapefile to display the features for.

That’s all we need to do to get a basic slippy map working with OpenLayers. Save your changes, start up the Django web server if it isn’t already running, and point your web browser to http://127.0.0.1:8000/editor. Click on the Edit hyperlink for the shapefile you imported, and you should see the working slippy map:

You can zoom in and out, pan around, and click to your heart’s content. Of course, nothing actually works yet (apart from the Cancel button), but we have got a slippy map working with our Tile Map Server and the OpenLayers JavaScript widget. That’s quite an achievement!

备注

What if it doesn’t work?

If the map isn’t being shown for some reason, there are several possible causes. First, check the Django web server log, as we are printing any Python exceptions there. If that doesn’t reveal the problem, look at your web browser’s error console window to see if there are any errors at the JavaScript level. Because we are now writing JavaScript code, error messages will appear within the web browser rather than in Django’s server log. In Firefox, you can view JavaScript errors by selecting the Error Console item from the Tools menu. Other browsers have similar windows for showing JavaScript errors.

JavaScript debugging can be quite tricky, even for people experienced with developing web-based applications. If you do get stuck, you may find the following article helpful: http:// www.webmonkey.com/2010/02/javascript_debugging_for_beginners

拦截鼠标点击#

Intercepting mouse clicks

中文

当用户点击地图时，我们需要拦截该鼠标点击事件，识别用户点击的地图坐标，然后请求服务器识别被点击的要素（如果有的话）。为了拦截鼠标点击事件，我们需要创建一个自定义的 OpenLayers.Control 子类。按照 OpenLayers 的惯例，我们将这个子类添加到 OpenLayers 命名空间，并将其命名为 OpenLayers.Control.Click。定义好这个新控件后，我们可以创建其实例，并将其添加到地图上，以便它可以响应鼠标点击。

所有这些都需要使用 JavaScript 实现。这段代码可能有些复杂，所以我们一步一步来。编辑你的 selectFeature.html 文件，并在 <script> 标签内的 init() 函数之前添加以下代码：

OpenLayers.Control.Click = OpenLayers.Class(
    OpenLayers.Control, {
        defaultHandlerOptions: {
            'single': true,
            'double': false,
            'pixelTolerance' : 0,
            'stopSingle': false,
            'stopDouble': false
        },
        initialize: function(options) {
            this.handlerOptions = OpenLayers.Util.extend(
                {}, this.defaultHandlerOptions);
            OpenLayers.Control.prototype.initialize.apply(
                this, arguments);
            this.handler = new OpenLayers.Handler.Click(
                this, {'click' : this.onClick}, this.handlerOptions);
        },

        onClick: function(e) {
                alert("click")
        }
    }
);

不要太担心这里的具体细节——initialize() 函数有点像“黑魔法”，它创建了一个 OpenLayers.Control.Click 实例，并将其设置为 OpenLayers 控件。我们关注的重点是 defaultHandlerOptions 字典和 onClick() 函数。

defaultHandlerOptions 字典告诉 OpenLayers 你希望点击处理程序如何响应鼠标点击。在这个例子中，我们希望响应单击事件，但不响应双击事件（因为双击用于放大地图）。

onClick() 函数实际上是 OpenLayers.Control.Click 类的 JavaScript 方法。当用户在地图上点击时，这个方法会被调用——目前，我们只是简单地弹出一个 alert 对话框显示 “click”，但这足以确认点击控件已经生效。

现在，我们已经定义了新的点击控件，让我们将其添加到地图中。在 init() 函数的 } 之前立即添加以下代码：

var click = new OpenLayers.Control.Click();
map.addControl(click);
click.activate();

如你所见，我们创建了 OpenLayers.Control.Click 类的一个新实例，将其添加到地图中，并激活它。

完成所有这些代码后，我们现在可以重新加载 “Select Feature” 网页，并查看用户在地图上点击时会发生什么：

目前为止，一切正常。请注意，我们的点击处理程序仅拦截单击事件；如果你在地图上双击，它仍然会放大。

备注

如果你的地图无法正常工作，你可能在输入 JavaScript 代码时出了错。请打开浏览器的 JavaScript 控制台或日志窗口，并重新加载页面。如果 JavaScript 代码存在问题，错误信息会出现在该窗口中。

现在，让我们实现真正的 onClick() 函数，以响应用户的鼠标点击。当用户点击地图时，我们将使用 AJAX 请求向服务器发送被点击点的纬度和经度值。服务器将返回被点击要素的编辑页面 URL，如果没有点击到要素，则返回空字符串。如果返回了 URL，我们将重定向用户的浏览器到该 URL。

为了发起 AJAX 请求，我们将使用 OpenLayers.Request.GET 函数，并传入一个回调函数，当服务器返回响应时，该回调函数将被调用。我们先编写 AJAX 调用代码。

用以下代码替换之前的 onClick() 函数：

onClick: function(e) {
    var coord = map.getLonLatFromViewPortPx(e.xy);
    var request = OpenLayers.Request.GET({
        url: "{{ find_feature_url }}",
        params: {shapefile_id : {{ shapefile.id }},
                    latitude: coord.lat,
                    longitude: coord.lon},
        callback : this.handleResponse
    });
}

这个函数做了两件事：

通过 map.getLonLatFromViewPortPx() 方法获取被点击点的地图坐标。
创建 OpenLayers.Request.GET 对象，向服务器发送 AJAX 请求，并在收到响应时调用 handleResponse() 回调函数。

请注意，OpenLayers.Request.GET() 函数接受一组查询参数（在 params 里），以及要发送请求的 url，以及当接收到响应时调用的 callback 函数。我们使用模板参数 {{ find_feature_url }} 来指定请求的 URL。当模板加载时，该 URL 将由 edit_shapefile() 视图函数提供。发起请求时，查询参数将包含 shapefile 记录的 ID 以及点击的纬度和经度。

在编辑 select_feature.html 模板时，让我们实现回调函数。在 OpenLayers.Control.Click 类定义的 onClick() 函数 } 结束括号下方，添加以下函数：

handleResponse: function(request) {
    if (request.status != 200) {
        alert("Server returned a "+request.status+" error");
        return;
    };
    if (request.responseText != "") {
        window.location.href = request.responseText;
    };
}

备注

确保在 onClick() 函数的结束括号后添加一个逗号，否则会导致 JavaScript 语法错误。就像在 Python 中一样，JavaScript 也需要逗号来分隔字典项。

即使你不熟悉 JavaScript，这个函数也很容易理解： - 如果服务器返回的 status 不是 200，则弹出错误消息。 - 否则，我们检查 responseText 是否为空，如果不为空，则重定向用户的浏览器到该 URL。

现在，我们已经实现了回调函数，让我们回到 view.py 模块，并定义 find_feature_url 参数，以便将其传递给我们创建的模板。在 edit_shapefile() 函数中添加以下高亮部分：

def edit_shapefile(request, shapefile_id):
    try:
        shapefile = Shapefile.objects.get(id=shapefile_id)
    except Shapefile.DoesNotExist:
        return HttpResponseNotFound()

    tms_url = "http://"+request.get_host()+"/tms/"
    find_feature_url = "http://" + request.get_host() \
                    + "/editor/find_feature"

    return render(request, "select_feature.html",
                    {'shapefile': shapefile,
                    'find_feature_url' : find_feature_url,
                    'tms_url': tms_url})

find_feature_url 模板参数将包含点击处理程序发送 AJAX 请求的 URL。该 URL 可能如下所示：

http://127.0.0.1:8000/editor/find_feature

我们的 onClick() 函数会为该请求附加 shapefile_id、latitude 和 longitude 查询参数，因此最终的 AJAX 请求将如下所示：

http://127.0.0.1:8000/editor/find_feature?shapefile_id=1&latitude=-38.1674&longitude=176.2344

现在，我们的点击处理程序已经可以正常运行，接下来我们准备实现 find_feature() 视图函数，以响应这些 AJAX 请求。

英文

When the user clicks on the map, we want to intercept that mouse click, identify the map coordinate that the user clicked on, and then ask the server to identify the clicked-on feature (if any). To intercept mouse clicks, we will need to create a custom OpenLayers.Control subclass. We’ll follow the OpenLayers convention of adding the subclass to the OpenLayers namespace, by calling our new control OpenLayers. Control.Click. Once we’ve defined our new control, we can create an instance of the control and add it to the map so that the control can respond to mouse clicks.

All of this has to be done in JavaScript. The code can be a bit confusing, so let’s take this one step at a time. Edit your selectFeature.html file and add the following code to the <script> tag, immediately before your init() function:

OpenLayers.Control.Click = OpenLayers.Class(
    OpenLayers.Control, {
        defaultHandlerOptions: {
            'single': true,
            'double': false,
            'pixelTolerance' : 0,
            'stopSingle': false,
            'stopDouble': false
        },
        initialize: function(options) {
            this.handlerOptions = OpenLayers.Util.extend(
                {}, this.defaultHandlerOptions);
            OpenLayers.Control.prototype.initialize.apply(
                this, arguments);
            this.handler = new OpenLayers.Handler.Click(
                this, {'click' : this.onClick}, this.handlerOptions);
        },

        onClick: function(e) {
                alert("click")
        }
    }
);

Don’t worry too much about the details here—the initialize() function is a bit of black magic that creates a new OpenLayers.Control.Click instance and sets it up to run as an OpenLayers control. What is interesting to us is the defaultHandlerOptions dictionary, and the onClick() function.

The defaultHandlerOptions dictionary tells OpenLayers how you want the click handler to respond to mouse clicks. In this case, we want to respond to single clicks, but not double clicks (as these are used to zoom further in to the map).

The onClick() function is actually a JavaScript method for our OpenLayers. Control.Click class. This method will be called when the user clicks on the map—at the moment, all we’re doing is displaying an alert box with the message Click, but that’s enough to ensure that the click control is working.

Now that we’ve defined our new click control, let’s add it to the map. Add the following lines immediately before the closing } for the init() function:

var click = new OpenLayers.Control.Click();
map.addControl(click);
click.activate();

As you can see, we create a new instance of our OpenLayers.Control.Click class, add it to the map, and activate it.

With all this code written, we can now reload the Select Feature web page and see what happens when the user clicks on a map:

So far so good. Notice that our click handler only intercepts single clicks; if you double-click on the map, it will still zoom in.

备注

If your map isn’t working, you may have made a mistake typing in the JavaScript code. Open your browser’s JavaScript console or log window, and reload the page. An error message will appear in this window if there is a problem with your JavaScript code.

Let’s now implement the real onClick() function to respond to the user’s mouse- click. When the user clicks on the map, we’re going to send the clicked-on latitude and longitude value to the server using an AJAX request. The server will return the URL of the edit feature page for the clicked-on feature, or an empty string if no feature was clicked on. If a URL was returned, we’ll then redirect the user’s web browser to that URL.

To make the AJAX call, we’re going to use the OpenLayers.Request.GET function, passing in a callback function which will be called when a response is received back from the server. Let’s start by writing the AJAX call.

Replace our dummy onClick() function with the following:

onClick: function(e) {
    var coord = map.getLonLatFromViewPortPx(e.xy);
    var request = OpenLayers.Request.GET({
        url: "{{ find_feature_url }}",
        params: {shapefile_id : {{ shapefile.id }},
                 latitude: coord.lat,
                 longitude: coord.lon},
        callback : this.handleResponse
    });
}

This function does two things: it obtains the map coordinate that corresponds to the clicked-on point (by calling the map.getLonLatFromViewPortPx() method), and then it creates an OpenLayers.Request.GET object to send the AJAX request to the server and call the handleResponse() callback function when the response is received.

Notice that the OpenLayers.Request.GET() function accepts a set of query parameters (in the params entry), as well as a URL to send the request to (in the url entry) and a callback function to call when the response is received (in the callback entry). We’re using a template parameter, {{ find_feature_url }}, to select the URL to send the request to. This will be provided by our edit_shapeFile() view function when the template is loaded. When we make the request, the query parameters will consist of the record ID of the shapefile and the clicked-on latitude and longitude values.

While we’re editing the select_feature.html template, let’s go ahead and implement the callback function. Add the following function to the end of the OpenLayers.Control.Click class definition (immediately below the closing } for the onClick() function):

handleResponse: function(request) {
    if (request.status != 200) {
        alert("Server returned a "+request.status+" error");
        return;
    };
    if (request.responseText != "") {
        window.location.href = request.responseText;
    };
}

备注

Make sure you add a comma after the onClick() function’s closing parenthesis, or you’ll get a JavaScript error. Just as with Python, you need to add commas to separate dictionary entries in JavaScript.

Even if you’re not familiar with JavaScript, this function should be easy to understand: if the response didn’t have a status value of 200, an error message is displayed. Otherwise, we check that the response text is not blank, and if so we redirect the user’s web browser to that URL.

Now that we’ve implemented our callback function, let’s go back to our view module and define the find_feature_url parameter which will get passed to the template we’ve created. Edit the view.py module to add the following highlighted lines to the edit_shapefile() function:

def edit_shapefile(request, shapefile_id):
    try:
        shapefile = Shapefile.objects.get(id=shapefile_id)
    except Shapefile.DoesNotExist:
        return HttpResponseNotFound()

    tms_url = "http://"+request.get_host()+"/tms/"
    find_feature_url = "http://" + request.get_host() \
                    + "/editor/find_feature"

    return render(request, "select_feature.html",
                 {'shapefile': shapefile,
                  'find_feature_url' : find_feature_url,
                  'tms_url': tms_url})

The find_feature_url template parameter will contain the URL the click handler will send its AJAX request to. This URL will look like the following:

http://127.0.0.1:8000/editor/find_feature

Our onClick() function will add shapefile_id, latitude and longitude query parameters to this request, so the AJAX request sent to the server will look like the following:

http://127.0.0.1:8000/editor/find_feature?shapefile_id=1&latitude=-38.1674&longitude=176.2344

With our click handler up and running, we’re now ready to start implementing the find_feature() view function to respond to these AJAX requests.

实现查找特征视图#

Implementing the find feature view

中文

我们现在需要编写视图函数来接收 AJAX 请求，检查用户是否点击了某个要素（如果有的话），并返回一个合适的 URL，以便将用户的浏览器重定向到该要素的“编辑”页面。为此，我们将利用 GeoDjango 的 空间查询函数。

让我们先添加 find_feature 视图。编辑 views.py，并添加以下占位代码：

def find_feature(request):
    return HttpResponse("")

返回一个空字符串告诉我们的 AJAX 回调函数没有点击任何要素。我们稍后会用适当的空间查询替换它。但首先，我们需要添加一个 URL 模式，使传入的请求能够被转发到 find_feature() 视图函数。打开 urls.py 模块，并在 URL 模式列表中添加以下条目：

url(r'^find_feature$', 'find_feature'),

现在，你应该可以运行 ShapeEditor，点击已上传 shapefile 的编辑超链接，查看显示 shapefile 内各个要素的地图，并在地图上某处点击。然而，系统的响应将是——什么也不会发生！ 这是因为我们的 find_feature() 函数返回了一个空字符串，因此系统认为用户没有点击任何要素，从而忽略了鼠标点击。

备注

在这种情况下，“什么也不会发生” 是个好消息。只要 Python 或 JavaScript 级别没有显示任何错误消息，就说明 AJAX 代码运行正常。因此，即便什么也没发生，仍然应该尝试一下，以确保代码没有错误。你可以在服务器接收的 HTTP 请求列表中看到 AJAX 请求。

在实现 find_feature() 之前，让我们先回顾一下“点击”一个要素的几何体意味着什么。ShapeEditor 支持各种几何类型：Point、LineString、Polygon、MultiPoint、MultiLineString、MultiPolygon 和 GeometryCollection。如果要检查用户是否点击了 Polygon 或 MultiPolygon，只需判断点击点是否在多边形的范围内即可。但 LineString 和 Point 没有内部区域（它们的面积总是零），所以点击点永远不可能“在” 这些几何体内部。它可能无限接近，但用户永远无法真正点击到 Point 或 LineString 内部。

这意味着以下 SQL 空间查询：

SELECT * FROM features WHERE ST_Contains(feature.geometry, clickPt)

将无法满足需求，因为点击点永远不会“在” Point 或 LineString 内部。相反，我们必须允许用户点击靠近要素的位置，而不是严格地点击在其内部。为此，我们将计算一个搜索半径（单位为地图单位），然后使用 DWithin() 空间查询函数，找到在点击点给定半径范围内的所有要素。

计算搜索半径

我们知道用户可能在地球表面的任何地方点击，并且我们的所有要素都存储为经纬度坐标。但地图坐标（经纬度值）与地球表面的实际距离之间的关系因地理位置不同而变化。例如，在赤道上 1° 大约等于 111 公里，而在瑞典，这个距离只有赤道的一半。

为了在全球范围内使用一致的搜索半径，我们将使用 PROJ.4 库，根据点击点的经纬度和所需的线性距离计算地图单位中的距离。让我们将这个函数添加到 shared.utils 模块中：

def calc_search_radius(latitude, longitude, distance):
    geod = pyproj.Geod(ellps="WGS84")

    x,y,angle = geod.fwd(longitude, latitude, 0, distance)
    radius = y - latitude

    x,y,angle = geod.fwd(longitude, latitude, 90, distance)
    radius = max(radius, x - longitude)

    x,y,angle = geod.fwd(longitude, latitude, 180, distance)
    radius = max(radius, latitude - y)

    x,y,angle = geod.fwd(longitude, latitude, 270, distance)
    radius = max(radius, longitude - x)

    return radius

该函数计算给定线性距离（以米为单位）在地图单位中的等效距离。它计算从起始位置出发，分别朝北、南、东、西四个方向移动指定距离后得到的新坐标。然后计算起始点与终点之间的纬度或经度差值：

最后，取这些差值中的最大值，并将其作为搜索半径（单位为经纬度）。

由于 utils.py 现在使用了 pyproj，请在模块顶部添加以下导入语句：

import pyproj

执行 DWithin() 空间查询

有了 calc_search_radius() 函数后，我们可以使用 DWithin() 空间查询，查找靠近点击点的所有要素。在 GeoDjango 中，我们使用 filter() 进行空间查询：

query = Feature.objects.filter(geometry__dwithin=(pt, radius))

这将创建一个查询集，只返回符合 dwithin 条件的 Feature 对象。GeoDjango 会自动将该查询转换为 SQL 语句，如下所示：

SELECT * FROM feature WHERE ST_DWithin(geometry, pt, radius)

备注

注意 geometry__dwithin 关键字参数包含两个下划线（__）。Django 使用双下划线将字段名与过滤函数名称分隔开。

现在我们可以最终实现 find_feature() 视图函数。编辑 views.py，并替换 find_feature() 的主体内容：

def find_feature(request):
    try:
        shapefile_id = int(request.GET['shapefile_id'])
        latitude     = float(request.GET['latitude'])
        longitude    = float(request.GET['longitude'])

        shapefile = Shapefile.objects.get(id=shapefile_id)
        pt = Point(longitude, latitude)
        radius = utils.calc_search_radius(latitude, longitude, 100)

        if shapefile.geom_type == "Point":
            query = Feature.objects.filter(geom_point__dwithin=(pt, radius))
        elif shapefile.geom_type in ["LineString", "MultiLineString"]:
            query = Feature.objects.filter(geom_multilinestring__dwithin=(pt, radius))
        elif shapefile.geom_type in ["Polygon", "MultiPolygon"]:
            query = Feature.objects.filter(geom_multipolygon__dwithin=(pt, radius))
        elif shapefile.geom_type == "MultiPoint":
            query = Feature.objects.filter(geom_multipoint__dwithin=(pt, radius))
        elif shapefile.geom_type == "GeometryCollection":
            query = Feature.objects.filter(geom_geometrycollection__dwithin=(pt, radius))
        else:
            print("Unsupported geometry:", shapefile.geom_type)
            return HttpResponse("")

        if query.count() != 1:
            return HttpResponse("")

        feature = query[0]
        return HttpResponse("/editor/edit_feature/" + str(shapefile_id) + "/" + str(feature.id))
    except:
        traceback.print_exc()
        return HttpResponse("")

添加以下导入语句到 views.py 顶部：

import traceback
from django.contrib.gis.geos import Point
from shapeEditor.shared.models import Feature
from shapeEditor.shared import utils

测试点击功能

现在，你可以运行 Django 服务器并点击 shapefile 中的要素。如果点击海洋，什么也不会发生——但如果点击了一个要素，你的浏览器应该会跳转到如下 URL：

http://127.0.0.1:8000/editor/edit_feature/X/Y

其中，X 是 shapefile 的 ID，Y 是点击的要素 ID。恭喜！你已经实现了点击选择要素的功能！ 🎉

英文

We now need to write the view function which receives the AJAX request, checks to see which feature was clicked on (if any), and returns a suitable URL to use to redirect the user’s web browser to the “edit” page for that clicked-on feature. To implement this, we’re going to make use of GeoDjango’s spatial query functions.

Let’s start by adding the find_feature view itself. To do this, edit views.py again and add the following placeholder code:

def find_feature(request):
    return HttpResponse("")

Returning an empty string tells our AJAX callback function that no feature was clicked on. We’ll replace this with some proper spatial queries shortly. First, though, we need to add a URL pattern so that incoming requests will get forwarded to the find_feature() view function. Open up the editor application’s urls.py module and add the following entry to the URL pattern list:

url(r'^find_feature$', 'find_feature'),

You should now be able to run the ShapeEditor, click on the Edit hyperlink for an uploaded shapefile, see a map showing the various features within the shapefile, and click somewhere on the map. In response, the system should do—absolutely nothing! This is because our find_feature() function is returning an empty string, so the system thinks that the user didn’t click on a feature and so ignores the mouse-click.

备注

In this case, “absolutely nothing” is good news. As long as no error messages are being displayed, either at the Python or JavaScript level, this tells us that the AJAX code is running correctly. So go ahead and try this, even though nothing happens, just to make sure that you haven’t got any bugs in your code. You should see the AJAX calls in the list of incoming HTTP requests being received by the server.

Before we implement the find_feature() function, let’s take a step back and think what it means for the user to “click on” a feature’s geometry. The shapeEditor supports a complete range of possible geometry types: Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon, and GeometryCollection. Identifying if the user clicked on a Polygon or MultiPolygon feature is straightforward enough: we simply see if the clicked-on point is inside the polygon’s bounds. But because lines and points have no interior (their area will always be zero), a given coordinate could never be “inside” a Point or a LineString geometry. It might get infinitely close, but the user can never actually click inside a Point or a LineString.

This means that a spatial query of the form:

SELECT * FROM features WHERE ST_Contains(feature.geometry,clickPt)

This is not going to work, because the click point can never be inside a Point or a LineString geometry. Instead, we have to allow for the user clicking close to the feature rather than within it. To do this, we’ll calculate a search radius, in map units, and then use the DWithin() spatial query function to find all features within the given search radius of the clicked-on point.

Let’s start by calculating the search radius. We know that the user might click anywhere on the Earth’s surface, and that we are storing all our features in lat /long coordinates. We also know that the relationship between map coordinates (latitude/longitude values) and actual distances on the Earth’s surface varies widely depending on whereabouts on the Earth you are: a degree at the equator equals a distance of 111 kilometers, while a degree in Sweden is only half that far.

To allow for a consistent search radius everywhere in the world, we will use the PROJ.4 library to calculate the distance in map units given the clicked-on location and a desired linear distance. Let’s add this function to our shared.utils module:

def calc_search_radius(latitude, longitude, distance):
    geod = pyproj.Geod(ellps="WGS84")

    x,y,angle = geod.fwd(longitude, latitude, 0, distance)
    radius = y-latitude

    x,y,angle = geod.fwd(longitude, latitude, 90, distance)
    radius = max(radius, x-longitude)

    x,y,angle = geod.fwd(longitude, latitude, 180, distance)
    radius = max(radius, latitude-y)

    x,y,angle = geod.fwd(longitude, latitude, 270, distance)
    radius = max(radius, longitude-x)

    return radius

This function calculates the distance, in map units, of a given linear distance measured in meters. It calculates the lat/long coordinates for four points directly north, south, east, and west of the starting location and the given number of meters away from that point. It then calculates the difference in latitude or longitude between the starting location and the end point:

Finally, it takes the largest of these differences and returns it as the search radius, which is measured in degrees of latitude or longitude.

Because our utils.py module is now using pyproj, add the following import statement to the top of this module:

import pyproj

With the calc_search_radius() function written, we can now use the DWithin() spatial query to identify all features close to the clicked-on location. The general process of doing this in GeoDjango is to use the filter() function to create a spatial query, as follows:

query = Feature.objects.filter(geometry__dwithin=(pt, radius))

This creates a query set that returns only the Feature objects which match the given criteria. GeoDjango cleverly adds support for spatial queries to Django’s built-in filtering capabilities; in this case, the geometry__dwithin=(pt, radius) parameter tells GeoDjango to perform the dwithin() spatial query using the two supplied parameters on the field named geometry within the Feature object. Thus, this statement will be translated by GeoDjango into a spatial database query which looks something as follows:

SELECT * from feature WHERE ST_DWithin(geometry, pt, radius)

备注

Note that the geometry__dwithin keyword parameter includes two underscore characters; Django uses a double-underscore to separate the field name from the filter function’s name.

Knowing this, and having the utils.calc_search_radius() function implemented, we can finally implement our find_feature() view function. Edit views.py and replace the body of the find_feature() function with the following:

def find_feature(request):
    try:
        shapefile_id = int(request.GET['shapefile_id'])
        latitude     = float(request.GET['latitude'])
        longitude    = float(request.GET['longitude'])

        shapefile = Shapefile.objects.get(id=shapefile_id)
        pt = Point(longitude, latitude)
        radius = utils.calc_search_radius(latitude, longitude, 100)

        if shapefile.geom_type == "Point":
            query = Feature.objects.filter(
                geom_point__dwithin=(pt, radius))
        elif shapefile.geom_type in ["LineString", "MultiLineString"]:
            query = Feature.objects.filter(
                geom_multilinestring__dwithin=(pt, radius))
        elif shapefile.geom_type in ["Polygon", "MultiPolygon"]:
            query = Feature.objects.filter(
                geom_multipolygon__dwithin=(pt, radius))
        elif shapefile.geom_type == "MultiPoint":
            query = Feature.objects.filter(
                geom_multipoint__dwithin=(pt, radius))
        elif shapefile.geom_type == "GeometryCollection":
            query = feature.objects.filter(
                geom_geometrycollection__dwithin=(pt, radius))
        else:
            print "Unsupported geometry: " + shapefile.geom_type
            return HttpResponse("")

        if query.count() != 1:
            return HttpResponse("")

        feature = query[0]
        return HttpResponse("/editor/edit_feature/" +
                            str(shapefile_id)+"/"+str(feature.id))
    except:
        traceback.print_exc()
        return HttpResponse("")

There’s a lot here, so let’s take this one step at a time. First off, we’ve wrapped all our code inside a try…except statement:

def find_feature(request):
    try:
        ...
    except:
        traceback.print_exc()
        return HttpResponse("")

This is the same technique we used when implementing the Tile Map Server; it means that any Python errors in your code will be displayed in the web server’s log, and the AJAX function will return gracefully rather than crashing.

We then extract the supplied query parameters, converting them from strings to numbers, load the desired Shapefile object, create a GeoDjango Point object out of the clicked-on coordinates, and calculate the search radius in degrees:

shapefile_id = int(request.GET['shapefile_id'])
latitude     = float(request.GET['latitude'])
longitude    = float(request.GET['longitude'])

shapefile = Shapefile.objects.get(id=shapefile_id)
pt = Point(longitude, latitude)
radius = utils.calc_search_radius(latitude, longitude, 100)

Note that we use a hardwired search radius of 100 meters; this is enough to let the user select a point or line feature by clicking close to it, without being so large that the user might accidentally click on the wrong feature.

With this done, we’re now ready to perform the spatial query. Because our Feature object has separate fields to hold each different type of geometry, we have to build the query based on the geometry’s type:

if shapefile.geom_type == "Point":
    query = Feature.objects.filter(
                geom_point__dwithin=(pt, radius))
elif shapefile.geom_type in ["LineString", "MultiLineString"]:
    query = Feature.objects.filter(
                geom_multilinestring__dwithin=(pt, radius))
elif shapefile.geom_type in ["Polygon", "MultiPolygon"]:
    query = Feature.objects.filter(
                geom_multipolygon__dwithin=(pt, radius))
elif shapefile.geom_type == "MultiPoint":
    query = Feature.objects.filter(
                geom_multipoint__dwithin=(pt, radius))
elif shapefile.geom_type == "GeometryCollection":
    query = feature.objects.filter(
                geom_geometrycollection__dwithin=(pt, radius))
else:
    print "Unsupported geometry: " + shapefile.geom_type
    return HttpResponse("")

In each case, we choose the appropriate geometry field, and use __dwithin to perform a spatial query on the appropriate field in the Feature object.

Once we’ve created the appropriate spatial query, we simply check to see if the query returned exactly one Feature. If not, we return an empty string back to the AJAX handler’s callback function, to tell it that the user did not click on a feature:

if query.count() != 1:
    return HttpResponse("")

If there was exactly one matching feature, we get the clicked-on feature and use it to build a URL redirecting the user’s web browser to the “edit feature” URL for the clicked-on feature:

feature = query[0]
return HttpResponse("/shape-editor/editFeature/" +
                    str(shapefile_id)+"/"+str(feature.id))

After typing in the previous code, add the following import statements to the top of the views.py module:

import traceback
from django.contrib.gis.geos import Point
from shapeEditor.shared.models import Feature
from shapeEditor.shared import utils

This completes the find_feature() view function. Save your changes, run the Django web server if it is not already running, and try clicking on a shapefile’s features. If you click on the ocean, nothing should happen—but if you click on a feature, you should see your web browser redirected to a URL of the form:

http://127.0.0.1:8000/shape-editor/editFeature/X/Y

where X is the record ID of the shapefile, and Y is the record ID of the clicked-on feature. Of course, at this stage you’ll get a Page Not Found error, because you haven’t written that page yet. But at least you can click on a feature to select it, which is a major milestone in the development of the ShapeEditor application. Congratulations!

选择要编辑的要素#

实现 Tile 地图服务器#

设置基础地图#

Tile 渲染#

解析查询参数#

设置地图#

定义基础层#

定义要素层#

渲染地图图块#

完成图块地图服务器#

使用 OpenLayers 显示地图#

拦截鼠标点击#

实现查找特征视图#