查找服务区
了解如何计算从位置出发在给定行驶时间内可以到达的区域。
服务区（也称为等时线）是一个面，用于表示在街道网络上行驶或行走时可以到达的区域。可以到达的区域受时间或距离的限制 。要计算服务区域，可以使用服务区服务。可以提供起始位置 (设施点)、一个或多个时间或距离值，以及空间参考。一旦处理完成，服务将返回可以到达的服务区域。
在本教程中，您将在单击地图时创建并显示 5 分钟、10 分钟和 15 分钟的行驶时间服务区。
要了解如何查找前往不同位置的路径和方向，请访问获取路径和方向教程。
步骤
创建新 Pen
添加模块
在
require语句中，添加serviceArea、ServiceAreaParameters、FeatureSet和Graphic模块。GeoScene API for JavaScript 使用 AMD 模块。
require函数用于加载模块，以便它们可在主function中使用。保持模块引用和函数参数的顺序相同很重要。Add line. Add line. Add line. Add line. Change line 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>GeoScene API for JavaScript Tutorials: 查找服务区</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.23/"></script> <script> require([ "esri/config", "geoscene/Map", "esri/views/MapView", "esri/rest/serviceArea", "esri/rest/support/ServiceAreaParameters", "esri/rest/support/FeatureSet", "esri/Graphic" ], function(geosceneConfig,Map, MapView, serviceArea, ServiceAreaParams, FeatureSet, Graphic) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "geoscene-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [135.5023,34.6937], //Longitude, latitude zoom: 11 }); const serviceAreaUrl = "https://route-api.geoscene.cn/arcgis/rest/services/World/ServiceAreas/NAServer/ServiceArea_World/solveServiceArea"; view.on("click", function(event){ const locationGraphic = createGraphic(event.mapPoint); const driveTimeCutoffs = [5,10,15]; // Minutes const serviceAreaParams = createServiceAreaParams(locationGraphic, driveTimeCutoffs, view.spatialReference); solveServiceArea(serviceAreaUrl, serviceAreaParams); }); // Create the location graphic function createGraphic(point) { view.graphics.removeAll(); const graphic = new Graphic({ geometry: point, symbol: { type: "simple-marker", color: "white", size: 8 } }); view.graphics.add(graphic); return graphic; } function createServiceAreaParams(locationGraphic, driveTimeCutoffs, outSpatialReference) { // Create one or more locations (facilities) to solve for const featureSet = new FeatureSet({ features: [locationGraphic] }); // Set all of the input parameters for the service const taskParameters = new ServiceAreaParams({ facilities: featureSet, defaultBreaks: driveTimeCutoffs, trimOuterPolygon: true, outSpatialReference: outSpatialReference }); return taskParameters; } function solveServiceArea(url, serviceAreaParams) { return serviceArea.solve(url, serviceAreaParams) .then(function(result){ if (result.serviceAreaPolygons.length) { // Draw each service area polygon result.serviceAreaPolygons.forEach(function(graphic){ graphic.symbol = { type: "simple-fill", color: "rgba(255,50,50,.25)" } view.graphics.add(graphic,0); }); } }, function(error){ console.log(error); }); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
更新地图
街道底图图层通常用于路径分析应用程序。更新 basemap 属性以使用 geoscene-navigation 底图图层，并将地图的位置更改为以 Osaka 为中心。
将
basemap属性从tianditu-vector更新为geoscene-navigation。Change line 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>GeoScene API for JavaScript Tutorials: 查找服务区</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/rest/serviceArea", "geoscene/rest/support/ServiceAreaParameters", "geoscene/rest/support/FeatureSet", "geoscene/Graphic" ], function(geosceneConfig,Map, MapView, serviceArea, ServiceAreaParams, FeatureSet, Graphic) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "geoscene-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [135.5023,34.6937], //Longitude, latitude zoom: 11 }); const serviceAreaUrl = "https://route-api.geoscene.cn/arcgis/rest/services/World/ServiceAreas/NAServer/ServiceArea_World/solveServiceArea"; view.on("click", function(event){ const locationGraphic = createGraphic(event.mapPoint); const driveTimeCutoffs = [5,10,15]; // Minutes const serviceAreaParams = createServiceAreaParams(locationGraphic, driveTimeCutoffs, view.spatialReference); solveServiceArea(serviceAreaUrl, serviceAreaParams); }); // Create the location graphic function createGraphic(point) { view.graphics.removeAll(); const graphic = new Graphic({ geometry: point, symbol: { type: "simple-marker", color: "white", size: 8 } }); view.graphics.add(graphic); return graphic; } function createServiceAreaParams(locationGraphic, driveTimeCutoffs, outSpatialReference) { // Create one or more locations (facilities) to solve for const featureSet = new FeatureSet({ features: [locationGraphic] }); // Set all of the input parameters for the service const taskParameters = new ServiceAreaParams({ facilities: featureSet, defaultBreaks: driveTimeCutoffs, trimOuterPolygon: true, outSpatialReference: outSpatialReference }); return taskParameters; } function solveServiceArea(url, serviceAreaParams) { return serviceArea.solve(url, serviceAreaParams) .then(function(result){ if (result.serviceAreaPolygons.length) { // Draw each service area polygon result.serviceAreaPolygons.forEach(function(graphic){ graphic.symbol = { type: "simple-fill", color: "rgba(255,50,50,.25)" } view.graphics.add(graphic,0); }); } }, function(error){ console.log(error); }); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>更改
zoom和center属性以便以 Osaka 为中心。Change line Change line 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>GeoScene API for JavaScript Tutorials: 查找服务区</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/rest/serviceArea", "geoscene/rest/support/ServiceAreaParameters", "geoscene/rest/support/FeatureSet", "geoscene/Graphic" ], function(geosceneConfig,Map, MapView, serviceArea, ServiceAreaParams, FeatureSet, Graphic) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "geoscene-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [135.5023,34.6937], //经度、纬度 zoom: 11 }); const serviceAreaUrl = "https://route-api.geoscene.cn/arcgis/rest/services/World/ServiceAreas/NAServer/ServiceArea_World/solveServiceArea"; view.on("click", function(event){ const locationGraphic = createGraphic(event.mapPoint); const driveTimeCutoffs = [5,10,15]; // Minutes const serviceAreaParams = createServiceAreaParams(locationGraphic, driveTimeCutoffs, view.spatialReference); solveServiceArea(serviceAreaUrl, serviceAreaParams); }); // Create the location graphic function createGraphic(point) { view.graphics.removeAll(); const graphic = new Graphic({ geometry: point, symbol: { type: "simple-marker", color: "white", size: 8 } }); view.graphics.add(graphic); return graphic; } function createServiceAreaParams(locationGraphic, driveTimeCutoffs, outSpatialReference) { // Create one or more locations (facilities) to solve for const featureSet = new FeatureSet({ features: [locationGraphic] }); // Set all of the input parameters for the service const taskParameters = new ServiceAreaParams({ facilities: featureSet, defaultBreaks: driveTimeCutoffs, trimOuterPolygon: true, outSpatialReference: outSpatialReference }); return taskParameters; } function solveServiceArea(url, serviceAreaParams) { return serviceArea.solve(url, serviceAreaParams) .then(function(result){ if (result.serviceAreaPolygons.length) { // Draw each service area polygon result.serviceAreaPolygons.forEach(function(graphic){ graphic.symbol = { type: "simple-fill", color: "rgba(255,50,50,.25)" } view.graphics.add(graphic,0); }); } }, function(error){ console.log(error); }); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
定义服务 url
serviceArea 模块可向服务发出请求并返回结果。使用 serviceArea 类访问服务区服务。
定义属性
serviceAreaUrl以引用 url。Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>GeoScene API for JavaScript Tutorials: 查找服务区</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/rest/serviceArea", "geoscene/rest/support/ServiceAreaParameters", "geoscene/rest/support/FeatureSet", "geoscene/Graphic" ], function(geosceneConfig,Map, MapView, serviceArea, ServiceAreaParams, FeatureSet, Graphic) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "geoscene-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [135.5023,34.6937], //经度、纬度 zoom: 11 }); const serviceAreaUrl = "https://route-api.geoscene.cn/arcgis/rest/services/World/ServiceAreas/NAServer/ServiceArea_World/solveServiceArea"; view.on("click", function(event){ const locationGraphic = createGraphic(event.mapPoint); const driveTimeCutoffs = [5,10,15]; // Minutes const serviceAreaParams = createServiceAreaParams(locationGraphic, driveTimeCutoffs, view.spatialReference); solveServiceArea(serviceAreaUrl, serviceAreaParams); }); // Create the location graphic function createGraphic(point) { view.graphics.removeAll(); const graphic = new Graphic({ geometry: point, symbol: { type: "simple-marker", color: "white", size: 8 } }); view.graphics.add(graphic); return graphic; } function createServiceAreaParams(locationGraphic, driveTimeCutoffs, outSpatialReference) { // Create one or more locations (facilities) to solve for const featureSet = new FeatureSet({ features: [locationGraphic] }); // Set all of the input parameters for the service const taskParameters = new ServiceAreaParams({ facilities: featureSet, defaultBreaks: driveTimeCutoffs, trimOuterPolygon: true, outSpatialReference: outSpatialReference }); return taskParameters; } function solveServiceArea(url, serviceAreaParams) { return serviceArea.solve(url, serviceAreaParams) .then(function(result){ if (result.serviceAreaPolygons.length) { // Draw each service area polygon result.serviceAreaPolygons.forEach(function(graphic){ graphic.symbol = { type: "simple-fill", color: "rgba(255,50,50,.25)" } view.graphics.add(graphic,0); }); } }, function(error){ console.log(error); }); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
添加点图形
使用点图形显示服务区起点的位置 (设施点)。
添加
click处理程序以将点图形添加至view。Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>GeoScene API for JavaScript Tutorials: 查找服务区</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/rest/serviceArea", "geoscene/rest/support/ServiceAreaParameters", "geoscene/rest/support/FeatureSet", "geoscene/Graphic" ], function(geosceneConfig,Map, MapView, serviceArea, ServiceAreaParams, FeatureSet, Graphic) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "geoscene-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [135.5023,34.6937], //Longitude, latitude zoom: 11 }); const serviceAreaUrl = "https://route-api.geoscene.cn/arcgis/rest/services/World/ServiceAreas/NAServer/ServiceArea_World/solveServiceArea"; view.on("click", function(event){ const locationGraphic = createGraphic(event.mapPoint); const driveTimeCutoffs = [5,10,15]; // Minutes const serviceAreaParams = createServiceAreaParams(locationGraphic, driveTimeCutoffs, view.spatialReference); solveServiceArea(serviceAreaUrl, serviceAreaParams); }); // Create the location graphic function createGraphic(point) { view.graphics.removeAll(); const graphic = new Graphic({ geometry: point, symbol: { type: "simple-marker", color: "white", size: 8 } }); view.graphics.add(graphic); return graphic; } function createServiceAreaParams(locationGraphic, driveTimeCutoffs, outSpatialReference) { // Create one or more locations (facilities) to solve for const featureSet = new FeatureSet({ features: [locationGraphic] }); // Set all of the input parameters for the service const taskParameters = new ServiceAreaParams({ facilities: featureSet, defaultBreaks: driveTimeCutoffs, trimOuterPolygon: true, outSpatialReference: outSpatialReference }); return taskParameters; } function solveServiceArea(url, serviceAreaParams) { return serviceArea.solve(url, serviceAreaParams) .then(function(result){ if (result.serviceAreaPolygons.length) { // Draw each service area polygon result.serviceAreaPolygons.forEach(function(graphic){ graphic.symbol = { type: "simple-fill", color: "rgba(255,50,50,.25)" } view.graphics.add(graphic,0); }); } }, function(error){ console.log(error); }); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>创建
createGraphic函数，该函数将点作为参数，并返回一个白色Graphic。其每次都应移除所有图形。Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>GeoScene API for JavaScript Tutorials: 查找服务区</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/rest/serviceArea", "geoscene/rest/support/ServiceAreaParameters", "geoscene/rest/support/FeatureSet", "geoscene/Graphic" ], function(geosceneConfig,Map, MapView, serviceArea, ServiceAreaParams, FeatureSet, Graphic) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "geoscene-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [135.5023,34.6937], //Longitude, latitude zoom: 11 }); const serviceAreaUrl = "https://route-api.geoscene.cn/arcgis/rest/services/World/ServiceAreas/NAServer/ServiceArea_World/solveServiceArea"; view.on("click", function(event){ const locationGraphic = createGraphic(event.mapPoint); const driveTimeCutoffs = [5,10,15]; // Minutes const serviceAreaParams = createServiceAreaParams(locationGraphic, driveTimeCutoffs, view.spatialReference); solveServiceArea(serviceAreaUrl, serviceAreaParams); }); // 创建位置图形 function createGraphic(point) { view.graphics.removeAll(); const graphic = new Graphic({ geometry: point, symbol: { type: "simple-marker", color: "white", size: 8 } }); view.graphics.add(graphic); return graphic; } function createServiceAreaParams(locationGraphic, driveTimeCutoffs, outSpatialReference) { // Create one or more locations (facilities) to solve for const featureSet = new FeatureSet({ features: [locationGraphic] }); // Set all of the input parameters for the service const taskParameters = new ServiceAreaParams({ facilities: featureSet, defaultBreaks: driveTimeCutoffs, trimOuterPolygon: true, outSpatialReference: outSpatialReference }); return taskParameters; } function solveServiceArea(url, serviceAreaParams) { return serviceArea.solve(url, serviceAreaParams) .then(function(result){ if (result.serviceAreaPolygons.length) { // Draw each service area polygon result.serviceAreaPolygons.forEach(function(graphic){ graphic.symbol = { type: "simple-fill", color: "rgba(255,50,50,.25)" } view.graphics.add(graphic,0); }); } }, function(error){ console.log(error); }); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>更新
click处理程序以调用createGraphic函数并将图形存储在locationGraphic中。Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>GeoScene API for JavaScript Tutorials: 查找服务区</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/rest/serviceArea", "geoscene/rest/support/ServiceAreaParameters", "geoscene/rest/support/FeatureSet", "geoscene/Graphic" ], function(geosceneConfig,Map, MapView, serviceArea, ServiceAreaParams, FeatureSet, Graphic) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "geoscene-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [135.5023,34.6937], //Longitude, latitude zoom: 11 }); const serviceAreaUrl = "https://route-api.geoscene.cn/arcgis/rest/services/World/ServiceAreas/NAServer/ServiceArea_World/solveServiceArea"; view.on("click", function(event){ const locationGraphic = createGraphic(event.mapPoint); const driveTimeCutoffs = [5,10,15]; // Minutes const serviceAreaParams = createServiceAreaParams(locationGraphic, driveTimeCutoffs, view.spatialReference); solveServiceArea(serviceAreaUrl, serviceAreaParams); }); // Create the location graphic function createGraphic(point) { view.graphics.removeAll(); const graphic = new Graphic({ geometry: point, symbol: { type: "simple-marker", color: "white", size: 8 } }); view.graphics.add(graphic); return graphic; } function createServiceAreaParams(locationGraphic, driveTimeCutoffs, outSpatialReference) { // Create one or more locations (facilities) to solve for const featureSet = new FeatureSet({ features: [locationGraphic] }); // Set all of the input parameters for the service const taskParameters = new ServiceAreaParams({ facilities: featureSet, defaultBreaks: driveTimeCutoffs, trimOuterPolygon: true, outSpatialReference: outSpatialReference }); return taskParameters; } function solveServiceArea(url, serviceAreaParams) { return serviceArea.solve(url, serviceAreaParams) .then(function(result){ if (result.serviceAreaPolygons.length) { // Draw each service area polygon result.serviceAreaPolygons.forEach(function(graphic){ graphic.symbol = { type: "simple-fill", color: "rgba(255,50,50,.25)" } view.graphics.add(graphic,0); }); } }, function(error){ console.log(error); }); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>单击地图以查看点图形。
创建服务区参数
serviceArea 使用行驶时间 (中断) 和空间参考参数来计算服务区面。它还使用 FeatureSet 来设置 facilities (位置)， 将从此处绘制服务区面。在 View 中使用 click 处理程序来设置创建服务区所需的参数。
创建
createServiceAreaParams函数，该函数使用点图形、行驶时间和空间参考参数。Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>GeoScene API for JavaScript Tutorials: 查找服务区</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/rest/serviceArea", "geoscene/rest/support/ServiceAreaParameters", "geoscene/rest/support/FeatureSet", "geoscene/Graphic" ], function(geosceneConfig,Map, MapView, serviceArea, ServiceAreaParams, FeatureSet, Graphic) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "geoscene-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [135.5023,34.6937], //Longitude, latitude zoom: 11 }); const serviceAreaUrl = "https://route-api.geoscene.cn/arcgis/rest/services/World/ServiceAreas/NAServer/ServiceArea_World/solveServiceArea"; view.on("click", function(event){ const locationGraphic = createGraphic(event.mapPoint); const driveTimeCutoffs = [5,10,15]; // Minutes const serviceAreaParams = createServiceAreaParams(locationGraphic, driveTimeCutoffs, view.spatialReference); solveServiceArea(serviceAreaUrl, serviceAreaParams); }); // Create the location graphic function createGraphic(point) { view.graphics.removeAll(); const graphic = new Graphic({ geometry: point, symbol: { type: "simple-marker", color: "white", size: 8 } }); view.graphics.add(graphic); return graphic; } function createServiceAreaParams(locationGraphic, driveTimeCutoffs, outSpatialReference) { // Create one or more locations (facilities) to solve for const featureSet = new FeatureSet({ features: [locationGraphic] }); // Set all of the input parameters for the service const taskParameters = new ServiceAreaParams({ facilities: featureSet, defaultBreaks: driveTimeCutoffs, trimOuterPolygon: true, outSpatialReference: outSpatialReference }); return taskParameters; } function solveServiceArea(url, serviceAreaParams) { return serviceArea.solve(url, serviceAreaParams) .then(function(result){ if (result.serviceAreaPolygons.length) { // Draw each service area polygon result.serviceAreaPolygons.forEach(function(graphic){ graphic.symbol = { type: "simple-fill", color: "rgba(255,50,50,.25)" } view.graphics.add(graphic,0); }); } }, function(error){ console.log(error); }); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>创建
FeatureSet以使用点图形设置features属性。Add line. Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>GeoScene API for JavaScript Tutorials: 查找服务区</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/rest/serviceArea", "geoscene/rest/support/ServiceAreaParameters", "geoscene/rest/support/FeatureSet", "geoscene/Graphic" ], function(geosceneConfig,Map, MapView, serviceArea, ServiceAreaParams, FeatureSet, Graphic) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "geoscene-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [135.5023,34.6937], //Longitude, latitude zoom: 11 }); const serviceAreaUrl = "https://route-api.geoscene.cn/arcgis/rest/services/World/ServiceAreas/NAServer/ServiceArea_World/solveServiceArea"; view.on("click", function(event){ const locationGraphic = createGraphic(event.mapPoint); const driveTimeCutoffs = [5,10,15]; // Minutes const serviceAreaParams = createServiceAreaParams(locationGraphic, driveTimeCutoffs, view.spatialReference); solveServiceArea(serviceAreaUrl, serviceAreaParams); }); // Create the location graphic function createGraphic(point) { view.graphics.removeAll(); const graphic = new Graphic({ geometry: point, symbol: { type: "simple-marker", color: "white", size: 8 } }); view.graphics.add(graphic); return graphic; } function createServiceAreaParams(locationGraphic, driveTimeCutoffs, outSpatialReference) { // 创建要进行求解的一个或多个位置 (设施点) const featureSet = new FeatureSet({ features: [locationGraphic] }); // Set all of the input parameters for the service const taskParameters = new ServiceAreaParams({ facilities: featureSet, defaultBreaks: driveTimeCutoffs, trimOuterPolygon: true, outSpatialReference: outSpatialReference }); return taskParameters; } function solveServiceArea(url, serviceAreaParams) { return serviceArea.solve(url, serviceAreaParams) .then(function(result){ if (result.serviceAreaPolygons.length) { // Draw each service area polygon result.serviceAreaPolygons.forEach(function(graphic){ graphic.symbol = { type: "simple-fill", color: "rgba(255,50,50,.25)" } view.graphics.add(graphic,0); }); } }, function(error){ console.log(error); }); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>创建
ServiceAreaParams并返回taskParameters元素。Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>GeoScene API for JavaScript Tutorials: 查找服务区</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/rest/serviceArea", "geoscene/rest/support/ServiceAreaParameters", "geoscene/rest/support/FeatureSet", "geoscene/Graphic" ], function(geosceneConfig,Map, MapView, serviceArea, ServiceAreaParams, FeatureSet, Graphic) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "geoscene-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [135.5023,34.6937], //Longitude, latitude zoom: 11 }); const serviceAreaUrl = "https://route-api.geoscene.cn/arcgis/rest/services/World/ServiceAreas/NAServer/ServiceArea_World/solveServiceArea"; view.on("click", function(event){ const locationGraphic = createGraphic(event.mapPoint); const driveTimeCutoffs = [5,10,15]; // Minutes const serviceAreaParams = createServiceAreaParams(locationGraphic, driveTimeCutoffs, view.spatialReference); solveServiceArea(serviceAreaUrl, serviceAreaParams); }); // Create the location graphic function createGraphic(point) { view.graphics.removeAll(); const graphic = new Graphic({ geometry: point, symbol: { type: "simple-marker", color: "white", size: 8 } }); view.graphics.add(graphic); return graphic; } function createServiceAreaParams(locationGraphic, driveTimeCutoffs, outSpatialReference) { // 创建要进行求解的一个或多个位置 (设施点) const featureSet = new FeatureSet({ features: [locationGraphic] }); // 设置服务的所有输入参数 const taskParameters = new ServiceAreaParams({ facilities: featureSet, defaultBreaks: driveTimeCutoffs, trimOuterPolygon: true, outSpatialReference: outSpatialReference }); return taskParameters; } function solveServiceArea(url, serviceAreaParams) { return serviceArea.solve(url, serviceAreaParams) .then(function(result){ if (result.serviceAreaPolygons.length) { // Draw each service area polygon result.serviceAreaPolygons.forEach(function(graphic){ graphic.symbol = { type: "simple-fill", color: "rgba(255,50,50,.25)" } view.graphics.add(graphic,0); }); } }, function(error){ console.log(error); }); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>更新
click处理程序以添加 5、10 和 15 分钟的行驶时间中断值，并调用createServiceAreaParams函数。Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>GeoScene API for JavaScript Tutorials: 查找服务区</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/rest/serviceArea", "geoscene/rest/support/ServiceAreaParameters", "geoscene/rest/support/FeatureSet", "geoscene/Graphic" ], function(geosceneConfig,Map, MapView, serviceArea, ServiceAreaParams, FeatureSet, Graphic) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "geoscene-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [135.5023,34.6937], //Longitude, latitude zoom: 11 }); const serviceAreaUrl = "https://route-api.geoscene.cn/arcgis/rest/services/World/ServiceAreas/NAServer/ServiceArea_World/solveServiceArea"; view.on("click", function(event){ const locationGraphic = createGraphic(event.mapPoint); const driveTimeCutoffs = [5,10,15]; // 分钟 const serviceAreaParams = createServiceAreaParams(locationGraphic, driveTimeCutoffs, view.spatialReference); solveServiceArea(serviceAreaUrl, serviceAreaParams); }); // Create the location graphic function createGraphic(point) { view.graphics.removeAll(); const graphic = new Graphic({ geometry: point, symbol: { type: "simple-marker", color: "white", size: 8 } }); view.graphics.add(graphic); return graphic; } function createServiceAreaParams(locationGraphic, driveTimeCutoffs, outSpatialReference) { // Create one or more locations (facilities) to solve for const featureSet = new FeatureSet({ features: [locationGraphic] }); // Set all of the input parameters for the service const taskParameters = new ServiceAreaParams({ facilities: featureSet, defaultBreaks: driveTimeCutoffs, trimOuterPolygon: true, outSpatialReference: outSpatialReference }); return taskParameters; } function solveServiceArea(url, serviceAreaParams) { return serviceArea.solve(url, serviceAreaParams) .then(function(result){ if (result.serviceAreaPolygons.length) { // Draw each service area polygon result.serviceAreaPolygons.forEach(function(graphic){ graphic.symbol = { type: "simple-fill", color: "rgba(255,50,50,.25)" } view.graphics.add(graphic,0); }); } }, function(error){ console.log(error); }); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
求解服务区
要求解服务区，请将 serviceAreaParams 传递至 solve 方法。使用 solveServiceArea 函数查找服务区面并将生成的图形添加到 view
创建
solveServiceArea函数。Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>GeoScene API for JavaScript Tutorials: 查找服务区</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/rest/serviceArea", "geoscene/rest/support/ServiceAreaParameters", "geoscene/rest/support/FeatureSet", "geoscene/Graphic" ], function(geosceneConfig,Map, MapView, serviceArea, ServiceAreaParams, FeatureSet, Graphic) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "geoscene-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [135.5023,34.6937], //Longitude, latitude zoom: 11 }); const serviceAreaUrl = "https://route-api.geoscene.cn/arcgis/rest/services/World/ServiceAreas/NAServer/ServiceArea_World/solveServiceArea"; view.on("click", function(event){ const locationGraphic = createGraphic(event.mapPoint); const driveTimeCutoffs = [5,10,15]; // Minutes const serviceAreaParams = createServiceAreaParams(locationGraphic, driveTimeCutoffs, view.spatialReference); solveServiceArea(serviceAreaUrl, serviceAreaParams); }); // Create the location graphic function createGraphic(point) { view.graphics.removeAll(); const graphic = new Graphic({ geometry: point, symbol: { type: "simple-marker", color: "white", size: 8 } }); view.graphics.add(graphic); return graphic; } function createServiceAreaParams(locationGraphic, driveTimeCutoffs, outSpatialReference) { // Create one or more locations (facilities) to solve for const featureSet = new FeatureSet({ features: [locationGraphic] }); // 为服务设置所有输入参数 const taskParameters = new ServiceAreaParams({ facilities: featureSet, defaultBreaks: driveTimeCutoffs, trimOuterPolygon: true, outSpatialReference: outSpatialReference }); return taskParameters; } function solveServiceArea(url, serviceAreaParams) { return serviceArea.solve(url, serviceAreaParams) .then(function(result){ if (result.serviceAreaPolygons.length) { // Draw each service area polygon result.serviceAreaPolygons.forEach(function(graphic){ graphic.symbol = { type: "simple-fill", color: "rgba(255,50,50,.25)" } view.graphics.add(graphic,0); }); } }, function(error){ console.log(error); }); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>调用
solve方法查找服务区域并将结果添加到view。Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>GeoScene API for JavaScript Tutorials: 查找服务区</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/rest/serviceArea", "geoscene/rest/support/ServiceAreaParameters", "geoscene/rest/support/FeatureSet", "geoscene/Graphic" ], function(geosceneConfig,Map, MapView, serviceArea, ServiceAreaParams, FeatureSet, Graphic) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "geoscene-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [135.5023,34.6937], //Longitude, latitude zoom: 11 }); const serviceAreaUrl = "https://route-api.geoscene.cn/arcgis/rest/services/World/ServiceAreas/NAServer/ServiceArea_World/solveServiceArea"; view.on("click", function(event){ const locationGraphic = createGraphic(event.mapPoint); const driveTimeCutoffs = [5,10,15]; // Minutes const serviceAreaParams = createServiceAreaParams(locationGraphic, driveTimeCutoffs, view.spatialReference); solveServiceArea(serviceAreaUrl, serviceAreaParams); }); // Create the location graphic function createGraphic(point) { view.graphics.removeAll(); const graphic = new Graphic({ geometry: point, symbol: { type: "simple-marker", color: "white", size: 8 } }); view.graphics.add(graphic); return graphic; } function createServiceAreaParams(locationGraphic, driveTimeCutoffs, outSpatialReference) { // Create one or more locations (facilities) to solve for const featureSet = new FeatureSet({ features: [locationGraphic] }); // Set all of the input parameters for the service const taskParameters = new ServiceAreaParams({ facilities: featureSet, defaultBreaks: driveTimeCutoffs, trimOuterPolygon: true, outSpatialReference: outSpatialReference }); return taskParameters; } function solveServiceArea(url, serviceAreaParams) { return serviceArea.solve(url, serviceAreaParams) .then(function(result){ if (result.serviceAreaPolygons.length) { // 绘制每个服务区面 result.serviceAreaPolygons.forEach(function(graphic){ graphic.symbol = { type: "simple-fill", color: "rgba(255,50,50,.25)" } view.graphics.add(graphic,0); }); } }, function(error){ console.log(error); }); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>更新
click处理程序以调用solveServiceArea函数。Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>GeoScene API for JavaScript Tutorials: 查找服务区</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/rest/serviceArea", "geoscene/rest/support/ServiceAreaParameters", "geoscene/rest/support/FeatureSet", "geoscene/Graphic" ], function(geosceneConfig,Map, MapView, serviceArea, ServiceAreaParams, FeatureSet, Graphic) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "geoscene-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [135.5023,34.6937], //Longitude, latitude zoom: 11 }); const serviceAreaUrl = "https://route-api.geoscene.cn/arcgis/rest/services/World/ServiceAreas/NAServer/ServiceArea_World/solveServiceArea"; view.on("click", function(event){ const locationGraphic = createGraphic(event.mapPoint); const driveTimeCutoffs = [5,10,15]; // 分钟 const serviceAreaParams = createServiceAreaParams(locationGraphic, driveTimeCutoffs, view.spatialReference); solveServiceArea(serviceAreaUrl, serviceAreaParams); }); // Create the location graphic function createGraphic(point) { view.graphics.removeAll(); const graphic = new Graphic({ geometry: point, symbol: { type: "simple-marker", color: "white", size: 8 } }); view.graphics.add(graphic); return graphic; } function createServiceAreaParams(locationGraphic, driveTimeCutoffs, outSpatialReference) { // Create one or more locations (facilities) to solve for const featureSet = new FeatureSet({ features: [locationGraphic] }); // Set all of the input parameters for the service const taskParameters = new ServiceAreaParams({ facilities: featureSet, defaultBreaks: driveTimeCutoffs, trimOuterPolygon: true, outSpatialReference: outSpatialReference }); return taskParameters; } function solveServiceArea(url, serviceAreaParams) { return serviceArea.solve(url, serviceAreaParams) .then(function(result){ if (result.serviceAreaPolygons.length) { // Draw each service area polygon result.serviceAreaPolygons.forEach(function(graphic){ graphic.symbol = { type: "simple-fill", color: "rgba(255,50,50,.25)" } view.graphics.add(graphic,0); }); } }, function(error){ console.log(error); }); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
运行应用程序
在 CodePen 中，运行代码以显示地图。
在地图上单击以创建服务区。当您单击地图时，将会看到一个点图形以及行驶时间服务区。服务区表示可在 5 分钟、10 分钟和 15 分钟内到达的区域。
下一步是什么？
要了解如何使用其他API 功能，请参阅以下教程：
解决方案
估计时间
10 分钟