ArcGIS API for JavaScript 4.9学习笔记一(创建2D/3D地图)_esri/views/mapview字体设置-程序员宅基地

技术标签: ArcGIS API for JavaScript  JavaScript  Web GIS  

ArcGIS API for JavaScript 4.9学习笔记一(创建2D/3D地图)

2D:

代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Intro to MapView - Create a 2D map</title>
<style>
  html, body, #viewDiv {
     
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css">
<script src="https://js.arcgis.com/4.9/"></script>
<script>
require([
  "esri/Map",
  "esri/views/MapView"
], function(Map, MapView){
     
  var map = new Map({
     
    basemap: "streets"
  });
  var view = new MapView({
     
    container: "viewDiv",  // Reference to the scene div created in step 5
    map: map,  // Reference to the map object created before the scene
    zoom: 4,  // Sets zoom level based on level of detail (LOD)
    center: [15, 65]  // Sets center point of view using longitude,latitude
  });
});
</script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

代码解读:

  • 引入CDN上托管的文件:

    <link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css">
    <script src="https://js.arcgis.com/4.9/"></script>
    
  • require函数

    require([
      "esri/Map",
      "esri/views/MapView"
    ], function(Map, MapView){
      var map = new Map({
        basemap: "streets"
      });
      var view = new MapView({
        container: "viewDiv",  // Reference to the scene div created in step 5
        map: map,  // Reference to the map object created before the scene
        zoom: 4,  // Sets zoom level based on level of detail (LOD)
        center: [15, 65]  // Sets center point of view using longitude,latitude
      });
    });
    </script>
    

    1.require入口函数的第一个参数是一个数组,与Java中的#import类似,是对第二个参数所需要的功能进行引用,第二个参数是一个函数,注意前后加载的功能一定要一致,如加载的第一个参数是“esri Map",那么,回调函数中第一个参数必须是“Map”。

    2.Map中有basemap属性,可供选择地图样式

    ESRI提供的底图样式有:streets ,satellite ,hybrid, topo, gray,dark-gray, oceans, national-geographic,terrain, osm, dark-gray-vector, gray-vector,streets-vector, streets-night-vector, streets-relief-vector, streets-navigation-vector,topo-vector.terrain, dark-gray, dark-gray-vector, gray-vector, streets-vector,streets-night-vector, streets-relief-vector, streets-navigation-vector , topo-vector等

    3.回调函数的第二个参数中传入了一个视图,视图有两种类型MapView(用于查看2D地图)和SceneView(用于查看3D地图)。

    • 在MapView中container用于绑定给地图提供的DIV id,** 不需要写# **
    • map用于绑定上面创建的map模块
    • zoom用于设置缩放的级别(3~18)
    • center以经纬度来是设置地图中心

3D:

代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Intro to SceneView - Create a 3D map</title>
<style>
  html, body, #viewDiv {
     
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css">
<script src="https://js.arcgis.com/4.9/"></script>
<script>
require([
  "esri/Map",
  "esri/views/SceneView"
], function(Map, SceneView){
     
  var map = new Map({
     
    basemap: "streets",
    ground: "world-elevation"
  });
  var view = new SceneView({
     
    container: "viewDiv",    
    map: map,                 
    scale: 50000000,         
    center: [-101.17, 21.78]  
  });
});
</script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

与2D不同,3D示例代码中回调函数new了一个SceneView构造函数(这也是在创建2D地图与3D地图的最大不同之处),构造函数中的使用scale定义比例尺。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/linjiehuijh/article/details/83660093

智能推荐

物联网开发技术栈_物联网技术java技术栈-程序员宅基地

文章浏览阅读2.2k次,点赞2次,收藏10次。物联网开发技术栈 内容简介作为互联网技术的进化,物联网开发并非孤立的技术栈,而是向上承接了互联网,向下统领了嵌入式硬件开发的一个承上启下的全栈开发技术。虽然我们并不能预测物联网技术栈最终的样子:统一的开发语言是 JavaScript 还是 Python 亦或者其他编程语言;HTTP、WebSockets、MQTT、CoAP 等协议谁会是最后的赢家,并且随着物联网的不断进化,甚至我们..._物联网技术java技术栈

《Git学习笔记:Git入门 & 常用命令》-程序员宅基地

文章浏览阅读674次,点赞10次,收藏11次。Git是一个分布式版本控制工具,通常用来对软件开发过程中的源代码文件进行管理,通过Git仓库来存储和管理这些文件,Git仓库分为两种:指的是存储在各个开发人员自己本机电脑上的Git仓库指的是远程服务器上的Git仓库commit:提交,将本地文件和版本信息保存到本地仓库push:推送(上传),将本地仓库文件和版本信息上传到远程仓库pull:拉取(下载),将远程仓库文件和版本信息下载到本地仓库。

CPU热点分析——pprof (gperftools)使用_gperftools pprof-程序员宅基地

文章浏览阅读4.6k次。pprof (gperftools)使用谷歌的工具集,可查看CPU采样结果。pprof (google-perftool),用于来分析程序,必须保证程序能正常退出。使用步骤:1.准备工具,先安装工具包libunwind-1.1.tar.gzgperftools-2.1.tar.gz解压后 configure到系统默认路径即可,之后直接-lprofiler 2.再安装图形工具sudo yum ins..._gperftools pprof

