arcgis api（一）react 或vue项目结合 arcgis api for js 地图

半个GIS半个前端

4330人浏览 · 2018-07-31 15:43:30

半个GIS半个前端 · 2018-07-31 15:43:30 发布

传统的arcgis api for js 的开发包是用require.js引用开发包的各个模块，然后再实例化对象。随着前端技术的发展，react.js、vue.js、es6的普及，模块化开发越来越多。也有很多跟arcgis相关的组件应运而生，比如react的react-arcgis组件，包含了arcgis api的部分功能，但是其并没有包含arcgis api 的所有功能，很多功能还是需要在引用arcgis开发包模块的基础上再次开发。正好，最近项目中需要用到react结合arcgis api ，查阅了很多网上的博客，找到了esri-loader的模块，此模块相当于dojo.require功能，引用arcgis的开发模块，从而使开发者能够更好地运用arcgis api的相关知识。

一、arcgis api for js 3.x

（1）首先在项目中安装esri-loader模块：

yarn add esri-loader     //yarn
npm install esri-loader  //npm

（2）在public目录下的index.html中引入arcgis api 的css样式文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  
    <title>react结合arcgis api</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.25/esri/css/esri.css">
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

（3）地图组件

import React, { Component } from 'react'
import esriLoader from 'esri-loader'

export default class ArcGISMap extends Component{
    constructor(props){
        super(props)
        this.tileMapUrl = "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer"
    }
    componentDidMount(){
        this.initMap()
    }
    initMap(){
        const mapURL = {
            url : "https://js.arcgis.com/3.25/"
        }
        esriLoader.loadModules([
          "esri/map", 
          "esri/SpatialReference", 
          "esri/layers/ArcGISTiledMapServiceLayer",
          "esri/geometry/Extent",
          "dojo/domReady!"
        ], mapURL).then(([Map,SpatialReference,ArcGISTiledMapServiceLayer,Extent])=>{
              const  extent = new Extent(95.56, 36.28, 125.65, 45.33, new SpatialReference({ wkid: 4326 }))
              // 定义地图
              const map = new Map('mapDiv', {
                  logo: false,
                  slider: false,
                  showLabels: true,
                  extent: extent,
                  zoom: 4
              })
              const tiledLayer = new ArcGISTiledMapServiceLayer(this.tileMapUrl, {
                  id: 'baseMap'
              })
              map.addLayer(tiledLayer);
        })
    }
    render(){
        const style = {
            width: '900px',
            height: '600px'
        }
        return(
            <div>
                <div id="mapDiv" style = {style}></div>
            </div>
        )
    }
}

二、arcgis api for js 4.x

(1) 在public目录下的index.html中引入arcgis api 的css样式文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <meta http-equiv="X-UA-Compatible" content="IE =edge,chrome =1" >
    <link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css">
    <title>arcgis4.7&&echarts4.0</title>
  </head>
  <body>
    <noscript>
    </noscript>
    <div id="root"></div>
  </body>
</html>

(2)地图组件

import React, { Component } from 'react'
import esriLoader from 'esri-loader'

export default class ArcGISMap extends Component{
    constructor(props){
        super(props)
        this.tileMapUrl = "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer"
    }
    componentDidMount(){
        this.initMap()
    }
    initMap(){
        const mapURL = {
            url : "https://js.arcgis.com/4.7/dojo/dojo.js"
        }
        esriLoader.loadModules([
          "esri/Map",
          "esri/Basemap",
          "esri/layers/TileLayer", 
          "esri/views/MapView",
          "dojo/domReady!"
        ], mapURL).then(([Map,Basemap,TileLayer,MapView])=>{
            const layer = new TileLayer({
              url: this.tileMapUrl       
            })
            const baseMap = new Basemap({
              baseLayers: [layer],  
              title: "Custom Basemap",  
              id: "myBasemap" 
            })
            // Create a Map instance
            const map = new Map({
              basemap: baseMap
            })
            // Create a MapView instance (for 2D viewing) and reference the map instance
            const view = new MapView({
              center : [120.2, 32.1],
              map: map,
              container : "mapDiv",
              zoom:5
            })
        })
    }
    render(){
        const style = {
            width: '900px',
            height: '600px'
        }
        return(
            <div>
                <div id="mapDiv" style = {style}></div>
            </div>
        )
    }
}

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^