欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue+ ArcGIS JavaScript APi詳解

 更新時間:2022年11月04日 14:50:06   作者:安迪小寶  
這篇文章主要介紹了Vue+ ArcGIS JavaScript APi,文中需要注意ArcGIS JavaScript3.x 和ArcGIS JavaScript 4.x框架差異較大,本文從環(huán)境搭建開始到測試運(yùn)行給大家講解的非常詳細(xì),需要的朋友可以參考下

版本

Vue 2

ArcGIS JavaScript 4.22

注意 ArcGIS JavaScript3.x 和ArcGIS JavaScript 4.x框架差異較大

環(huán)境搭建

新建vue

可以使用vue ui創(chuàng)建項目

增加ArcGIS JavaScript 包引用

package.json

 "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^2.6.14",   
    "@arcgis/core":"4.22.2",
    "ncp":"^2.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^6.8.0",
    "eslint-plugin-vue": "^5.2.3",    
    "vue-template-compiler": "^2.6.14"  
  },

ncp: 主要用于拷貝資源信息

@arcgis/core 是arcgis_js倉庫

拷貝資源信息

package.json中配置copy命令

 "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "copy": "ncp ./node_modules/@arcgis/core/assets ./public/assets"
  },

安裝完依賴后運(yùn)行 copy命令

yarn 
yarn copy
yarn serve
-------------------
npm i
npm run copy
npm run serve

運(yùn)行完copy命令后,會將arcgis相關(guān)資源拷貝到public/assets目錄下

全局引入

main.js

import '@arcgis/core/assets/esri/themes/light/main.css'
import esriConfig from '@arcgis/core/config.js'
esriConfig.assetsPath = './assets'

頁面測試

helloworld.vue

<template>
  <div class="hello">
    <div id="map" class="map" v-show="flag == 'map'">
    </div>
    <div id="earth" class="map" v-show="flag == 'earth'"></div>
  </div>
</template>

<script>
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import MapImageLayer from '@arcgis/core/layers/MapImageLayer'
import ElevationLayer from '@arcgis/core/layers/ElevationLayer'
import BaseElevationLayer from '@arcgis/core/layers/BaseElevationLayer'
import SpatialReference from '@arcgis/core/geometry/SpatialReference'
import SceneView from '@arcgis/core/views/SceneView'
import Basemap from '@arcgis/core/Basemap'
import TileLayer from '@arcgis/core/layers/TileLayer'

