初识地图，Arcgis地图方法库

参考资料：

地图基础知识：

人人都在说GIS，究竟什么才是GIS – 知乎 (zhihu.com)

墨卡托投影、地理坐标系、地面分辨率、地图比例尺_weixin_30300523的博客-CSDN博客

瓦片地图面面观之缩放级别_megomap的专栏-CSDN博客_瓦片地图分辨率

SRID WKID 空间参考简介_bigbigtree-CSDN博客_wkid

天地图_liusaint1992的专栏-CSDN博客

天地图：
国家地理信息公共服务平台 天地图 (tianditu.gov.cn)

天地图入门指导 (tianditu.gov.cn)

天地图示例 (tianditu.gov.cn)

天地图API (tianditu.gov.cn)

!若要使用天地图要先申请密钥

arcgis：

Install and set up | ArcGIS 快速开始 for JavaScript

Overview | ArcGIS 示例 for JavaScript

Map | ArcGIS API for JavaScript

1.加载arcgis资源

​ 下载arcgis包

npm install arcgis
复制代码

​ 引入js，css文件多种方式

​ 在HTML中引入

<link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.18/"></script>
复制代码

​ 在vue项目中引入

<style>
@import url("https://js.arcgis.com/3.28/esri/css/esri.css");
</style>
复制代码

