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

2021-04-2921:05:01 发表评论

摘要

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

分享至：

开篇寄语

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

官方网站

https://www.arcgis.com/

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>

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