vue+arcgis api for javascript初始项目
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了vue+arcgis api for javascript初始项目，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5382字，纯文字阅读大概需要8分钟。
内容图文
先安装好node.js，vue环境了，下面开始
1。确定一个项目目录，如e:\aaaa
2、cmd中转到目录，vue create arcgis-test1
就选择第一个 vue cli v4.5.11
3。安装好之后，转到目录e:\aaaa\arcgis-test1
npm install --save esri-loader
4、然后就用vscode 右键打开项目了，开始编码
把components 目录下初始来的helloworld.vue 删除，添加一个map001.vue
导包
<template>
<div id="viewDiv" style="width:100%;height:600px"></div>
</template>
<script>
//import {loadCss, loadModules} from 'esri-loader'
import { loadModules } from 'esri-loader';
export default {
name:'Map001',
data() {
return {
msg: 'hello vue',
//引入顺序最好遵循官网，顺序错误可能会导致部分功能无法使用
modules:["esri/Map",'esri/WebMap',"esri/widgets/Locate",
"esri/widgets/Track","esri/layers/TileLayer",'esri/views/MapView',"esri/Graphic",
"esri/layers/GraphicsLayer","esri/layers/FeatureLayer",
"esri/PopupTemplate", "esri/widgets/Locate","esri/widgets/Track","esri/widgets/Sketch",
],
view:"",
gisConstructor:{},
map:{}
};
},
mounted(){
loadModules(this.modules, { css: true }).then(this.loading)
},
methods: {
loading(args){
console.log(args)
for (let k in args) {
let name = this.modules[k].split('/').pop()
name = name.replace(name[0], name[0].toUpperCase())
this.gisConstructor[name] = args[k];
}
// 官方地图
// this.map = new this.gisConstructor.Map({
// basemap: "streets",
// });
// 切片地图
var mapTileLayer = new this.gisConstructor.TileLayer({
url:"http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer"
});
this.map=new this.gisConstructor.Map({
layers:[mapTileLayer]
});
// 创建地图
// this.map=new this.gisConstructor.WebMap({
// portalItem:{
// id:"00f90f3f3c9141e4bea329679b257142"
// }
// });
// 创建view视图
this.view = new this.gisConstructor.MapView({
container: "viewDiv",
map: this.map,
center: [-118, 34],
zoom: 6
});
var graphicsLayer = new this.gisConstructor.GraphicsLayer();
var sketch = new this.gisConstructor.Sketch({
view: this.view,
layer: graphicsLayer
});
//工具栏
this.view.ui.add(sketch, "top-right");
//sketch.on("create", function(event) {
// console.log(event,"event")
// });
//新版本地图点击事件，旧版本为map.on("click",this.clickHandler)
this.view.on("click",function(e){
var xy=[Math.round(e.mapPoint.longitude* 1000) / 1000,Math.round(e.mapPoint.latitude* 1000) / 1000] //转换经纬度
console.log(xy,"gg")
let restbtn= document.getElementsByClassName("restxuandian")[0]
console.log(restbtn)
// restbtn.style.cursor="pointer"
})
this.getdata()
},
getdata(){
// 假设xyarr为后台接口返回的数据
let xyarr=[{x:"-118",y:"34",name:"aaa",mag:"-118/34",id:"1"},
{x:"-118.806",y:"34",name:"bbb",mag:"-118.806/34",id:"2"},
{x:"-118.906",y:"36",name:"ccc",mag:"-118.806/40",id:"3"},
]
xyarr.forEach(item=>{
// 标记点的位置
var point ={
type: "point",
longitude: item.x,
latitude: item.y
};
// 设置点的样式
var simpleMarkerSymbol = {
type: "simple-marker",
color: [226, 119, 40], // orange
outline: { //外边框
color: [255, 255, 255], // white
width: 1
}
};
// 设置弹出框模板
var popupTemplate = new this.gisConstructor.PopupTemplate({
"title": item.name,
"content": "我说这是线，你有意见吗？<br/>这不应该是点吗？<br/>嗯！！！啪！你再说一遍<br/><span>"+item.mag +"</span> <span class='restxuandian' value='"+item.id+"' style='display:block;background:#409EFF;margin:10px 10px 0 0;padding:6px;border-radius:3px;width:80px;color:#fff;cursor:pointer;'>重新选点</span>"
})
//
var pointGraphic = new this.gisConstructor.Graphic({
geometry: point,
symbol: simpleMarkerSymbol,
popupTemplate:popupTemplate
});
// 设置线
var polyline = {
type: "polyline",
paths: [
[-113, 34],
[-114, 33],
[-112, 35]
]
}
var popupTemplateline = new this.gisConstructor.PopupTemplate({
"title": "这是点",
"content": "对对,你说的都对,你说是啥就是啥"
})
var simpleLineSymbol = {
type: "simple-line",
color: [226, 119, 40], // orange
width: 2
};
var polylineGraphic = new this.gisConstructor.Graphic({
geometry: polyline,
symbol: simpleLineSymbol,
popupTemplate:popupTemplateline,
})
// 多边形
var polygon = {
type: "polygon",
rings: [
[-118, 36],
[-117, 34],
[-116, 35],
[-115, 35],
[-114, 35]
]
};
var popupTemplatefill = new this.gisConstructor.PopupTemplate({
"title": "我说这是多边形,你没意见吧",
"content": "滚犊子,你再说一遍是啥,别逼我干你...... <br/>额... <br/> 你再说一遍你想干什么 <br/> 嘿嘿嘿，没事，我是说你是最棒的 ，，。，"
})
var simpleFillSymbol = {
type: "simple-fill",
color: [227, 139, 79, 0.2], // orange, opacity 80%
outline: {
color: [255, 0, 0],
width: 1
}
};
var polygonGraphic = new this.gisConstructor.Graphic({
geometry: polygon,
symbol: simpleFillSymbol,
popupTemplate:popupTemplatefill
});
var graphicsLayer = new this.gisConstructor.GraphicsLayer();
this.map.add(graphicsLayer);
graphicsLayer.add(pointGraphic)
graphicsLayer.add(polylineGraphic);
graphicsLayer.add(polygonGraphic);
})
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
View Code
5、在app.vue 中引入 map001.vue
<template>
<div id="app">
{{msg}}
<br>
<v-map001/>
</div>
</template>
<script>
import Map001 from './components/map001.vue'//导入组件
export default {
name:'App',
components: {
'v-map001': Map001
},
data() {
return {
msg: 'hello vue app'
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
View Code
项目结构是这样：
运行之后是这样：
内容总结
以上是互联网集市为您收集整理的vue+arcgis api for javascript初始项目全部内容，希望文章能够帮你解决vue+arcgis api for javascript初始项目所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】