Book access Arcgis api for Javascript + arcgisServer + arcSDE notes (1)
3 Arcgis api for Javascript
Arcgis api for Javascript provides a series of interfaces, which can realize map loading, geographic data display and editing, spatial analysis and other functions on Web pages.
This chapter only introduces the basic framework construction, data loading, etc. the detailed development documents are listed in https://developers.arcgis.com/javascript/latest/guide/ Review.
3.1 api installation and deployment
To use arcgis api for js, you only need to write in the web page code:
<script src="https://js.arcgis.com/4.14/"></script>
(now it has been updated to 4.15)
The web page will call arcgis api online. However, if you need to deploy offline, you need to download the api locally and deploy it to the server.
First from the official website( https://developers.arcgis.com/javascript/latest/guide/get-api/ )Download the api package from.
Set up a website on IIS and register some entries in the MIME type of the website (details are described in the above website).
The unzipped ArcGIS_ JS_ The API folder is placed in the same folder as the web site. Then, you need to modify arcgis_js_api\library\4.14\init JS and arcgis_js_api\library\4.14\dojo\dojo JS two files
Open init JS, search baseUrl: ", and replace the [hostname\u and\path\u to\u jsapi] content with the server path, such as:
Website address is http://localhost/ArcHelloWorld/ , then [] changed to http://localhost/ArcHelloWorld/arcgis_js_api/library/4.14/ . Final effect: baseUrl: " http://localhost/ArcHelloWorld/arcgis_js_api/library/4.14/dojo".
For dojo JS file to do the same.
You can then reference the locally deployed api. The reference code is as follows:
<script src="http://localhost/ArcHelloWorld/arcgis_js_api/library/4.14/dojo/dojo.js"></script>
(equivalent to <script SRC=“ https://js.arcgis.com/4.14/ "> </script>)
Note that the local api link must be in the form of http or https (https is officially recommended), so it must be deployed on the server.
For interface effect, you also need to reference the CSS file of ArcGIS (<link rel= "stylesheet" href=“ https://js.arcgis.com/4.14/esri/css/main.css ">), which can be downloaded to the local offline.
3.2 hello world
The following is the hello world code provided in the official document (only the <script> part is intercepted):
<script>
require([
"esri/Map",
"esri/views/MapView"
], function(Map, MapView) {
var map = new Map({
basemap: "topo-vector"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-118.71511,34.09042],
zoom: 11
});
});
</script>
The relevant codes used in the arcgis api are put in require(["esri/Map", "esri/views/MapView"], function(Map, MapView) {...}). In require, fill in the module to be referenced, take the module name as the parameter of function, and write the program logic in the function body.
3.3 layer loading
Here is the code to add a map:
//require("esri/layers/MapImageLayer")
var mylayer = new MapImageLayer({
url: "http://localhost:6080/arcgis/rest/services/ test map /MapServer ",
});
Map.add(mylayer);The url is the link to the map service published on the arcgis server, and the "test map" is the name of the service. MapImageLayer will load the whole map, including all layers in the map (as shown in the following figure, the layerList widget is on the left).
Note: you can use the sublayers attribute to load some of these layers.
If you want to load a vector layer separately, you need to use FeatureLayer in a similar way. The url of the FeatureLayer can be viewed from the server. For example, if you want to load a vector layer in the above figure, you can browse in the browser http://localhost:6080/arcgis/rest/services/ Test map /MapServer. You can view the layer list in the web page. Each layer corresponds to a number.
If the code of "management range boundary stake displacement point" is 0, this layer can be loaded separately with the following code:
var myFeature = new FeatureLayer({
url: "http://localhost:6080/arcgis/rest/services/ test map /MapServer/0 ",
});The advantage of loading a layer separately is that it can be configured separately, including symbol styles such as colors and lines, click events, pop-up windows, etc.
It is recommended that vector data requiring interaction be loaded separately with FeatureLayer for configuration and editing; The image, road network and other base map information is loaded with MapImageLayer.
Note:
If it is a layer that needs to provide editing function, it needs to be loaded from FeatureServer. FeatureServer refers to the Feature access checked during map publishing. Only this layer can enable the editing function. The method of loading this layer is the same as above. Just change the MapServer in the url to FeatureServer.
3.4 using widget s
Arcgis provides a considerable number of widgets that can greatly simplify development. For example, the layerList widget mentioned above can display the layers in the map and control their opening and closing. In addition, there are common functions such as navigation control bar, Drawing toolbar, search box, measurement tool, etc.
Specific contents can be found in https://developers.arcgis.com/javascript/latest/api-reference/ View in.
Some common widgets are described below.
3.4.1 LayerList
The layer list is automatically displayed. The following is an example of displaying a legend. The
var layerList = new LayerList({
view: view,
listItemCreatedFunction: function (event)
{
const item = event.item;
if (item.layer.type != "group")
{
// don't show legend twice
item.panel = {
content: "legend",
open: false,//Default do not expand
};
}
}
});
view.ui.add(layerList, "bottom-left");3.4.2 Compass ScaleBar
var compassWidget = new Compass({
view: view
});
// Add the Compass widget to the top left corner of the view
view.ui.add(compassWidget, "top-left");
var scaleBar = new ScaleBar({
view: view
});
// Add widget to the bottom left corner of the view
view.ui.add(scaleBar, {
position: "bottom-left"
});3.4.3 Search box
The search box is used to search the features in the map. The default data source is the arcgis geocoding server (it is useless and can be turned off). You can customize the search data source and search rules for each layer.
var searchWidget = new Search({
view: view,
locationEnabled:false,//It is useless to use local location
includeDefaultSources:false,
sources: [{
layer: Jihua2019Layer,
searchFields: ["OBJECTID","Layer"],
outFields: ["*"],
displayField: "OBJECTID",
exactMatch: false,
suggestionsEnabled:true,
suggestionTemplate: "{OBJECTID}, {Layer}", ,
// Note: suggestions can only be used using the 10.3 geocoding service, which must have a suggestion capability loaded or a 10.3 feature layer that supports paging, and i.e.supportsPagination = true.
name: "Search for the plot to be sold in the new town in 2019",
placeholder: "ID Or name"
},
{
layer: CunliangLayer,
searchFields: ["Summary bid"],
displayField: "Summary bid",
exactMatch: false,
outFields: ["Summary bid", "ID", "For planning"],
name: "Search for new town stock land",
placeholder: ""
},
{
layer: roadLayer,
searchFields: ["ID"],
displayField: "ID",
exactMatch: false,
outFields: [ "ID"],
name: "road",
placeholder: ""
},]
});
3.4.4 Editor
You can edit all editable layers, including the drawing and its attributes. Editable layers need to be from FeatureServer.
var editor = new Editor({
view: view
});
view.ui.add(editor, "top-right");
3.4.5 Expand
You can shrink the ui of a widget into a small icon to make the interface simple and useful.
//Put layerlist into expand
const llExpand = new Expand({
view: view,
content: layerList,
expanded: false
});
view.ui.add(llExpand, "bottom-left");