笔记系列——ArcGIS API for JavaScript学习笔记

使用tomcat发布本地API

• 打开tomcat 中 webapps 文件夹

• 将下载好的 api 文件夹中 arcgis_js_api 文件夹复制到 webapps 中

• 修改 arcgis_js_api\library\4.10 文件夹中 init.js 文件。

• 查找

[HOSTNAME_AND_PATH_TO_JSAPI]dojo

• 修改

baseUrl:"http://localhost:7080/arcgis_js_api/library/4.10/dojo"

• 启动服务

安装 esri-loader

• 在 cmd 中输入：

npm i esri-loader

• 在 vue 中导入：

import esriLoader from 'esri-loader'

• 在 mounted 声明周期函数中写入测试代码：

mounted () {
    const options = {
      url: 'http://localhost:7080/arcgis_js_api/library/4.10/init.js'
    }
    esriLoader.loadModules(['esri/Map', 'esri/views/MapView'], options)
      .then(([Map, MapView]) => {
        /*eslint-disable */
        var map = new Map({
          basemap: 'topo-vector'
        })
        var view = new MapView({
          container: 'viewDiv',
          map: map,
          center: [-118.71511, 34.09042],
          zoom: 11
        })
      })
  }

• 在 style 中引入 ArcGIS api for javascript 样式

<style scoped>
@import url(
   'http://localhost:7080/arcgis_js_api/library/4.10/esri/css/main.css'
)
</style>

处理tomcat跨域问题

• 因为我们arcgis 是获取服务器上的文件，所以使用代理的方式并不能解决我们的问题

• 所以直接修改服务器，使得服务器可以直接处理跨域问题

• 需要两个 jar 包：

  cors-filter-2.4.jar

  java-property-utils-1.9.1.jar

  百度云下载链接 https://pan.baidu.com/s/11JqcfPJTQA4mP4gzoTHpLA

  提取码是 2g2v

• 将上面的两个包放入 tomcat中的lib文件夹中。

• 打开 tomcat 中的 conf 文件夹中下的 web.xml。

• 添加如下代码到web.xml文件中web-app下

 <filter>
	<filter-name>CORS</filter-name>
	<filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
	<init-param>
		<param-name>cors.allowOrigin</param-name>
		<param-value>*</param-value>
	</init-param>
	<init-param>
		<param-name>cors.supportedMethods</param-name>
		<param-value>GET,POST,HEAD,PUT,DELETE</param-value>
	</init-param>
	<init-param>
		<param-name>cors.supportedHeaders</param-name>        
		<param-value>Accept,Origin,X-Requested-With,Content-Type,Last-Modified</param-value>
		</init-param>
	<init-param>
		<param-name>cors.exposedHeaders</param-name>
		<param-value>Set-Cookie</param-value>
	</init-param>
	<init-param>
		<param-name>cors.supportsCredentials</param-name>
		<param-value>true</param-value>
	</init-param>
</filter>
<filter-mapping>
	<filter-name>CORS</filter-name>
	<url-pattern>/*</url-pattern>
</filter-mapping>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zBaAQRcO-1577321079360)(H:\0笔记集合\ArcGIS API for JavaScript\img\1556122062253.png)]

• 重启服务器

Map（esri）

• 官方API

https://developers.arcgis.com/javascript/latest/api-reference/esri-Map.html

• 引用：

require(["esri/Map"], function(Map) { /* code goes here */ })

• 范例：

let map = new Map({
	basemap: "topo"
})

var view = new MapView({
	container: 'viewDiv',
	map: map
})

• 其他基础地图：
  • topo、streets、satellite、hybrid、dark-gray
  • gray、national-geographic、oceans、osm
  • terrain、dark-gray-vector、gray-vector、streets-vector
  • streets-night-vector、streets-navigation-vector
  • topo-vector、streets-relief-vector

WebMap(esri)

• 官方API

https://developers.arcgis.com/javascript/latest/api-reference/esri-WebMap.html

• 引用：

require(["esri/WebMap"], function(WebMap) { /* code goes here */ })

• 继承自 Map
• 加载来自 ArcGIS Online 和 ArcGIS Enterprise portal 到 MapView 中。
• 示例：

var webmap = new WebMap({
  portalItem: {
    id: "e691172598f04ea8881cd2a4adaa45ba"
  }
})

创建点、线面(esri/widgets/Sketch)

• widgets 小工具

• 需要的引用：

require([
    "esri/widgets/Sketch",
    "esri/layers/GraphicsLayer"
], function(
	Sketch,
	GraphicsLayer
) { /* code goes here */ });

• 示例：

const layer = new GraphicsLayer();
const map = new Map({
	basemap: "streets",
	layers: [layer]
});

const view = new MapView({
	container: "viewDiv",
    map: map,
	zoom: 5,
	center: [90, 45]
});

const sketch = new Sketch({
    layer: layer,
    view: view
});

view.ui.add(sketch, "top-right");

监听（esri/views/View）

• 官方API

https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View.html

• 示例

view.on('click', function (event) {
    console.log(event.point)
})

• click 中 event属性
  • mapPoint: Point
    • 返回点击点对象
  • x: Number,
    • 点距离地图容器左上角的横坐标
  • y: Number,
    • 点距离地图容器左上角的纵坐标
  • button: Number,
  • buttons: Number,
  • type: String,
    • 触发事件的类型
  • stopPropagation: Function,
  • timestamp: Number,
    • 距离上一次事件发生的时间间隔
  • native: Object

view.ui

• 引入：

require(['esir/views/MapView']),function()MapView){}

• 官方API

https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View.html

• 示例：

const sketch = new Sketch({
    layer: layer,
    view: view
})
        
view.ui.add(sketch, 'top-right')

• 将定义好的小工具，添加到视图中
• 有两个参数，第一个参数是控件对象，第二个参数是位置

加载动态地图

• 加载的模块

require(["esri/layers/MapImageLayer"], function(MapImageLayer){}

• 示例：

require(["esri/layers/MapImageLayer", "esri/Map"], function(MapImageLayer, Map){
  const map = new map();
  const layer = new MapImageLayer({
    url: "http://localhost:6080/arcgis/rest/services/smartschool/smartschool/MapServer"
  });
  map.add(layer);
});

function(MapImageLayer, Map){
  const map = new map();
  const layer = new MapImageLayer({
    url: "http://localhost:6080/arcgis/rest/services/smartschool/smartschool/MapServer"
  });
  map.add(layer);
});