前言
近期会在博客发布一系列有关WebGIS
的实战课程,技术栈:vue
全家桶+arcgis Server
+arcgis API 3.x
+asp.net
实现一个简单的城市供水管网系统。
前置知识准备:
es6
语法node
的简单安装包vue
、vue-cli 3.0
、vuex
,vue-router
,以及elementUI
框架axios
asp net mvc
框架(后台可能会使用koa2
)arcgis SOE
开发扩展arcgis server
功能arcgis
的简单操作:发布地图服务,矢量化地图等等。arcgis sde for postgresql
安装ThreeJS
实现三维管道展示
我的环境是
arcgis 10.2
版本的,大家也可以进行安装。
可以补充一下这些知识,我也会在博客里面写有关代码的说明。
1. 加载地图
首先使用vue-cli
创建一个项目,我是使用element UI
进行搭建项目的整体框架,界面如下,代码我会上传到我的github
上面
esri
推出了一个非dojo
框架加载地图的一个包esri-loader
,我们可以查看 https://github.com/Esri/esri-loader ,按照提示的步骤进行操作,首先输入命令:npm install --save esri-loader
进行安装,然后在main.js
入口引用esri-loader
:
import { loadScript } from 'esri-loader'
const options = {
url: 'https://js.arcgis.com/3.23/',
}
//加载脚本
loadScript(options)
然后在我们加载地图的组件中进行加载地图操作:
import { loadModules } from 'esri-loader';
export default {
mounted () {
this.initMap()
},
methods: {
initMap () {
loadModules(['esri/map', 'esri/dijit/HomeButton', 'esri/layers/ArcGISTiledMapServiceLayer'])
.then(([Map, HomeButton, ArcGISTiledMapServiceLayer]) => {
// 创建地图以及配置参数
const map = new Map(this.$refs.map, {
center: [114.3, 30.51667],
zoom: 12,
})
// 实例化home按钮
const button = new HomeButton({
map
}, this.$refs.button)
// 启用按钮
button.startup()
let basemapurl="http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineStreetWarm/MapServer";
let graybasemap = new ArcGISTiledMapServiceLayer(basemapurl);
// 加载地图
map.addLayer(graybasemap);
})
.catch(err => {
console.log(err)
})
}
}
}
实现效果: