-
-
-
- 五大图层
-
- 五大图层>
- 个人档案
-
+
+
+
-
+
+
+ 五大图层
+
+ 五大图层>
+
+ 个人档案
+
-
-
-
-
+
+
-
- ![]()
- {{item.label}}
-
+
+
+
+
+
+
+ ![]()
+ {{item.label}}
-
-
-
-
-
+
+
- ![]()
-
+ {{colItem.categoryName}}
-
-
+
+
+
+
+
-
-
+ ![]()
+
+
{{colItem.categoryName}}
-
-
-
-
-
- 
-
-
-
-
+
-
- 搜索
+
+
+
-
-
+
+
+
+
+
+
+
+
-
+
+ 搜索
-
+
+
-
-
-
+
+
-
-
-
-
+
+
+
+
-
-
-
-
-
+ 居民信息
- 姓名：
- {{ selInfo.icUserName }}
-
- 所属网格：
- {{ selInfo.gridName }}
-
- 所属小区：
- {{ selInfo.villageName }}
-
- 本地户籍：
- {{ selInfo.isBdhjShow }}
-
+
+
+
+
+
+
居民信息
+ 姓名：
+ {{ selInfo.icUserName }}
+
+ 所属网格：
+ {{ selInfo.gridName }}
+
+ 所属小区：
+ {{ selInfo.villageName }}
+
+ 本地户籍：
+ {{ selInfo.isBdhjShow }}
+
- 手机：
- {{ selInfo.mobile }}
-
- 性别：
- {{ selInfo.genderShow }}
-
- 身份证号：
- {{ selInfo.idCard }}
-
+ 手机：
+ {{ selInfo.mobile }}
+
+ 性别：
+ {{ selInfo.genderShow }}
+
+ 身份证号：
+ {{ selInfo.idCard }}
+
- 工作单位：
- {{ selInfo.gzdw?selInfo.gzdw:'--' }}
-
- 人户状况：
- {{ selInfo.rhzkShow }}
-
-
-
+ 更多
- 工作单位：
+ {{ selInfo.gzdw?selInfo.gzdw:'--' }}
-
-
企业信息
- 企业名称：
- {{ selInfo.name }}
-
- 企业类型：
- {{ selInfo.categoryName }}
-
- 周边安全距离：
- {{ selInfo.safeDistance }}
-
- 危化品种类：
- {{ selInfo.dangerTypeName }}
-
- 负责人：
- {{ selInfo.principalName }}
-
- 联系电话：
- {{ selInfo.principalMobile }}
-
- 经营地址：
- {{ selInfo.address }}
-
- 备注：
- {{ selInfo.remark }}
-
+ 人户状况：
+ {{ selInfo.rhzkShow }}
-
-
+ 场所信息
- 场所名称：
- {{ selInfo.name }}
-
- 场所分类：
- {{ selInfo.categoryName }}
-
- 占地面积：
- {{ selInfo.areaCovered }}
-
- 容纳人数：
- {{ selInfo.capacity }}
-
- 地址：
- {{ selInfo.address }}
-
+
+
+ 更多
+
+
+ 企业信息
+ 企业名称：
+ {{ selInfo.name }}
+
+ 企业类型：
+ {{ selInfo.categoryName }}
+
+ 周边安全距离：
+ {{ selInfo.safeDistance }}
+
+ 危化品种类：
+ {{ selInfo.dangerTypeName }}
+
+ 负责人：
+ {{ selInfo.principalName }}
+
+ 联系电话：
+ {{ selInfo.principalMobile }}
+
+ 经营地址：
+ {{ selInfo.address }}
+
+ 备注：
+ {{ selInfo.remark }}
+
+
+
+ 场所信息
+ 场所名称：
+ {{ selInfo.name }}
+
+ 场所分类：
+ {{ selInfo.categoryName }}
+
+ 占地面积：
+ {{ selInfo.areaCovered }}
+
+ 容纳人数：
+ {{ selInfo.capacity }}
+
+ 地址：
+ {{ selInfo.address }}
+
+
+
难点痛点
+ 所属网格：
+ {{ selInfo.gridName }}
+
+ 发生时间：
+ {{ selInfo.happenTime }}
+
+ 事件内容：
+ {{ selInfo.eventContent }}
-
-
难点痛点
- 所属网格：
- {{ selInfo.gridName }}
-
- 发生时间：
- {{ selInfo.happenTime }}
-
- 事件内容：
- {{ selInfo.eventContent }}
-
-
- 图片：
-
- ![]()
+
-
+ 图片：
+
+
+ ![]()
-
- 音频：
-
-
-
-
+
+ 音频：
+
-
+
- 反映渠道：
- {{ selInfo.sourceTypeName|| "--" }}
-
- 地址：
- {{ selInfo.address || "--" }}
-
- 报事人：
- {{selInfo.name || "--" }}
-
- 手机号：
- {{ selInfo.mobile || "--" }}
-
- 身份证号：
- {{ selInfo.idCard || "--" }}
-
-
组织信息
- 组织名称：
- {{ selInfo.organizationName }}
-
- 组织分类：
- {{ selInfo.categoryName }}
-
- 组织人数：
- {{ selInfo.organizationPersonCount }}
-
- 组织成员：
- {{ selInfo.organizationPersonnelShow }}
-
- 服务事项：
- {{ selInfo.serviceItem }}
-
- 负责人：
- {{ selInfo.principalName }}
-
- 联系电话：
- {{ selInfo.principalPhone }}
-
- 创建时间：
- {{ selInfo.organizationCreatedTime }}
-
+ 反映渠道：
+ {{ selInfo.sourceTypeName|| "--" }}
+
+ 地址：
+ {{ selInfo.address || "--" }}
+
+ 报事人：
+ {{selInfo.name || "--" }}
+
+ 手机号：
+ {{ selInfo.mobile || "--" }}
+
+ 身份证号：
+ {{ selInfo.idCard || "--" }}
-
-
+ 房屋信息
- 房屋名称：
- {{ selInfo.houseName }}
-
- 房屋类型：
- {{ selInfo.houseTypeName }}
-
- 房屋用途：
- {{ selInfo.purposeName }}
-
- 房屋状态：
- {{ selInfo.rentName }}
-
- 房主姓名：
- {{ selInfo.ownerName }}
-
- 联系方式：
- {{ selInfo.ownerPhone }}
-
- 房主身份证：
- {{ selInfo.ownerIdCard }}
-
+
+
+ 组织信息
+ 组织名称：
+ {{ selInfo.organizationName }}
+
+ 组织分类：
+ {{ selInfo.categoryName }}
+
+ 组织人数：
+ {{ selInfo.organizationPersonCount }}
+
+ 组织成员：
+ {{ selInfo.organizationPersonnelShow }}
+
+ 服务事项：
+ {{ selInfo.serviceItem }}
+
+ 负责人：
+ {{ selInfo.principalName }}
+
+ 联系电话：
+ {{ selInfo.principalPhone }}
+
+ 创建时间：
+ {{ selInfo.organizationCreatedTime }}
+
+
+
@@ -407,24 +394,130 @@ import cptTb from "@/views/modules/visual/cpts/tb";
import cptCard from "@/views/modules/visual/cpts/card";
import ScreenLoading from "@/views/modules/visual/cpts/loading";
import People from "../../basicinfo/people";
-import eventInfo from "./eventInfo";
-import serviceInfo from "./serviceInfo";
-import fuwuInfo from "./fuwuInfo";
-import qsydw from "./qsydw";
-
-
var centerPointGlobal = [120.664619, 36.504963]
let loading;//加载动画
-
+let map;
+let mapView;
+let gaodeMapLayer;//背景地图图层
+let parentLayer;//上级组织图层
+let parentSource;//上级组织多边形
+let polygonLayer;//标注图层
+let iconLayer; // icon标注图层
+let iconSource; // icon
+let polygonSource;//标注多边形
+let select;//选中标注
+
+let xoffset = 0
+let yoffset = 0
+
+
+//url图标
+
+let iconUrlArray = [
+ 'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a219130b6bc74b0b80b5ddb0fce0892a.png',
+ 'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a775d15e62374350b80e5cdf1912a4eb.png',
+ 'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/884efcf6d6b44224a7fda599dd1b14cb.png'
+];
+let textColorArray = [
+ 'rgba(236, 69, 4, 0.66)',
+ 'rgba(0, 146, 238, 0.75)',
+ 'rgba(238, 151, 0, 0.8)'
+];
+let polygonColorArray = [
+ 'rgba(210, 2, 2, 0.24)',
+ 'rgba(43, 231, 253, 0.25)',
+ 'rgba(183, 185, 0, 0.16)'
+];
+//标注的文字样式
+var createTextStyle = function (feature) {
+ return new Text({
+ textAlign: undefined,
+ font: "18px Arial",
+ //fontFamily: "Courier New, monospace",
+ // fontWeight: "bold",
+ text: feature.values_.name,
+ backgroundFill: new Fill({
+ // color: 'rgba(0, 146, 238, 0.75)'
+ color: textColorArray[feature.values_.colorIndex]
+ }),
+ padding: [4, 10, 4, 10],
+ //text: "名称",
+ fill: new Fill({ color: "#ffffff" }),
+ // stroke: new Stroke({ color: "#ffffff", width: 3 }),
+ offsetY: -30,
+ offsetX: -50,
+ overflow: true,
+ });
+};
+
+//上级组织标注样式
+var parentStyleFunction = (function () {
+ return function (feature) {
+ return new Style({
+ // fill: new Fill({
+ // color: [255, 255, 255, 0.3]
+ // }),
+ stroke: new Stroke({
+ color: [0, 103, 182, 1],
+ width: 2
+ }),
+
+ // text: createTextStyle(feature)
+ });;
+ };
+})()
+
+
+//标注样式
+var polygonStyleFunction = (function () {
+ return function (feature) {
+ return new Style({
+ fill: new Fill({
+ // color: [255, 255, 255, 0.3]
+ color: polygonColorArray[feature.values_.colorIndex]
+ }),
+ stroke: new Stroke({
+ color: polygonColorArray[feature.values_.colorIndex],
+ width: 3
+ }),
+
+ text: createTextStyle(feature)
+ });;
+ };
+})()
+
+//定义颜色转换方法
+let reverseFunc = function (pixelsTemp) {
+ //蓝色
+ for (var i = 0; i < pixelsTemp.length; i += 4) {
+ var r = pixelsTemp[i];
+ var g = pixelsTemp[i + 1];
+ var b = pixelsTemp[i + 2];
+ //运用图像学公式，设置灰度值
+ var grey = r * 0.3 + g * 0.59 + b * 0.11;
+ //将rgb的值替换为灰度值
+ pixelsTemp[i] = grey;
+ pixelsTemp[i + 1] = grey;
+ pixelsTemp[i + 2] = grey;
+
+ //基于灰色，设置为蓝色，这几个数值是我自己试出来的，可以根据需求调整
+ pixelsTemp[i] = 55 - pixelsTemp[i];
+ pixelsTemp[i + 1] = 255 - pixelsTemp[i + 1];
+ pixelsTemp[i + 2] = 305 - pixelsTemp[i + 2];
+ }
+};
const vueGis = {
name: 'HomeMap',
data () {
return {
+ centerPoint: [],//中心点位置
+ zoom: 14,//缩放范围：区14
+ minZoom: 1,//最小缩放
orgData: {},//当前组织对象
orgId: '',
@@ -582,16 +675,41 @@ const vueGis = {
selPlaceType: '',
selInfo: {},
selUserId: '',
- showPeopleInfo: false,
-
- pageType: '',
- eventId: '1542065054671142914',
- eventDetailData: {},
+ showPeopleInfo: false
}
},
async mounted () {
+ //加载组织数据
+ await this.loadOrgData()
+
+ //初始化地图
+ this.initMap()
+
+ await nextTick(300)
+ this.addParentLayer()
+ this.loadParentPolygon()
+ //添加标注图层
+ this.addPolygonLayer()
+
+ //添加icontuceng
+ this.addIconLayer()
+
+ //加载当前园区的标注
+ this.loadPolygon(this.subAgencyArray)
+
+
+ this.setMapLocation()
+ await this.loadCategoryList()
+ this.getTable();
+ await this.getMapTable();
+
+
+ //初始化icon图层
+ this.addOverlay()
+
+ this.addMapClick()
},
methods: {
@@ -1036,18 +1154,11 @@ const vueGis = {
this.getTable();
this.getMapTable();
},
- // handleSearch () {
- // this.demand.pageNo = 1
- // this.getTable();
- // this.getMapTable();
- // },
handleSearch () {
- this.pageType = "dispose";
- },
- handleClose () {
- this.pageType = "";
+ this.demand.pageNo = 1
+ this.getTable();
+ this.getMapTable();
},
-
//
handleClickRow (index) {
let selData = this.tableList[index]
@@ -1727,7 +1838,7 @@ const vueGis = {
...mapGetters(["clientHeight"])
},
- components: { cptTb, cptCard, ScreenLoading, People, eventInfo, serviceInfo, fuwuInfo, qsydw },
+ components: { cptTb, cptCard, ScreenLoading, People },
}
export default vueGis;
房屋信息
+ 房屋名称：
+ {{ selInfo.houseName }}
+
+ 房屋类型：
+ {{ selInfo.houseTypeName }}
+
+ 房屋用途：
+ {{ selInfo.purposeName }}
+
+ 房屋状态：
+ {{ selInfo.rentName }}
+
+ 房主姓名：
+ {{ selInfo.ownerName }}
+
+ 联系方式：
+ {{ selInfo.ownerPhone }}
+
+ 房主身份证：
+ {{ selInfo.ownerIdCard }}
-
-
+ 企事业信息
- 场所类型：
- {{ selInfo.placeTypeName }}
-
- 场所区域：
- {{ selInfo.gridName }}
-
- 场所名称：
- {{ selInfo.placeOrgName }}
-
- 场所地址：
- {{ selInfo.address }}
-
- 规模：
- {{ selInfo.scale }}
-
- 负责人：
- {{ selInfo.personInCharge }}
-
- 联系电话：
- {{ selInfo.mobile }}
-
+
+
@@ -361,21 +363,6 @@
企事业信息
+ 场所类型：
+ {{ selInfo.placeTypeName }}
-
-
+ 联建单位信息
- 单位名称：
- {{ selInfo.unitName }}
-
- 分类：
- {{ selInfo.typeName }}
-
- 服务事项：
- {{ selInfo.serviceMatterListShow }}
-
- 联系人：
- {{ selInfo.contact }}
-
- 联系电话：
- {{ selInfo.contactMobile }}
-
- 在职党员：
- {{ selInfo.memberCount }}
-
- 备注：
- {{ selInfo.remark }}
-
- 地理位置：
- {{ selInfo.address }}
-
+ 场所区域：
+ {{ selInfo.gridName }}
+
+ 场所名称：
+ {{ selInfo.placeOrgName }}
+
+ 场所地址：
+ {{ selInfo.address }}
+
+ 规模：
+ {{ selInfo.scale }}
+
+ 负责人：
+ {{ selInfo.personInCharge }}
+
+ 联系电话：
+ {{ selInfo.mobile }}
+
联建单位信息
+ 单位名称：
+ {{ selInfo.unitName }}
+
+ 分类：
+ {{ selInfo.typeName }}
+
+ 服务事项：
+ {{ selInfo.serviceMatterListShow }}
+
+ 联系人：
+ {{ selInfo.contact }}
+
+ 联系电话：
+ {{ selInfo.contactMobile }}
+
+ 在职党员：
+ {{ selInfo.memberCount }}
+
+ 备注：
+ {{ selInfo.remark }}
+
+ 地理位置：
+ {{ selInfo.address }}
+
+