First knowledge of map, Arcgis Map Method library

References:

Map Basics:

Everyone is talking about GIS, what is GIS – Zhihu.com

Mercator projection, geographic coordinate system, ground resolution, map scale _weixin_30300523 blog -CSDN blog

Tile map zoom level – Megomap column -CSDN blog – Tile map resolution

SRID WKID space Reference introduction _bigbigtree-CSDN blog _wkid

Map of heaven and Earth _Column of Liusaint1992 -CSDN blog

World Map: World Map of National Geographic Information Public Service Platform (Tianditu.gov.cn)

Map of heaven and Earth guide for beginners (tianditu.gov.cn)

Example of a map of heaven and Earth (tianditu.gov.cn)

World Map API (tianditu.gov.cn)

! To use the map, you need to apply for a key

Arcgis:

Install and set up | ArcGIS quick start for JavaScript

The Overview | ArcGIS example for JavaScript

Map | ArcGIS API for JavaScript

1. Load ArcGIS resources

Download the arcgis package

npm install arcgis
Copy the code

Introduce JS, CSS files in a variety of ways

Introduced in 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>
Copy the code

Introduced in the VUE project

<style>
@import url("https://js.arcgis.com/3.28/esri/css/esri.css");
</style>
Copy the code

import { loadCss, loadModules } from 'esri-loader'                                                                        mounted() {
    / / load CSS;
	loadCss('https://js.arcgis.com/3.28/esri/css/esri.css')
	// Load the method module
	loadModules(['esri/map'.'esri/layers/WebTiledLayer'.'esri/geometry/Point'.'esri/layers/TileInfo'])
        .then(([Map, WebTiledLayer, Point, TileInfo]) = > {
        / / code
        }.catch(err= > {
        // handle any script or module loading errors
          console.error(err)
        })
}
Copy the code

2. Use the ArcGIS method

require([…] ,function(){}) use arcGIS method in callback function

require([ "esri/Map"."esri/views/MapView"].function(Map,MapView){})
Copy the code

3. Create Map objects

! You have to be careful what coordinate system you're using for your base, so if you're using latitude and longitude coordinates you should use latitude and longitude coordinates globally, and if you're using Mercator coordinates you should use global coordinates, right

// Create the Map Creates a Map object
var map = new Map({
    // basemap: "hybrid"
    // basemap: "topo"
    // basemap: "streets"
    // basemap: "satellite"
    basemap: "osm"// Base map type
});
Copy the code

4. Create MapView objects

<div id="viewDiv"></div>
Copy the code

// Create the MapView to Create a map box
var view = new MapView({
    container: "viewDiv".// Bind dom node rendering
    map: map,
    // center: [-80, 35],
    center: [116.40769.39.89945].// Latitude and longitude at initialization time
    zoom: 12/ / level
});
Copy the code

5. Add dots

• 5.1 Reference the Graphic Method and Create aGraphicobject

require(["esri/Graphic"].function (Graphic) {})
Copy the code

• 5.2 createpointSome objects

var point = {
    type: "point".// Create a point object
    longitude: -118.80543./ / longitude
    latitude: 34.02700/ / latitude
};
Copy the code

• 5.3 createmarkerSymbolAnnotation style object

// Create a symbol for drawing the point
var markerSymbol = {// Initializes the color line size of the annotation object
    type: "simple-marker".// Annotate the object type
    color: [226.119.40].// Add color
};
Copy the code

Custom graphic annotations

var markerSymbol = {// Initializes the color line size of the annotation object
    type: "picture-marker".// Image annotation
    url: "http://api.tianditu.gov.cn/img/map/markerA.png".// Customize image annotations
    width: "19px".// Indicate the width and height
    height: "27px"};Copy the code

• 5.4 Inject point objects and annotation style objects intoGraphicIn the object

var pointGraphic = new Graphic({
    geometry: point,// Graph object
    symbol: markerSymbol/ / config object
});
Copy the code

• 5.6 Adding a File in the ViewGraphicobject

view.graphics.add(pointGraphic);// Add a graphic object to the view
Copy the code

6. Add line labels

• 6.1 Reference the Graphic Method and Create aGraphicobject

require(["esri/Graphic"].function (Graphic) {})
Copy the code

• 6.2 createpolylineThe line object

var polyline = {// Create a line object
    type: "polyline".// autocasts as new Polyline()
    paths: [[...98.49.5], [...111.3.52.68], [...93.94.29.89]]/ / collection point
};
Copy the code

• 6.3 createlineSymbolAnnotation style object

// Create a simple line symbol for rendering the line in the view
var lineSymbol = {// Line object style
    type: "simple-line".// Line type
    color: [226.119.40].width: 2// Line width px
};
Copy the code

• 6.4 Inject line objects and annotation style objects intoGraphicIn the object

// Create the graphic
var polylineGraphic = new Graphic({
    geometry: polyline, / / add the line
    symbol: lineSymbol, // Add a line style
});
Copy the code

• 6.6 Adding a Vm in the ViewGraphicobject

view.graphics.add(polylineGraphic);// Add a graphic object to the view
Copy the code

7. Add noodles

/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * create faceted graphic * * * * * * * * * * * * * * * * * * * * * * * * * * * /

// Create the plane object
var polygon = {
    type: "polygon".// Object type
    rings: [[...64.78.32.3], [...66.07.18.45], [...80.21.25.78], [...64.78.32.3]]/ / collection point
};

// Create a fill style
var fillSymbol = {
    type: "simple-fill".// autocasts as new SimpleFillSymbol()
    color: [227.139.79.0.5].outline: {// External line styles
        color: [255.255.255].width: 1}};// Add the geometry and style to the graphics object
var polygonGraphic = new Graphic({
    geometry: polygon,
    symbol: fillSymbol
});
view.graphics.add(polygonGraphic);// Add the graph to the view
Copy the code

8. Draw points, lines and planes on a map

• 8.1 Referencing the Drawing ToolSketch,GraphicsLayerThe graphics layer

require(["esri/widgets/Sketch"."esri/layers/GraphicsLayer"].function(
    Sketch,
    Map,
    GraphicsLayer,
    MapView
){})Copy the code

• 8.2 Creating graphic Layers

const layer = new GraphicsLayer();
Copy the code

• 8.3 Inject the Graphics LayermapIn the

const map = new Map({
    basemap: "topo".layers: [layer]
});
Copy the code

• 8.4 Creating a Drawing Tool Object

Bind the Draw layer to the view

const sketch = new Sketch({
    layer: layer,
    view: view,
    // graphic will be selected as soon as it is created
    creationMode: "update"
});
Copy the code

• 8.5 Adding a UI control for the Drawing Tool

view.ui.add(sketch, "top-right");// Control type style -- position
Copy the code

9. Multiple layers

• 9.1 Number different layers by ID

require([
    "esri/Map"."esri/views/MapView"."esri/Basemap"./ / reproduction
    "esri/layers/VectorTileLayer".// Vector tile layer
    "esri/layers/TileLayer".// Tile layer].function(Map, MapView, Basemap, VectorTileLayer, TileLayer) {

const vectorTileLayer = new VectorTileLayer({
    portalItem: {
        id: "6976148c11bd497d8624206f9ee03e30" // Forest and Parks Canvas
    },
    opacity: 75.// Layer transparency
});

const imageTileLayer = new TileLayer({
    portalItem: {
    	id: "1b243539f4514b6ba35e7d995890db1d" // World Hillshade}});Copy the code

• 9.2 Combine these two layers intobasemapIn the

const basemap = new Basemap({// Create a basemap object
    baseLayers: [// Integrate multiple layers
        imageTileLayer,
        vectorTileLayer
    ]
});
Copy the code

• 9.3 will bebasemapInjected into themapIn the object

const map = new Map({// Inject into the Map object
	basemap: basemap,
});
Copy the code

10. Map overlay images

• 10.1 Creating An Image Layer

require([
    "esri/Map"."esri/views/MapView"."esri/layers/MapImageLayer"].function (Map, MapView, MapImageLayer) {
var permitsLayer = new MapImageLayer({// Create the image layer
    portalItem: {
        // autocasts as new PortalItem()
        id: "d7892b3c13b44391992ecd42bfa92d01"}}); })Copy the code

• 10.2 Injecting the Image LayermapIn the object

// Create the Map Creates a Map object
var map = new Map({
    basemap: "satellite".// Base map type
    layers: [permitsLayer]// Add the image layer
});
Copy the code