gis

arcgis js 4.x vue中通过esriLoader 使

2019-08-08  本文已影响2人  gis杭州
<template>
  <div id='viewDiv'></div>
</template>
<script>
// import * as esriLoader from 'esri-loader';
import { loadModules } from 'esri-loader';

export default {
  data() {
    return {};
  },
  mounted() {
    loadModules([
      'esri/Map',
      'esri/views/SceneView',
      'esri/layers/TileLayer',
      'esri/layers/SceneLayer'
    ])
      .then(([Map, SceneView, TileLayer, SceneLayer]) => {
        const tiled = new TileLayer({
          url:
            'https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer'
        });
        const building = new SceneLayer({
          url:
            'http://online.deqing.gov.cn/scenelayer/dq_wsc_bm02-20190801-scenelayer/bfba6bb4-f61c-47ba-9d04-751399cd18ca/layers/0'
        });
        let map = new Map({
          logo: false,
          ground: 'world-elevation',
          showAttribution: false,
          // layers: [tiled, building]
          layers: [tiled]
        });

        const view = new SceneView({
          container: 'viewDiv', // Reference to the scene div created in step 5
          map: map, // Reference to the map object created before the scene
          scale: 5000, // Sets the initial scale to 1:50,000,000
          center: [119.929159, 30.574828] // Sets the center point of view with lon/lat
        });
      })
      .catch(err => {
        console.error(err);
      });
  }
};
</script>
<style scoped>

#viewDiv {
  border: 1px solid red;
  height: 1440px;
  /* height: 1000px; */
}
</style>

参考
https://www.npmjs.com/package/esri-loader#examples

上一篇下一篇

猜你喜欢

热点阅读