elink-star
/
epmet-oper-gov
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

用ol做了一个demo，改了一个bug

dev-烟台中转登录
dai 3 years ago
parent
09447cf5ce
commit
47006059d7
6 changed files with 1414 additions and 318 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 15
      src/utils/dai-map.js
  2. 277
      src/views/modules/cpts/base/cpts/edit.vue
  3. 1081
      src/views/modules/visual/command/cpts/map-ol.vue
  4. 20
      src/views/modules/visual/command/cpts/map.vue
  5. 4
      src/views/modules/visual/command/index.vue
  6. 51
      src/views/modules/workSys/mapConfig.vue

15
src/utils/dai-map.js
View File

@ -40,7 +40,8 @@ export function searchNearby(map, keyword) {
let { data } = result;
if (Array.isArray(data) && data.length > 0) {
const {
location: { lat, lng, address },
location: { lat, lng },
address,
} = data[0];
reslove({
msg: "success",
@ -48,7 +49,11 @@ export function searchNearby(map, keyword) {
lng,
lat,
address,
resultList: data,
resultList: data.map((item) => {
item.lonlat = lng + " " + lat;
item.name = item.name || "";
return item;
}),
},
});
} else {
@ -124,7 +129,11 @@ export function searchNearby(map, keyword) {
lng,
lat,
address: address + name,
resultList: result.features,
resultList: result.features.map((item) => {
item.lonlat = lng + " " + lat;
item.name = item.name || "";
return item;
}),
},
});
} else {

277
src/views/modules/cpts/base/cpts/edit.vue
View File

@ -1,34 +1,41 @@
<template>
<div>
<div class="dialog-h-content scroll-h">
<el-form v-if="iniLoaded"
<el-form
v-if="iniLoaded"
ref="ref_form"
:model="fmData"
:inline="true"
:disabled="formType === 'watch'"
class="m-fm"
:class="{ 'z-div': editParamsDiv, 'z-watch': formType === 'watch' }">
:class="{ 'z-div': editParamsDiv, 'z-watch': formType === 'watch' }"
>
<div class="list">
<el-form-item v-for="item in editParams"
<el-form-item
v-for="item in editParams"
class="item"
label-width="140px"
style="display: block"
:key="'edit' + item.keyName"
:label="item.field"
:prop="item.keyName"
:rules="item.rules || []">
:rules="item.rules || []"
>
<template v-if="item.type == 'switch'">
<el-switch v-model="fmData[item.keyName]"
<el-switch
v-model="fmData[item.keyName]"
size="small"
:active-text="item.activeText || ''"
:inactive-text="item.inactiveText || ''"
:active-value="item.activeValue || true"
:inactive-value="item.inactiveValue || false">
:inactive-value="item.inactiveValue || false"
>
</el-switch>
</template>
<template v-if="item.type == 'input'">
<el-input v-if="
<el-input
v-if="
formType == 'add' || (formType == 'edit' && !item.editDisable)
"
v-model="fmData[item.keyName]"
@ -37,17 +44,18 @@
clearable
show-word-limit
:maxlength="item.maxlength || ''"
:placeholder="item.placeholder || '请输入'">
:placeholder="item.placeholder || '请输入'"
>
</el-input>
<div class="item-show"
v-else>
<div class="item-show" v-else>
{{ fmData[item.keyName] || "--" }}
</div>
</template>
<template v-if="item.type == 'textarea'">
<el-input v-if="
<el-input
v-if="
formType == 'add' || (formType == 'edit' && !item.editDisable)
"
v-model="fmData[item.keyName]"
@ -58,17 +66,18 @@
show-word-limit
:rows="3"
:maxlength="item.maxlength || ''"
:placeholder="item.placeholder || '请输入'">
:placeholder="item.placeholder || '请输入'"
>
</el-input>
<div class="item-show"
v-else>
<div class="item-show" v-else>
{{ fmData[item.keyName] || "--" }}
</div>
</template>
<template v-if="item.type == 'date'">
<el-date-picker v-if="
<el-date-picker
v-if="
formType == 'add' || (formType == 'edit' && !item.editDisable)
"
v-model="fmData[item.keyName]"
@ -78,17 +87,18 @@
clearable
show-word-limit
:value-format="item.format || 'yyyy-MM-dd'"
:placeholder="item.placeholder || '请输入'">
:placeholder="item.placeholder || '请输入'"
>
</el-date-picker>
<div class="item-show"
v-else>
<div class="item-show" v-else>
{{ fmData[item.keyName] || "--" }}
</div>
</template>
<template v-if="item.type == 'number'">
<el-input-number v-if="
<el-input-number
v-if="
formType == 'add' || (formType == 'edit' && !item.editDisable)
"
v-model="fmData[item.keyName]"
@ -99,17 +109,18 @@
:step="item.step || 1"
:min="item.min || 0"
:max="item.max || 999999999999"
:placeholder="item.placeholder || '请输入'">
:placeholder="item.placeholder || '请输入'"
>
</el-input-number>
<span class="item-show"
v-else>
<span class="item-show" v-else>
{{ fmData[item.keyName] || "--" }}
</span>
<span v-if="item.unitName">（{{ item.unitName }}）</span>
</template>
<template v-else-if="item.type == 'select'">
<el-select v-model="fmData[item.keyName]"
<el-select
v-model="fmData[item.keyName]"
:placeholder="item.placeholder || '请选择'"
size="small"
clearable
@ -119,48 +130,62 @@
:allowCreate="item.allowCreate || false"
:collapse-tags="item.collapseTags || false"
default-first-option
@change="(e) => handleChangeSelect(e, item)">
@change="(e) => handleChangeSelect(e, item)"
>
<template v-if="item.optionType == 'group'">
<el-option-group v-for="group in item.optionList"
<el-option-group
v-for="group in item.optionList"
:key="group.label"
:label="group.label">
<el-option v-for="subItem in group.optionList"
:label="group.label"
>
<el-option
v-for="subItem in group.optionList"
:key="subItem.value"
:label="subItem.label"
:value="subItem.value">
:value="subItem.value"
>
</el-option>
</el-option-group>
</template>
<template v-else>
<el-option v-for="(subItem, subIndex) in item.optionList"
<el-option
v-for="(subItem, subIndex) in item.optionList"
:key="subItem.value + subIndex"
:label="subItem.label"
:value="subItem.value">
:value="subItem.value"
>
</el-option>
</template>
</el-select>
</template>
<template v-else-if="item.type == 'rich-text'">
<div v-if="
<div
v-if="
formType == 'add' || (formType == 'edit' && !item.editDisable)
"
class="item-rich-text">
<Tinymce :ref="'richText' + item.keyName"
class="item-rich-text"
>
<Tinymce
:ref="'richText' + item.keyName"
v-model="fmData[item.keyName]"
:customerId="customerId"
:placeholder="item.placeholder || '请输入'"
:height="500" />
:height="500"
/>
</div>
<div v-else
<div
v-else
class="item-rich-text z-show"
@click="handleClickHtmlNode">
@click="handleClickHtmlNode"
>
<div v-html="fmData[item.keyName]"></div>
</div>
</template>
<template v-else-if="item.type == 'cascader'">
<el-cascader v-model="fmData[item.keyName]"
<el-cascader
v-model="fmData[item.keyName]"
:placeholder="item.placeholder || '请选择'"
:options="item.optionList"
:props="item.optionProps || {}"
@ -169,12 +194,14 @@
size="small"
clearable
class="item-select"
@change="(e) => handleChangeCascader(e, item)">
@change="(e) => handleChangeCascader(e, item)"
>
</el-cascader>
</template>
<template v-else-if="item.type == 'upload'">
<el-upload :headers="$getElUploadHeaders()"
<el-upload
:headers="$getElUploadHeaders()"
v-if="
formType == 'add' || (formType == 'edit' && !item.editDisable)
"
@ -191,19 +218,21 @@
:on-error="(res, file) => handleImgError(res, file, item)"
:on-remove="(res) => handleImgRemove(res, item)"
:on-exceed="(res) => handleImgExceed(res, item)"
:before-upload="(file) => beforeImgUpload(file, item)">
:before-upload="(file) => beforeImgUpload(file, item)"
>
<a><i class="el-icon-plus"></i> 点击上传</a>
</el-upload>
<el-image v-else-if="fmData[item.keyName].length > 0"
<el-image
v-else-if="fmData[item.keyName].length > 0"
style="width: 100px; height: 100px"
:src="fmData[item.keyName][0].url"
fit="cover"
:preview-src-list="fmData[item.keyName].map((item) => item.url)"></el-image>
:preview-src-list="fmData[item.keyName].map((item) => item.url)"
></el-image>
<span v-else>--</span>
</template>
<template v-else-if="item.type == 'address'">
<div class="address-item">
<!-- <el-input class="address-item-input"
:placeholder="item.placeholder || '请输入所在地址'"
@ -217,41 +246,48 @@
size="small"
ref="mapSearch"
@click="handleSearchMap(item)">查询</el-button> -->
<el-select v-model="searchValue"
<el-select
v-model="searchAddressKeyword"
filterable
class="item-input"
remote
:reserve-keyword="true"
placeholder="请输入关键词"
:remote-method="remoteMethod"
:loading="loading">
<el-option v-for="(item,index) in searchOptions"
@click.native="handleClickKey(index)"
:key="item.value"
:label="item.label"
:value="item.value">
:loading="loading"
>
<el-option
v-for="subitem in searchAddressOptions"
@click.native="handleClickKey(subitem, item)"
:key="subitem.value"
:label="subitem.label"
:value="subitem.value"
>
</el-option>
</el-select>
<div id="app_base"
class="div_map"></div>
<div style="margin-top: 10px"
v-show="false">
<div id="app_base" class="div_map"></div>
<div style="margin-top: 10px" v-show="false">
<span>经度</span>
<el-input class="address-item-input2"
<el-input
class="address-item-input2"
maxlength="50"
placeholder="请输入经度"
v-model="fmData[item.supKeys[0]]">
v-model="fmData[item.supKeys[0]]"
>
</el-input>
<span style="margin-left: 20px">纬度</span>
<el-input class="address-item-input2"
<el-input
class="address-item-input2"
maxlength="50"
placeholder="请输入纬度"
v-model="fmData[item.supKeys[1]]">
v-model="fmData[item.supKeys[1]]"
>
</el-input>
</div>
</div>
<el-input v-if="
<el-input
v-if="
formType == 'add' || (formType == 'edit' && !item.editDisable)
"
v-model="fmData[item.keyName]"
@ -260,58 +296,64 @@
clearable
show-word-limit
:maxlength="item.maxlength || ''"
:placeholder="item.placeholder || '请输入'">
:placeholder="item.placeholder || '请输入'"
>
</el-input>
<div class="item-show"
v-else>
<div class="item-show" v-else>
{{ fmData[item.keyName] || "--" }}
</div>
</template>
</el-form-item>
</div>
</el-form>
<div class="div_btn resi-btns"
v-if="!formBtnFixed">
<el-button size="small"
@click="handleCancle">{{
<div class="div_btn resi-btns" v-if="!formBtnFixed">
<el-button size="small" @click="handleCancle">{{
editConfig.cancelBtnName || "取消"
}}</el-button>
<el-button v-if="formType != 'watch'"
<el-button
v-if="formType != 'watch'"
type="primary"
size="small"
:disabled="btnDisable"
@click="handleComfirm">{{ editConfig.confirmBtnName || "确定" }}</el-button>
<slot name="operateSup"
@click="handleComfirm"
>{{ editConfig.confirmBtnName || "确定" }}</el-button
>
<slot
name="operateSup"
v-bind:id="formId"
v-bind:info="fmData"
v-bind:formType="formType"></slot>
v-bind:formType="formType"
></slot>
</div>
<slot name="bottomSup"
<slot
name="bottomSup"
v-bind:id="formId"
v-bind:info="fmData"
v-bind:formType="formType"></slot>
v-bind:formType="formType"
></slot>
</div>
<div class="div_btn resi-btns"
v-if="formBtnFixed">
<el-button size="small"
@click="handleCancle">{{
<div class="div_btn resi-btns" v-if="formBtnFixed">
<el-button size="small" @click="handleCancle">{{
editConfig.cancelBtnName || "取消"
}}</el-button>
<el-button v-if="formType != 'watch'"
<el-button
v-if="formType != 'watch'"
type="primary"
size="small"
:disabled="btnDisable"
@click="handleComfirm">{{ editConfig.confirmBtnName || "确定" }}</el-button>
<slot name="operateSup"
@click="handleComfirm"
>{{ editConfig.confirmBtnName || "确定" }}</el-button
>
<slot
name="operateSup"
v-bind:id="formId"
v-bind:info="fmData"
v-bind:formType="formType"></slot>
v-bind:formType="formType"
></slot>
</div>
</div>
</template>
@ -387,9 +429,6 @@ export default {
data() {
return {
iniLoaded: false,
searchOptions: [],
searchValue: '',
resultList: [],
loading: false,
btnDisable: false,
@ -401,7 +440,9 @@ export default {
uploadUrl: window.SITE_CONFIG["apiURL"] + "/oss/file/uploadqrcodeV2",
customerId: localStorage.getItem("customerId"),
addressItem: {}
// 做搜索地址用
searchAddressOptions: [],
searchAddressKeyword: "",
};
},
computed: {},
@ -487,7 +528,6 @@ export default {
this.$nextTick(async () => {
await nextTick(300);
this.addressItem = item
this.initMap(item);
});
}
@ -639,8 +679,6 @@ export default {
map.setMarker(latitude, longitude);
},
async handleSearchMap(item) {
const { msg, data } = await map.searchNearby(this.fmData[item.keyName]);
if (msg == "success") {
@ -659,66 +697,57 @@ export default {
//修改地图中心点
const { lat, lng } = map.getCenter();
this.fmData[item.supKeys[0]] = lng;
this.fmData[item.supKeys[1]] = lat;
this.fmData[item.supKeys[0]] = parseFloat(lng);
this.fmData[item.supKeys[1]] = parseFloat(lat);
map.setMarker(lat, lng);
let { msg, data } = await map.getAddress(lat, lng);
if (msg == "success") {
this.fmData[item.keyName] = data.address;
this.searchValue = data.address
this.searchOptions = []
this.searchAddressOptions = [];
}
},
async remoteMethod(query) {
if (query !== '') {
if (query !== "") {
this.loading = true;
const { msg, data } = await map.searchNearby(query);
this.loading = false;
this.resultList = []
console.log("搜索结果", data);
if (msg == "success" && data.resultList && data.resultList.length > 0) {
if (data.resultList && data.resultList.length > 0) {
this.resultList = data.resultList
this.searchOptions = this.resultList.map(item => {
return { value: `${item.hotPointID}`, label: `${item.address + item.name}` };
this.searchAddressOptions = data.resultList.map((item, index) => {
return {
...item,
value: `${item.lonlat + item.address}`,
label: `${item.address + item.name}`,
};
});
}
} else {
this.searchOptions = [
this.searchAddressOptions = [
{
value: '0',
label: '未检索到结果'
}
]
value: "0",
label: "未检索到结果",
},
];
}
} else {
this.searchOptions = [];
this.searchAddressOptions = [];
}
},
handleClickKey (index) {
let selPosition = this.resultList[index]
let lonlat = selPosition.lonlat.split(" ")
handleClickKey(item, fmItem) {
console.log("搜索结果", item);
let lonlat = item.lonlat.split(" ");
map.setCenter(lonlat[1], lonlat[0]);
map.setMarker(lonlat[1], lonlat[0]);
this.fmData[this.addressItem.supKeys[0]] = lonlat[1];
this.fmData[this.addressItem.supKeys[1]] = lonlat[0];
// this.formData.latitude = lonlat[1];
// this.formData.longitude = lonlat[0];
// this.formData.address = selPosition.address + selPosition.name
this.fmData[this.addressItem.keyName] = selPosition.address + selPosition.name
this.fmData[fmItem.supKeys[0]] = parseFloat(lonlat[1]);
this.fmData[fmItem.supKeys[1]] = parseFloat(lonlat[0]);
this.fmData[fmItem.keyName] = item.label;
},
async getInfo() {
let url = this.infoUrl;
if (!url) return;
@ -739,6 +768,12 @@ export default {
if (editConfig && typeof editConfig.cookInfoFn == "function") {
data = editConfig.cookInfoFn(data);
}
if (data.latitude && data.longitude) {
data.latitude = parseFloat(data.latitude);
data.longitude = parseFloat(data.longitude);
}
this.fmData = {
...this.fmData,
...data,

1081
src/views/modules/visual/command/cpts/map-ol.vue
View File

File diff suppressed because it is too large

20
src/views/modules/visual/command/cpts/map.vue
View File

@ -64,26 +64,6 @@ let searchMarker;
let searchBgLayer;
let tdtSearchMap;
function reversePix(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];
}
}
export default {
name: "l7",
inject: ["refresh"],

4
src/views/modules/visual/command/index.vue
View File

@ -234,6 +234,7 @@ import { requestPost } from "@/js/dai/request";
import People from "@/views/modules/visual/basicinfo/people";
import cptCard from "@/views/modules/visual/cpts/card";
import gridMap from "@/views/modules/visual/command/cpts/map";
import gridMapOl from "@/views/modules/visual/command/cpts/map-ol";
import sidemenu1 from "@/views/modules/visual/command/cpts/yantai-sidemenu1";
import sidemenu2 from "@/views/modules/visual/command/cpts/yantai-sidemenu2";
import sidemenuLeft from "@/views/modules/visual/command/cpts/sidemenu-left";
@ -243,6 +244,7 @@ import eventInfo from "@/views/modules/visual/command/cpts/eventInfo";
import serviceInfo from "@/views/modules/visual/command/cpts/serviceInfo";
import demandInfo from "@/views/modules/visual/command/cpts/demandInfo";
import qsydw from "@/views/modules/visual/command/cpts/qsydw";
import { mapType } from "@/utils/dai-map";
let loading; //加载动画
@ -286,7 +288,7 @@ export default {
People,
cptCard,
ScreenLoading,
gridMap,
gridMap: mapType == "tdzw" ? gridMapOl : gridMap,
sidemenu1,
sidemenu2,
sidemenuLeft,

51
src/views/modules/workSys/mapConfig.vue
View File

@ -736,37 +736,6 @@ const vueGis = {
const resolutions = getResolutions();
//切片名
// const matrixIds = [
// "7", // EPSG:4490:
// "8",
// "9",
// "10",
// "11",
// "12",
// "13",
// "14",
// "15",
// "16",
// "17",
// "18",
// ];
// const resolutions = [
// (0.025399998 * 4622334) / (96 * 111000),
// (0.025399998 * 2311166.84) / (96 * 111000),
// (0.025399998 * 1155583.42) / (96 * 111000),
// (0.025399998 * 577791.71) / (96 * 111000),
// (0.025399998 * 288895.85) / (96 * 111000),
// (0.025399998 * 144447.93) / (96 * 111000),
// (0.025399998 * 72223.96) / (96 * 111000),
// (0.025399998 * 36111.98) / (96 * 111000),
// (0.025399998 * 18055.99) / (96 * 111000),
// (0.025399998 * 9028) / (96 * 111000),
// (0.025399998 * 4514) / (96 * 111000),
// (0.025399998 * 2257) / (96 * 111000),
// ];
console.log("========= getProjection", getProjection("EPSG:4490"));
let url = "http://59.206.203.34/tileservice/SDPubMap";
@ -791,6 +760,26 @@ const vueGis = {
style: "default",
tilematrixset: "c",
// wrapX: true,
tileLoadFunction(imageTile, src) {
// 使用滤镜 将白色修改为深色
let img = new Image();
// img.crossOrigin = ''
// 设置图片不从缓存取，从缓存取可能会出现跨域，导致加载失败
img.setAttribute("crossOrigin", "anonymous");
img.onload = function () {
let canvas = document.createElement("canvas");
let w = img.width;
let h = img.height;
canvas.width = w;
canvas.height = h;
let context = canvas.getContext("2d");
context.filter =
"grayscale(92%) invert(100%) sepia(20%) hue-rotate(140deg) saturate(2000%) brightness(70%) contrast(80%)";
context.drawImage(img, 0, 0, w, h, 0, 0, w, h);
imageTile.getImage().src = canvas.toDataURL("image/png");
};
img.src = src;
},
}),
});

Write Preview
Loading…
Cancel
Save