I. Install arcGIS map loader
2. Arcgis is used to load maps
3. Vue uses a map API that NPM does not have, that is, wrapped by itself or others (a big pit)
I. Install arcGIS map loader
1. Run NPM install ESRI-loader –save or YARN add ESRI-loader
2. Import the ESRI-Loader into the VUE file (component) that needs to load the map
import * as esriLoader from ‘esri-loader’
2. Arcgis is used to load maps
1. Use @import in style to import arcGIS CSS files
@ import url (‘ js.arcgis.com/4.4/esri/cs…
2. Compile map loading code in Methods, as follows
CreateMap: function () {const options = {/ / url: "https://js.arcgis.com/4.12/init.js"} demo / / this is the website address. let that = this; Esriloader. loadModules([// "esri/ Tasks /Locator", "ESRI /Map"," ESRI /views/MapView", 3D use screenView "esri/layers/TileLayer",// Map layers can use this class to add //"esri/layers/FeatureLayer",// custom layers "esri/Graphic",// images, //"esri/ widgets/LayerList", "Esri /widgets/Fullscreen",// Fullscreen widget "esri/widgets/Zoom",// Zoom out widget "dojo/domReady!"] ) .then( ([Map, MapView, TileLayer, Graphic, Fullscreen, Zoom]) => { var transportationLayer = new TileLayer({ url: "Https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetGray/MapServer", / / here are using a map of China on the domestic server id: "streets"}); Const map = new map ({// Basemap: "streets",// Map style layers: [transportationLayer]// I added layer defined in the previous step}); Const mapView = new mapView ({map: map,// Draw the map container: "viewDiv",// Draw the map ID zoom: 5, center: [120.7346125, 25.0563901] // popup: {// Configure popup properties // dockEnabled: true, // dockOptions: {// buttonEnabled: false, // breakpoint: false // } // } }); Empty mapView.ui. Empty ("top-left"); Mapview.ui. add(// add new Fullscreen({view: mapView}), "top-right"); mapview.ui.add(new Zoom({ view: mapview }), "top-right"); Casts as new Polyline() x: 120.3, y: 30.68}; // Casts as new Polyline() x: 120.3, y: 30.68}; Var point2 = {type: "point", // autocasts as new Polyline() x: 115.3, y: 27.68}; Var lineSymbol = {type: "picture-marker", // autocasts as new PictureMarkerSymbol() URL: that.markpic // width: "64px", // height: "64px" }; // Create an object for storing attributes related to the line var lineAtt = {// Define popup header car_info: "Keystone Pipeline", car_code: "TransCanada", car_num: "12131321", user: "arsi" }; Let locusAction = {// Custom action title: "Locus ", ID: "locus"}; Var template = {// PopupTemplate // autocasts as new PopupTemplate() title: "vehicle info ", Content: [{type: "Fields ", // FieldsContentElement fieldInfos: [{fieldName: "car_info", visible: true, label: "car info"}, {fieldName: "Car_code ", visible: true, label: "car id"}, {fieldName: "car_num", visible: true, label: "car ID ", format: {places: visible: true, label: "car ID "}, {fieldName: "car ID ", format: {places: 0, digitSeparator: true}}, {fieldName: "user", visible: true, label: "user"}]}], actions: [locusAction]}; Var polylineGraphic = new Graphic({// Geometry: point, symbol: lineSymbol, Attributes: lineAtt, popupTemplate: template }); var pointGraphic = new Graphic({ geometry: point2, symbol: lineSymbol, attributes: lineAtt, popupTemplate: template }); // Add the points to the map layer mapView.graphics.addmany ([polylineGraphic, pointGraphic]); Function locusThis() {mapview.popup.open({// title: "time ", // content: "1111" //}); // template.content.push(); // mapview.graphics.polylineGraphic.popupTemplate = template; } / / shut down automatically open the popup window. / / mapview popup. AutoOpenEnabled = false; Mapview.popup. on("trigger-action", function(event) {if (event.action.id === "locus") {locusThis(); }}); }, reason => { console.log(reason); }); }Copy the code
In Mounted, call this method to create a map. In Vue, it is recommended to encapsulate the map into a separate component for use where necessary
Vue uses its own packaged map API that was not uploaded to the NPM repository
1. Load the wrapped JS entry file remotely, encapsulate the map component in JS, and then import the required component through window.require(); Then you can develop custom functionality based on the API;