轻松自制万千样式地图,使用Arcgis智能Api就能搞定

百度已收录   阅读次数: 47
2021-04-2921:05:01 发表评论
摘要

最近,伯衡君在学习如何用Web相关编程知识绘制地图,在搜索相关地图库的时候,发现一个名为Arcgis的开源地图绘制库,简直是发现了宝库,其官网提供了大量的实例,简直就是手把手教你画地图。而且还能添加各种特效,细节优化等,我敢说,用了都说好,分享给大家……

轻松自制万千样式地图,使用Arcgis智能Api就能搞定

开篇寄语

最近,伯衡君在学习如何用Web相关编程知识绘制地图,在搜索相关地图库的时候,发现一个名为Arcgis的开源地图绘制库,简直是发现了宝库,其官网提供了大量的实例,简直就是手把手教你画地图。而且还能添加各种特效,细节优化等,我敢说,用了都说好,分享给大家。

官方网站

API官方库

内容详情

不论你是了解javascript,还是python,甚至是一点编程知识没有也没关系,只需要到其官方文档,根据它的教程,按照一步步操作,也能做出非常漂亮的特色地图,伯衡君本篇文章只是抛砖引玉,更多知识请详细查看其对应的文档。

这里就以js官方Api来操作了。

首先是新建一个html页面,不用什么编辑器,打开系统自带的txt文本就行,只需要将代码保存后,修改.txt为.html就可以了。

代码如下,借用官方文档的简单代码,做了一些小小的修改。

<!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.19/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.19/"></script>
    <script>
      require(["esri/Map", "esri/views/SceneView"], (Map, SceneView) => {
        const map = new Map({
          basemap: "oceans",
          ground: "world-elevation"
        });
        const view = new SceneView({
          container: "viewDiv", // Reference to the scene div created in step 5
          map: map, // Reference to the map object created before the scene
          scale: 50000000, // Sets the initial scale to 1:50,000,000
          center: [-101.17, 21.78] // Sets the center point of view with lon/lat
        });
      });
    </script>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

在浏览器打开就是这个样子:

轻松自制万千样式地图,使用Arcgis智能Api就能搞定

是不是很好看,这些只是其强大功能的冰山一角,可以添加各种交互功能,比如点击后出现各点经纬度,各种动态的闪烁点、圆,立体的高楼大厦等等。

轻松自制万千样式地图,使用Arcgis智能Api就能搞定

都可以从官方文档中的示例中查看哦。

分享至:
  • 我的微信
  • 微信扫一扫加好友
  • weinxin
  • 我的微信公众号
  • 扫描关注公众号
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: