前不久公司要求用 arcgis 做个东西 / 但是从来没有接触过,现在分享一点基本应用
import esriLoader from 'esri-loader';
import {getSensorDetail} from "../api/api";
import getporint from './icon';
// let Graphic;
// let SpatialReference = {};
let m_view;
let m_map;
let resultsLayer;
let image = "";
export default {
name: 'ArcgisMap',
data() {
return {pointall: [],
Graphic: null,
markerLayer: null,
spatial:null,
markerLayerRemove:null
}
},
computed: {getStoreItem() {return this.$store.state.pointall}
},
watch: {getStoreItem() {getporint.map((val,index)=>{if(val.id == this.$store.state.menuid) {image = val.icon;}
else {// image = getporint[1].icon;
}
})
this.getPoint(this.$store.state.pointall);
// markerLayer.removeAll();}
},
mounted() {
this.pointall = this.$store.state.pointall;
if (this.$refs.viewDiv) {this.getINmap();
}
},
methods: {getMoveto(x,y) {
m_view.goTo(
{
position: {
x: x,
y: y,
z: 1000,
spatialReference: {wkid: 2431}
},
heading: 60,
tilt: 20
},
{
duration: 2000,
easing: "in-expo"
}
);
},
getINmap() {
const options = {css: true};
esriLoader.loadCss('css');
esriLoader.loadScript({url: 'js'});
// 加载 css
esriLoader.loadModules([
"esri/Map",
"esri/geometry/SpatialReference",
"esri/Graphic",
"esri/views/SceneView",
"esri/layers/GraphicsLayer",
"esri/layers/SceneLayer",
"esri/geometry/Extent",
"esri/layers/FeatureLayer",
"dojo/domReady!"
], options
).then(
([
Map,
SpatialReference,
Graphic,
SceneView,
GraphicsLayer,
SceneLayer,
Extent,
FeatureLayer
]) => {m_map = new Map();
m_view = new SceneView({
map: m_map,
container: "viewDiv",
spatialReference: new SpatialReference(2431)
});
边界
let fullExtent = new Extent({
xmin: -96962.5918230044,
ymin: -40932.632712582854,
xmax: 12223.23071530734,
ymax: 17535.109222901025,
spatialReference: new SpatialReference(2431)
});
let m_sceneLayer = new SceneLayer({url: "http://gisswweb.hkq.gov.hk/server/rest/services/Hosted/HKBuildingColorPlus/SceneServer",fullExtent});
let featureLayer = new FeatureLayer({url:"http://gisswweb.hkq.gov.hk/server/rest/services/Hosted/HKScene3D_WFL1/FeatureServer/"});
m_map.add(m_sceneLayer);
console.log("zhixinle")
m_map.add(featureLayer);
let _this = this;
点击撒点图标
// 点击事件
m_view.on("click", function(event) {m_view.hitTest(event).then(function(response) {console.log(response.results[0].graphic.attributes.val.id)
getSensorDetail({id:response.results[0].graphic.attributes.val.id
}).then(res => {if (res.Data.length > 0) {let resultObj = res.Data[0];
// if(pointObj[0].id){
// this.$parent.isShowPercent=false;
// this.$parent.isShowWeek=false;
// }
// console.log(_this.$store)
_this.$store.commit("changePoiDetail", resultObj);
_this.$store.commit("getShowPersonData", true);
_this.$store.commit("getCloseprocessDetails", false);
} else {_this.$store.commit("changePoiDetail", "");
}
});
})
});
// 动态缩放
this.getMoveto(3440.81404942000,2429.05288139000);
// 保存成全局对象 方便引用
this.Graphic = function (params) {return new Graphic(params);
}
// this.GraphicremoveAll = function() {// // m_view.graphics.removeAll();
// }
this.spatial = function(){return new SpatialReference(2431);
}
this.markerLayer = function(params) {// new GraphicsLayer().removeAll();
resultsLayer = new GraphicsLayer();
// resultsLayer.removeAll();
return resultsLayer.addMany(params);
}
this.markerLayerRemove = function() {console.log("执行成功")
m_view.graphics.removeAll();}
this.getPoint([]);
})
.catch(error => {console.error("esriLoader.loadModules--->", error)
})
},
撒点
getPoint(data) {if(resultsLayer) {resultsLayer.removeAll();
}
let markerGraphicsArr = [];
data.map((val, index) => {console.log(val)
let markerGraphic = this.Graphic({
geometry: {spatialReference: this.spatial(),
type: "point",
longitude: val.cjLat,
latitude: val.cjLng,
z: 20
},
symbol: {
type: "picture-marker",
url: image,
width: "35px",
height: "35px"
},
attributes: {
// 传递的参数
val
}
})
markerGraphicsArr.push(markerGraphic);
})
this.getMoveto(data[0].cjLat,data[0].cjLng)
m_map.add(this.markerLayer(markerGraphicsArr));
}
},
}