export default {
  name: 'HelloWorld',
  data() {
    return {
      mapView: null,
      map: null,
      map3d: null,
      flag: 'earth'
    }
  },

  mounted() {
    this.initBasemap()
  },
  methods: {
    initBasemap() {
      const self = this
      //二維
      const mapImageLayer = new MapImageLayer({
        url: "http://192.168.3.156:6080/arcgis/rest/services/xiangyang/jichang/MapServer"
      })

      this.map = new Map({
        // basemap: basemap,
        layers: [mapImageLayer]
      })

      this.mapView = new MapView({
        container: 'map',
        map: self.map,
        spatialReference: new SpatialReference({
          wkid: 3857
        }),
        rotation: 41.2,
        zoom: 3
      })


      // 三維地形
      const ExaggeratedElevationLayer = BaseElevationLayer.createSubclass({      
        properties: {
          exaggeration: 10
        },
        load: function () {
          // TopoBathy3D contains elevation values for both land and ocean ground
          this._elevation = new ElevationLayer({
            url: "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/TopoBathy3D/ImageServer"
          });

         
          this.addResolvingPromise(
            this._elevation.load().then(() => {
            
              this.tileInfo = this._elevation.tileInfo;
              this.spatialReference = this._elevation.spatialReference;
              this.fullExtent = this._elevation.fullExtent;
            })
          );

          return this;
        },

        // Fetches the tile(s) visible in the view
        fetchTile: function (level, row, col, options) {
          // calls fetchTile() on the elevationlayer for the tiles
          // visible in the view
          return this._elevation.fetchTile(level, row, col, options).then(
            function (data) {
              const exaggeration = this.exaggeration;

              for (let i = 0; i < data.values.length; i++) {
                // Multiply the given pixel value
                // by the exaggeration value
                data.values[i] = data.values[i] * exaggeration;
              }
              return data;
            }.bind(this)
          );
        }
      });


      const basemap = new Basemap({
        baseLayers: [
          new TileLayer({
            url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
          }),
          new TileLayer({
            url:
              "https://tiles.arcgis.com/tiles/nGt4QxSblgDfeJn9/arcgis/rest/services/terrain_with_heavy_bathymetry/MapServer"
          }),

        ]
      });

      const elevationLayer = new ExaggeratedElevationLayer();

      
      this.map3d = new Map({
        basemap: basemap,
        ground: {
          layers: [elevationLayer]
        }
      });

      const view = new SceneView({
        container: "earth",
        map: this.map3d,
        alphaCompositingEnabled: true,
        qualityProfile: "high",
        camera: {
          position: [-55.039, 14.948, 19921223.3],
          heading: 2.03,
          tilt: 0.13
        },
        environment: {
          background: {
            type: "color",
            color: [255, 252, 244, 0]
          },
          starsEnabled: true,
          atmosphereEnabled: true,
          lighting: {
            type: "virtual"
          }
        },


      });


      this.map3d.ground = {
        layers: [elevationLayer]
      };

    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
  width: 100%;
  height: 100%;
}

.map {
  width: 100%;
  height: 100%;
}
</style>

demo地址

https://gitee.com/wolf_pro/vue_arcgis4.22.git

到此這篇關(guān)于Vue+ ArcGIS JavaScript APi的文章就介紹到這了,更多相關(guān)Vue+ ArcGIS JavaScript APi內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 如何在Vue3中實現(xiàn)自定義指令(超詳細(xì)!)

    如何在Vue3中實現(xiàn)自定義指令(超詳細(xì)!)

    除了默認(rèn)設(shè)置的核心指令(v-model和v-show),Vue也允許注冊自定義指令,下面這篇文章主要給大家介紹了關(guān)于如何在Vue3中實現(xiàn)自定義指令的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-06-06
  • 如何隱藏element-ui中tree懶加載葉子節(jié)點(diǎn)checkbox(分頁懶加載效果)

    如何隱藏element-ui中tree懶加載葉子節(jié)點(diǎn)checkbox(分頁懶加載效果)

    這篇文章主要介紹了如何隱藏element-ui中tree懶加載葉子節(jié)點(diǎn)checkbox(分頁懶加載效果),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-07-07
  • VSCode使React?Vue代碼調(diào)試變得更爽

    VSCode使React?Vue代碼調(diào)試變得更爽

    這篇文章主要為大家介紹了VSCode使React?Vue代碼調(diào)試變得更爽的使用方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-07-07
  • 詳解vue保存自動格式化換行

    詳解vue保存自動格式化換行

    這篇文章主要為大家介紹了vue保存自動格式化換行,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2021-12-12
  • vue配置生產(chǎn)環(huán)境.env.production與測試環(huán)境.env.development

    vue配置生產(chǎn)環(huán)境.env.production與測試環(huán)境.env.development

    這篇文章主要介紹了vue配置生產(chǎn)環(huán)境.env.production與測試環(huán)境.env.development方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • vue3+ts+vite使用el-table表格渲染記錄重復(fù)情況

    vue3+ts+vite使用el-table表格渲染記錄重復(fù)情況

    這篇文章主要給大家介紹了關(guān)于vue3+ts+vite使用el-table表格渲染記錄重復(fù)情況的相關(guān)資料,我們可以通過合并渲染、數(shù)據(jù)緩存或虛擬化等技術(shù)來減少重復(fù)渲染的次數(shù),文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-12-12
  • Vue 實現(xiàn)從小到大的橫向滑動效果詳解

    Vue 實現(xiàn)從小到大的橫向滑動效果詳解

    這篇文章主要介紹了Vue 實現(xiàn)從小到大的橫向滑動效果,結(jié)合實例形式詳細(xì)分析了vue.js橫向漸變滑動效果的實現(xiàn)步驟、相關(guān)操作技巧與注意事項,需要的朋友可以參考下
    2019-10-10
  • vue3中封裝Axios請求及在組件中使用詳解

    vue3中封裝Axios請求及在組件中使用詳解

    目前前端最流行的網(wǎng)絡(luò)請求庫還是axios,所以對axios的封裝很有必要,下面這篇文章主要給大家介紹了關(guān)于vue3中封裝Axios請求及在組件中使用的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-04-04
  • Vue?項目運(yùn)行完成后自動打開瀏覽器的方法匯總

    Vue?項目運(yùn)行完成后自動打開瀏覽器的方法匯總

    這篇文章主要介紹了Vue?項目運(yùn)行完成后自動打開瀏覽器的多種實現(xiàn)方法,方法一比較適用于vue3,每種方法通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧
    2022-02-02
  • vue車牌號校驗和銀行校驗實戰(zhàn)

    vue車牌號校驗和銀行校驗實戰(zhàn)

    這篇文章主要介紹了vue車牌號校驗和銀行校驗實戰(zhàn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-01-01

最新評論