3
ArcGIS实现打点、线路图、色块、自定义弹窗 - 爱喝酸奶的吃货
source link: https://www.cnblogs.com/yingzi1028/p/17060245.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
马上就要过年了，不知道大家过年都放几天假，小颖公司就只放8天假，就这还有一天是集体调休扣年假，就很··············还不如不放，不过庆幸最近这两周项目也做完了也没啥事，不然就静不下心写代码，就想放假回家干饭，趁着最近没事小颖把上个项目用ArcGIS实现的瓦片地图和一些功能总结了下，下面就先看看效果吧
具体代码：
小颖是先拿vue脚手架初始化了一个简单的项目，所以基础的那些我就不写了，其他的贴出来
首先导入所需node包：esri-loader、terraformer-wkt-parser、terraformer-arcgis-parser
公用css：
public.scss
图片大家可以就自已根据项目给合适的，小颖就不贴了
utils文件下公用js
details.js
打点和其弹窗信息
mapData.js
mixins.js
封装的打点、画线、画色块的公共方法
因为地图是每个页面都要的，所以小颖把初始化地图写到了app.vue里，每次切换路由的时候也是只让各自模块清理各自创建的图层
App.vue
在main.js中创建个存地图信息的全局对象：
// 地图全局参数
Vue.prototype.myMap = { map: null }
下面来看看怎么调用打点、画线、画色块吧
HomeView.vue
<template>
<div class="home"></div>
</template>
<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import { drawMapClass } from "../utils/mixins";
import { dialogData } from "../utils/details";
import Vue from "vue/dist/vue.js";
export default {
name: "HomeView",
mixins: [drawMapClass],
data() {
return {};
},
mounted() {
setTimeout(() => {
this.initMap();
}, 1000);
},
methods: {
initMap() {
let _this = this;
_this.addGraphicsLayer("Home_Buss");
dialogData.forEach((item) => {
_this.addPointToMapUsePic(item);
});
//添加线
var data =
'[{"lng":"117.40233351892198","lat":"38.82599699978767"},{"lng":"117.40293433375253","lat":"38.824044351588405"},{"lng":"117.40595986557777","lat":"38.82458079340139"},{"lng":"117.40705420687624","lat":"38.819624071049404"},{"lng":"117.41241862500611","lat":"38.82037508958758"},{"lng":"117.41235425198855","lat":"38.82114756579829"}]';
this.addLineToMap(data, "Memery_AddPoint", "#ff0000", [
{ lng: "117.40233351892198", lat: "38.82599699978767" },
{ lng: "117.41235425198855", lat: "38.82114756579829" },
]);
var data2 =
'[{"lng":"117.40293433375253","lat":"38.83526671431604"},{"lng":"117.40415742108613","lat":"38.831254129554914"},{"lng":"117.40683963015105","lat":"38.8316832830053"}]';
this.addLineToMap(data2, "Memery_AddPoint2", "#00b5ff",[
{ lng: "117.40293433375253", lat: "38.83526671431604" },
{ lng: "117.40683963015105", lat: "38.8316832830053" },
]);
},
glayerMouseDown(e) {
let _this = this;
e.stopPropagation();
this.parentbulletFrame = e.graphic.attributes.mapData;
var Profile = Vue.extend({
template: `
<div class="bulletFrame" v-if='mapmodel'>
<div class="frame_top">
<img class="leftImg" :src="icon_warning" />
<span>{{ bulletFrame.title }}</span>
<img
class="rightImg" :src="icon_error" @click="sonClose"/>
</div>
<div class="frame_middle">
<p v-for="(item, index) in bulletFrame.contentTips" :key="index">
{{ item.tipP }}{{ item.tipContent }}
</p>
</div>
<ul class="uls">
<li v-for="(item, index) in bulletFrame.hiddenDanger" :key="index">
{{ item.tipLi }}<span>{{ item.numSpan }}</span>
</li>
</ul>
<div class="frame_foot">
<p class="configureP">{{bulletFrame.configuration.header}}</p>
<div class="footDiv"></div>
</div>
</div>
`,
data() {
return {
icon_warning: require("@/assets/images/icon_warning.png"),
icon_error: require("@/assets/images/icon_error.png"),
mapmodel: true,
bulletFrame: {
configuration: { header: "" },
},
};
},
mounted() {
this.bulletFrame = _this.parentbulletFrame;
},
methods: {
sonClose() {
this.mapmodel = false;
_this.myMap.map.infoWindow.hide();
},
},
});
// // 创建 Profile 实例，并挂载到一个元素上。
let profile = new Profile().$mount();
this.myMap.map.infoWindow.setContent(profile.$el);
this.myMap.map.infoWindow.resize(270, 280);
this.myMap.map.infoWindow.show(e.mapPoint);
},
},
beforeDestroy() {
if (this.showBussLayer != null) {
this.clearMap("Home_Buss");
}
this.clearMap("Memery_AddPoint");
this.clearMap("Memery_AddPoint2");
},
};
</script>
AboutView.vue
<template>
<div class="about"></div>
</template>
<script>
import { drawMapClass } from "../utils/mixins";
import { mapjw } from "../utils/mapData";
export default {
name: "AboutView",
mixins: [drawMapClass],
data() {
return {};
},
mounted() {
setTimeout(() => {
this.initMap();
}, 500);
},
methods: {
initMap() {
this.addGraphicsLayer("Memery_sekuai");
this.addColorBlock();
},
// 画所有色块
addColorBlock() {
mapjw.forEach((item) => {
let FillColor = null,
LineColor = null;
if (item.status < 5) {
//红色
FillColor = [255, 0, 0, 0.5];
LineColor = [255, 0, 0, 1];
} else if (item.status > 5 && item.status < 10) {
//紫色
FillColor = [158, 20, 254, 0.5];
LineColor = [158, 20, 254, 1];
} else if (item.status >= 10 && item.status < 20) {
// 绿色
FillColor = [0, 255, 156, 0.5];
if (item.lukong == 1) {
FillColor = [0, 255, 156, 0.6];
}
LineColor = [0, 255, 156, 1];
} else if (item.status >= 20 && item.status < 30) {
// 深蓝
FillColor = [18, 76, 211, 0.5];
LineColor = [18, 76, 211, 1];
} else if (item.status >= 30 && item.status < 40) {
// 浅蓝色
FillColor = [255, 173, 60, 0.5];
LineColor = [255, 173, 60, 1];
} else {
// 黄色
FillColor = [27, 225, 226, 0.5];
LineColor = [27, 225, 226, 1];
}
this.addRegionToMapByWkt(FillColor, LineColor, item);
});
},
},
destroyed() {
this.clearMap("Memery_sekuai");
},
};
</script>
好啦复制粘贴已完成，刚才领导给我和旁边的设计说我们没事的话明天就可以不来了，在家打个外勤卡，嘻嘻，这个消息让我很欢喜啊，那就提前给大家拜个早年哦，祝大家新年快乐、恭喜发财、涨薪涨薪再涨薪··················
偷偷晒下小颖上周末去买小裙裙时拍的照片，放假啦放假啦·········································
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK