有 Java 编程相关的问题?

你可以在下面搜索框中键入要查询的问题!

java如何使用dojo 1.9显示地理地图

我有一个特殊的要求,我必须使用Dojo1.9绘制简单的地理地图。我下载了openlayer。来自openlayer站点的js,但当我运行页面时,仍然没有显示任何内容。如果有人能帮我解决我这边的问题,我将不胜感激。请查找下面的代码

<html>
<head>
<link rel="stylesheet" type="text/css" href="../../dijit/themes/dijit.css">
<link rel="stylesheet" type="text/css" href="../../dijit/themes/tundra/tundra.css">
<link rel="stylesheet" type="text/css" href="demo.css">
<title>Map</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="../../dijit/themes/tundra/OpenLayers.js"></script>
<script type="text/javascript" src="../../dojo/dojo.js" data-dojo-config="async: true"></script>
<script type="text/javascript" src="src.js"></script>
</head>
</html>

共 (1) 个答案

  1. # 1 楼答案

    Dojo容器中的OpenLayers映射:

    <!DOCTYPE html>
    <html>
        <head>
            <link href='//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit/themes/claro/claro.css' rel='stylesheet' type='text/css' />
            <script src='//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js'></script>
            <script src='//cdnjs.cloudflare.com/ajax/libs/openlayers/2.12/OpenLayers.js'></script>
            <style type='text/css'>
            html,body,#border,#map { margin:0; width:100%; height:100%; }
            </style>
        </head>
        <body class='claro'>
            <div id='border' data-dojo-type='dijit/layout/BorderContainer'>
                <div data-dojo-type='dijit/layout/ContentPane' data-dojo-props='region:"center"'>
                    <div id='map'></div>
                </div>
                <div data-dojo-type='dijit/layout/ContentPane' data-dojo-props='region:"trailing"'>
                    Just an example
                </div>
            </div>
            <script type='text/javascript'>
            require(['dojo/ready', 'dojo/parser'], function (ready, Parser) {
                ready(function () {
                    Parser.parse().then(function () {
                        var map = new OpenLayers.Map({
                            div:'map',
                            displayProjection:new OpenLayers.Projection('EPSG:4326'),
                            projection:new OpenLayers.Projection('EPSG:900913')
                        });
                        map.addLayer(
                            new OpenLayers.Layer.OSM()
                        );
                        map.setCenter(
                            new OpenLayers.LonLat(0, 0),
                            2
                        );
                    });
                });
            });
            </script>
        </body>
    </html>
    

    100%的宽度和高度扩展所有内容以填充视口。虽然不需要扩展到100%,但需要在这些图元上设置尺寸