import { loadCss, loadModules } from 'esri-loader'                                                                        mounted() {
    // 加载css;
	loadCss('https://js.arcgis.com/3.28/esri/css/esri.css')
	// 加载方法模块
	loadModules(['esri/map', 'esri/layers/WebTiledLayer', 'esri/geometry/Point', 'esri/layers/TileInfo'])
        .then(([Map, WebTiledLayer, Point, TileInfo]) => {
        //代码
        }.catch(err => {
        // handle any script or module loading errors
          console.error(err)
        })
}
复制代码

2.引用arcgis方法

require([…],function(){})在回调函数中使用arcgis方法

require([ "esri/Map", "esri/views/MapView"],function(Map,MapView){})
复制代码

3.创建Map对象

!这里要注意自己的底图是用的什么坐标系，若用的经纬度坐标系就应该在全局使用经纬度坐标系，若用的墨卡托坐标系就应全局使用坐标系

// Create the Map 创建map对象
var map = new Map({
    // basemap: "hybrid"
    // basemap: "topo"
    // basemap: "streets"
    // basemap: "satellite"
    basemap: "osm"//底图类型
});
复制代码

4.创建MapView对象

<div id="viewDiv"></div>
复制代码

// Create the MapView 创建map盒子
var view = new MapView({
    container: "viewDiv",//绑定dom节点渲染
    map: map,
    // center: [-80, 35],
    center: [116.40769, 39.89945],//初始化时的经纬度
    zoom: 12//级别
});
复制代码

5.添加点标注

• 5.1引用Graphic方法，创建Graphic对象

require(["esri/Graphic"],function (Graphic) {})
复制代码

• 5.2创建point点对象

var point = {
    type: "point",  // 创建点对象
    longitude: -118.80543,//经度
    latitude: 34.02700//纬度
};
复制代码

• 5.3创建markerSymbol标注样式对象

// Create a symbol for drawing the point
var markerSymbol = {//初始化标注对象颜色 线条粗细
    type: "simple-marker",  //标注对象类型
    color: [226, 119, 40],//标注颜色
};
复制代码

自定义图形标注

var markerSymbol = {//初始化标注对象颜色 线条粗细
    type: "picture-marker",  // 图片标注
    url: "http://api.tianditu.gov.cn/img/map/markerA.png",//自定义图片标注
    width: "19px",//标注宽高
    height: "27px",
};
复制代码

• 5.4将点对象和标注样式对象注入到Graphic对象中

var pointGraphic = new Graphic({
    geometry: point,//图形对象
    symbol: markerSymbol//对象config
});
复制代码

• 5.6在视图中添加Graphic对象

view.graphics.add(pointGraphic);//在视图中添加图形对象
复制代码

6.添加线标注

• 6.1引用Graphic方法，创建Graphic对象

require(["esri/Graphic"],function (Graphic) {})
复制代码

• 6.2创建polyline线对象

var polyline = {//创建线对象
    type: "polyline", // autocasts as new Polyline()
    paths: [[-98, 49.5], [-111.3, 52.68], [-93.94, 29.89]]//点集合
};
复制代码

• 6.3创建lineSymbol标注样式对象

// Create a simple line symbol for rendering the line in the view
var lineSymbol = {//线对象样式
    type: "simple-line", //线条类型
    color: [226, 119, 40], 
    width: 2//线条宽度px
};
复制代码

• 6.4将线对象和标注样式对象注入到Graphic对象中

// Create the graphic
var polylineGraphic = new Graphic({
    geometry: polyline, // 添加线
    symbol: lineSymbol, // 添加线样式
});
复制代码

• 6.6在视图中添加Graphic对象

view.graphics.add(polylineGraphic);//在视图中添加图形对象
复制代码

7.添加面

/***************************
*      创建面图形
***************************/

// 创建面对象
var polygon = {
    type: "polygon", // 对象类型
    rings: [[-64.78, 32.3], [-66.07, 18.45], [-80.21, 25.78], [-64.78, 32.3]]//点集合
};

// 创建填充样式
var fillSymbol = {
    type: "simple-fill", // autocasts as new SimpleFillSymbol()
    color: [227, 139, 79, 0.5],
    outline: {//外部线条样式
        color: [255, 255, 255],
        width: 1
    }
};

// 将几何图形和样式添加到图形对象中
var polygonGraphic = new Graphic({
    geometry: polygon,
    symbol: fillSymbol
});
view.graphics.add(polygonGraphic);//将图形添加到视图中
复制代码

8.在地图中绘制点线面

• 8.1引用绘制工具Sketch、GraphicsLayer图形图层

require(["esri/widgets/Sketch"，"esri/layers/GraphicsLayer"], function(
    Sketch,
    Map,
    GraphicsLayer,
    MapView
){}）
复制代码

• 8.2创建图形图层

const layer = new GraphicsLayer();
复制代码

• 8.3将图形图层注入map中

const map = new Map({
    basemap: "topo",
    layers: [layer]
});
复制代码

• 8.4创建绘制工具对象

​ 绑定绘制图层和视图view

const sketch = new Sketch({
    layer: layer,
    view: view,
    // graphic will be selected as soon as it is created
    creationMode: "update"
});
复制代码

• 8.5添加绘制工具ui控件

view.ui.add(sketch, "top-right");//控件类型 样式---摆放的位置
复制代码

9.多图层

• 9.1用ID编号不同的图层

require([
    "esri/Map",
    "esri/views/MapView",
    "esri/Basemap",//底图
    "esri/layers/VectorTileLayer",//矢量瓦片图层
    "esri/layers/TileLayer",//瓦片图层
], function(Map, MapView, Basemap, VectorTileLayer, TileLayer) {

const vectorTileLayer = new VectorTileLayer({
    portalItem: {
        id: "6976148c11bd497d8624206f9ee03e30" // 森林公园道路  地形图  Forest and Parks Canvas
    },
    opacity: .75//图层透明度
});

const imageTileLayer = new TileLayer({
    portalItem: {
    	id: "1b243539f4514b6ba35e7d995890db1d" // 丘陵图  World Hillshade 
    }
});
复制代码

• 9.2将这两个图层整合到basemap中

const basemap = new Basemap({//创建basemap对象
    baseLayers: [//整合多个图层
        imageTileLayer,
        vectorTileLayer
    ]
});
复制代码

• 9.3将basemap注入到map对象中

const map = new Map({//注入到Map对象中
	basemap: basemap,
});
复制代码

10.地图覆盖图片

• 10.1创建图片图层

require([
    "esri/Map",
    "esri/views/MapView",
    "esri/layers/MapImageLayer"
], function (Map, MapView, MapImageLayer) {
var permitsLayer = new MapImageLayer({//创建图片图层
    portalItem: {
        // autocasts as new PortalItem()
        id: "d7892b3c13b44391992ecd42bfa92d01"
    	}
    });
})
复制代码

• 10.2将图片图层注入map对象中

// Create the Map 创建map对象
var map = new Map({
    basemap: "satellite",//底图类型
    layers: [permitsLayer]//注入图片图层
});
复制代码