zoukankan      html  css  js  c++  java
  • 我的第一个arcgis地图应用

    步骤:

    1、设置一个基本的html文档

    <!DOCTYPE html>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <title></title>
      </head>
    </html>
    

    2、引入arcgis相关的script和css样式,在<head></head>标签中引入以下脚本

    <link rel="stylesheet" href="https://js.arcgis.com/3.27/esri/css/esri.css">
    <script src="https://js.arcgis.com/3.27/"></script>
    

    3、arcgis API的模块引用,使用<script>从API加载特定的模块。不需要让这个脚本标记引用URL,而是直接在其中添加JavaScript代码。

    <script>
      require(["esri/map"], function(Map) { ... });
    </script>

    4、确保DOM代码可用,使用dojo / domReady! 在执行任何代码之前确保DOM可用。 一旦DOM可用,传递给require()的函数就会运行。 该函数中的代码将创建地图并添加底图。 底图图层是ArcGIS.com提供的服务 

    <script>
      require(["esri/map", "dojo/domReady!"], function(Map) {
        // code to create the map and add a basemap will go here
      });
    </script>

    5、创建地图,使用Map创建新地图,Map是对从esri / map模块加载的Map类的引用。

    var map;
    require(["esri/map", "dojo/domReady!"], function(Map) {
      map = new Map("map", {
        basemap: "topo",
        center: [-122.45, 37.75],
        zoom: 13
      });
    });

    6、页面内容定义,现在创建映射的JavaScript已经就绪,下一步是添加相关的HTML

    <body class="claro">
      <div id="map"></div>
    </body>

    7、css控制

    <style>
      html, body, #map {
        height: 100%;
        padding: 0;
        margin: 0;
      }
    </style>

    8、完整代码实例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>创建第一个地图服务</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.27/esri/css/esri.css">
        <style>
            html,body,#mapId{padding:0;margin:0;height:100%;}
        </style>
    </head>
    <body  class="claro">
    <div id="mapId"></div>
    <script src="https://js.arcgis.com/3.27/"></script>
    <script>
         require(["esri/map", "dojo/domReady!"], function (Map) {
             var map = Map("mapId",{
                 basemap: "topo",
                 center: [-122.45, 37.75],
                 zoom: 13
             })
         })
    </script>
    </body>
    </html>

      

  • 相关阅读:
    Linux常用命令大全(非常全!!!)
    TCP连接的建立与释放(三次握手与四次挥手)
    TCP/IP Http 和Https socket之间的区别
    redis持久化方法对比分析
    关于HTTP协议,一篇就够了
    远程桌面不能拷贝文件的问题
    URLDecoder: Incomplete trailing escape (%) pattern
    利用pdf2swf将PDF转换成SWF
    Oracle删除当前用户下所有的表的方法
    JS简单验证密码强度
  • 原文地址:https://www.cnblogs.com/luoxuemei/p/10269408.html
Copyright © 2011-2022 走看看