JavaScript BOM-程序员宅基地

文章浏览阅读118次。JavaScript BOM:Navigator、History、Location

MongoDB数据库 —— 图形化工具_mongodb数据库图形化工具-程序员宅基地

文章浏览阅读6.2k次,点赞16次,收藏66次。在前面通过使用MongoDB在命令窗口操作数据库,而MySQL数据库也同样可以在命令窗口使用sql语句操作数据库,在安装数据库的时候提到可以安装这个图形化工具的,为了节省安装时间和卡顿选择后续安装MongoDB图形化工具,在MySQL数据中同样也有这个MySQL workbench 图形化工具可以选择进行安装;那么本篇就来安装MongoDB的图形化工具 — MongoDBCompass。_mongodb数据库图形化工具

ChatGPT带给智慧城市的启示——未来城市演进路径的探讨-程序员宅基地

文章浏览阅读1.4k次,点赞13次,收藏10次。未来城市的大模型包括城市总体规划、城市交通运输管理、城市公共安全和应急管理、经济发展和产业园区发展、社区发展、资源承载调控、污染调控、社会资源优化调控、基础设施调控、人口研究等模型。其对城市要素、关键指标、函数、流程、模型、平台、技术、资金、人才、市场、自然环境等内外部因素进行仿真建模。采用物联网、云计算、大数据、数字孪生和人工智能等技术来获取地、物、人、组织、环境、社会、经济、业务逻辑和运营规律等相关数据。、物联网、大数据、云计算、数字孪生、元宇宙、可穿戴生理传感器、分布式新能源等各类新技术。

随便推点

从零开始开发Shopify主题:(4)调用自定义配置_shopify自定义主题-程序员宅基地

文章浏览阅读3.6k次。在上一篇文章中,我们知道了如何使用配置文件自定义主题,以允许商店所有者自己更改Shopify主题。 如上所述,这些设置会在用户单击管理面板的在线商店>主题部分中的自定义主题按钮时显示,并在主题开发文件的config / settings_schema.json文件中定义。在这篇文章中,我们将了解如何访问这些设置并在开发主题时调用它们。调用配置要调用模板中的配置信息,需要使用li..._shopify自定义主题

git本地分支与远程分支关联及遇到的问题解决方案_本地分支 '(no branch)' (远程分支 = '(no branch)') 是无效的。引用名-程序员宅基地

文章浏览阅读2.6k次。1.查看本地分支git branch绿色表示当前分支#######################################################2.查看远程分支git branch -a#######################################################3.切换分支git checkout branch_name..._本地分支 '(no branch)' (远程分支 = '(no branch)') 是无效的。引用名称必须遵循

java连接mysql出现The server time zone value '�й���׼ʱ��' is unrecognized的解决方法_java.lang.runtimeexception: the server time zone v-程序员宅基地

文章浏览阅读2.2w次,点赞18次,收藏28次。java连接mysql出现The server time zone value '�й���׼ʱ��' is unrecognized的解决方法在Idea中连接数据库是抛出The server time zone value ‘�й���׼ʱ��’ is unrecogni错误 原因是因为使用了Mysql Connector/J 6.x以上的版本,然后就报了时区的错误。解决办法在配置url中添..._java.lang.runtimeexception: the server time zone value '嚙請對蕭嚙踝蕭

鸿蒙原生应用元服务实战-Serverless华为账户认证登录需尽快适配-程序员宅基地

文章浏览阅读671次,点赞11次,收藏9次。并且在这个固定的serverless服务中去增加这个,应该不是应用元服务开发者有这个加入权限的,应该是要统一解决,类似实现和手机注册验证一样的,直接可以使用或者少量代码配置即可使用。另外就是如果是新的元服务应用,使用的serverless,如果不支持华为账户功能,就没法上架,这个也是比较麻烦的,前面已经使用serverless开发基本完成或者已经完成的,得用其他方式去实现才行吧。对于已经上架的应用和元服务、升级也没法进行。3月1日的时间是快到了。

使用XAMPP可视化管理Mysql,使用JDBC访问数据库执行插入、查询、删除等操作_xammp进入可视化界面-程序员宅基地

文章浏览阅读5.7k次,点赞2次,收藏8次。准备工作:安装XAMPP,登陆apache,mysql,并通过phpadmin来创建数据库,新建一个表,插入一些数据:http://localhost/phpmyadmin,最好设置密码,不然后面连接数据库的时候可能会无法访问设置密码方式:修改密码--->一定要使用生成的密码来登陆,包括后面的数据库url也是。我简历的数据如下:这时候就可以在eclipse中编程开发_xammp进入可视化界面

(转) spring 的jar各包作用-程序员宅基地

文章浏览阅读119次。转自:http://blog.csdn.net/cailiang517502214/article/details/4797642spring.jar是包含有完整发布的单个jar包,spring.jar中包含除了spring-mock.jar里所包含的内容外其它所有jar包的内容,因为只有在开发环境下才会用到spring-mock.jar来进行辅助测试,正式应用系统中是用不得这些类的。...

推荐文章

热门文章

相关标签