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. 561
      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 {

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

@ -1,209 +1,238 @@
<template>
<div>
<div class="dialog-h-content scroll-h">
<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' }">
<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' }"
>
<div class="list">
<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 || []">
<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 || []"
>
<template v-if="item.type == 'switch'">
<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">
<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"
>
</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]"
class="item-input"
size="small"
clearable
show-word-limit
:maxlength="item.maxlength || ''"
:placeholder="item.placeholder || '请输入'">
v-model="fmData[item.keyName]"
class="item-input"
size="small"
clearable
show-word-limit
:maxlength="item.maxlength || ''"
: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]"
type="textarea"
class="item-input"
size="small"
clearable
show-word-limit
:rows="3"
:maxlength="item.maxlength || ''"
:placeholder="item.placeholder || '请输入'">
v-model="fmData[item.keyName]"
type="textarea"
class="item-input"
size="small"
clearable
show-word-limit
:rows="3"
:maxlength="item.maxlength || ''"
: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]"
:picker-options="item.pickerOptions"
class="item-input"
size="small"
clearable
show-word-limit
:value-format="item.format || 'yyyy-MM-dd'"
:placeholder="item.placeholder || '请输入'">
v-model="fmData[item.keyName]"
:picker-options="item.pickerOptions"
class="item-input"
size="small"
clearable
show-word-limit
:value-format="item.format || 'yyyy-MM-dd'"
: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]"
class="item-number"
size="small"
clearable
:precision="item.precision || 0"
:step="item.step || 1"
:min="item.min || 0"
:max="item.max || 999999999999"
:placeholder="item.placeholder || '请输入'">
v-model="fmData[item.keyName]"
class="item-number"
size="small"
clearable
:precision="item.precision || 0"
:step="item.step || 1"
:min="item.min || 0"
:max="item.max || 999999999999"
: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]"
:placeholder="item.placeholder || '请选择'"
size="small"
clearable
class="item-select"
:multiple="item.multiple || false"
:filterable="item.filterable || false"
:allowCreate="item.allowCreate || false"
:collapse-tags="item.collapseTags || false"
default-first-option
@change="(e) => handleChangeSelect(e, item)">
<el-select
v-model="fmData[item.keyName]"
:placeholder="item.placeholder || '请选择'"
size="small"
clearable
class="item-select"
:multiple="item.multiple || false"
:filterable="item.filterable || false"
:allowCreate="item.allowCreate || false"
:collapse-tags="item.collapseTags || false"
default-first-option
@change="(e) => handleChangeSelect(e, item)"
>
<template v-if="item.optionType == 'group'">
<el-option-group v-for="group in item.optionList"
:key="group.label"
:label="group.label">
<el-option v-for="subItem in group.optionList"
:key="subItem.value"
:label="subItem.label"
:value="subItem.value">
<el-option-group
v-for="group in item.optionList"
:key="group.label"
:label="group.label"
>
<el-option
v-for="subItem in group.optionList"
:key="subItem.value"
:label="subItem.label"
:value="subItem.value"
>
</el-option>
</el-option-group>
</template>
<template v-else>
<el-option v-for="(subItem, subIndex) in item.optionList"
:key="subItem.value + subIndex"
:label="subItem.label"
:value="subItem.value">
<el-option
v-for="(subItem, subIndex) in item.optionList"
:key="subItem.value + subIndex"
:label="subItem.label"
: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"
v-model="fmData[item.keyName]"
:customerId="customerId"
:placeholder="item.placeholder || '请输入'"
:height="500" />
class="item-rich-text"
>
<Tinymce
:ref="'richText' + item.keyName"
v-model="fmData[item.keyName]"
:customerId="customerId"
:placeholder="item.placeholder || '请输入'"
:height="500"
/>
</div>
<div v-else
class="item-rich-text z-show"
@click="handleClickHtmlNode">
<div
v-else
class="item-rich-text z-show"
@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]"
:placeholder="item.placeholder || '请选择'"
:options="item.optionList"
:props="item.optionProps || {}"
:show-all-levels="false"
:collapse-tags="item.collapseTags || false"
size="small"
clearable
class="item-select"
@change="(e) => handleChangeCascader(e, item)">
<el-cascader
v-model="fmData[item.keyName]"
:placeholder="item.placeholder || '请选择'"
:options="item.optionList"
:props="item.optionProps || {}"
:show-all-levels="false"
:collapse-tags="item.collapseTags || false"
size="small"
clearable
class="item-select"
@change="(e) => handleChangeCascader(e, item)"
>
</el-cascader>
</template>
<template v-else-if="item.type == 'upload'">
<el-upload :headers="$getElUploadHeaders()"
v-if="
<el-upload
:headers="$getElUploadHeaders()"
v-if="
formType == 'add' || (formType == 'edit' && !item.editDisable)
"
ref="upload"
class="avatar-uploader"
:class="{ 'z-full': fmData[item.keyName].length >= item.limit }"
:action="item.uploadUrl || uploadUrl"
:data="{ customerId: customerId }"
:show-file-list="true"
:list-type="item.listType || 'picture'"
:limit="item.limit || 100"
:file-list="fmData[item.keyName]"
:on-success="(res, file) => handleImgSuccess(res, file, item)"
: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)">
ref="upload"
class="avatar-uploader"
:class="{ 'z-full': fmData[item.keyName].length >= item.limit }"
:action="item.uploadUrl || uploadUrl"
:data="{ customerId: customerId }"
:show-file-list="true"
:list-type="item.listType || 'picture'"
:limit="item.limit || 100"
:file-list="fmData[item.keyName]"
:on-success="(res, file) => handleImgSuccess(res, file, item)"
: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)"
>
<a><i class="el-icon-plus"></i> 点击上传</a>
</el-upload>
<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>
<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>
<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,101 +246,114 @@
size="small"
ref="mapSearch"
@click="handleSearchMap(item)">查询</el-button> -->
<el-select v-model="searchValue"
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">
<el-select
v-model="searchAddressKeyword"
filterable
class="item-input"
remote
:reserve-keyword="true"
placeholder="请输入关键词"
:remote-method="remoteMethod"
: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"
maxlength="50"
placeholder="请输入经度"
v-model="fmData[item.supKeys[0]]">
<el-input
class="address-item-input2"
maxlength="50"
placeholder="请输入经度"
v-model="fmData[item.supKeys[0]]"
>
</el-input>
<span style="margin-left: 20px">纬度</span>
<el-input class="address-item-input2"
maxlength="50"
placeholder="请输入纬度"
v-model="fmData[item.supKeys[1]]">
<el-input
class="address-item-input2"
maxlength="50"
placeholder="请输入纬度"
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]"
class="item-input"
size="small"
clearable
show-word-limit
:maxlength="item.maxlength || ''"
:placeholder="item.placeholder || '请输入'">
v-model="fmData[item.keyName]"
class="item-input"
size="small"
clearable
show-word-limit
:maxlength="item.maxlength || ''"
: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'"
type="primary"
size="small"
:disabled="btnDisable"
@click="handleComfirm">{{ editConfig.confirmBtnName || "确定" }}</el-button>
<slot name="operateSup"
v-bind:id="formId"
v-bind:info="fmData"
v-bind:formType="formType"></slot>
<el-button
v-if="formType != 'watch'"
type="primary"
size="small"
:disabled="btnDisable"
@click="handleComfirm"
>{{ editConfig.confirmBtnName || "确定" }}</el-button
>
<slot
name="operateSup"
v-bind:id="formId"
v-bind:info="fmData"
v-bind:formType="formType"
></slot>
</div>
<slot name="bottomSup"
v-bind:id="formId"
v-bind:info="fmData"
v-bind:formType="formType"></slot>
<slot
name="bottomSup"
v-bind:id="formId"
v-bind:info="fmData"
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'"
type="primary"
size="small"
:disabled="btnDisable"
@click="handleComfirm">{{ editConfig.confirmBtnName || "确定" }}</el-button>
<slot name="operateSup"
v-bind:id="formId"
v-bind:info="fmData"
v-bind:formType="formType"></slot>
<el-button
v-if="formType != 'watch'"
type="primary"
size="small"
:disabled="btnDisable"
@click="handleComfirm"
>{{ editConfig.confirmBtnName || "确定" }}</el-button
>
<slot
name="operateSup"
v-bind:id="formId"
v-bind:info="fmData"
v-bind:formType="formType"
></slot>
</div>
</div>
</template>
@ -384,12 +426,9 @@ export default {
},
},
data () {
data() {
return {
iniLoaded: false,
searchOptions: [],
searchValue: '',
resultList: [],
loading: false,
btnDisable: false,
@ -401,25 +440,27 @@ export default {
uploadUrl: window.SITE_CONFIG["apiURL"] + "/oss/file/uploadqrcodeV2",
customerId: localStorage.getItem("customerId"),
addressItem: {}
// 做搜索地址用
searchAddressOptions: [],
searchAddressKeyword: "",
};
},
computed: {},
watch: {
editParams: {
handler () {
handler() {
this.computeFmData();
},
deep: true,
},
},
async mounted () {
async mounted() {
this.initForm();
},
methods: {
async initForm () {
async initForm() {
this.iniFmData();
if (this.formId && this.formType != "add") {
@ -427,11 +468,11 @@ export default {
}
},
computeFmData () {
computeFmData() {
console.log(this.fmData);
},
iniFmData () {
iniFmData() {
const { editParams, fmData, editParamsDiv } = this;
editParams.forEach((item, index) => {
if (typeof item.value == "function") {
@ -487,7 +528,6 @@ export default {
this.$nextTick(async () => {
await nextTick(300);
this.addressItem = item
this.initMap(item);
});
}
@ -504,7 +544,7 @@ export default {
this.iniLoaded = true;
},
handleClickHtmlNode (e) {
handleClickHtmlNode(e) {
//在判断事件目标节点的时候，考虑到兼容性应该统一转换成大写或小写进行判断
if (e.target.localName.toLowerCase() === "a") {
// 通过判端目标节点以后，就能在这里对其进行操作啦。
@ -513,7 +553,7 @@ export default {
}
},
async getFmOptions (index, url, params, cookFn) {
async getFmOptions(index, url, params, cookFn) {
const { data, code, msg } = await requestPost(url, {
...params,
});
@ -526,13 +566,13 @@ export default {
}
},
handleChangeCascader (vals, item) {
handleChangeCascader(vals, item) {
this.fmData[item["keyName"]] = vals;
if (typeof item.handleChangeFn == "function") {
item.handleChangeFn(vals, item, this);
}
},
handleChangeSelect (vals, item) {
handleChangeSelect(vals, item) {
console.log(vals, item);
this.fmData[item["keyName"]] = vals;
if (typeof item.handleChangeFn == "function") {
@ -540,14 +580,14 @@ export default {
}
},
beforeImgUpload (file, item) {
beforeImgUpload(file, item) {
if (typeof item.beforeImgUpload == "function") {
if (!item.beforeImgUpload(file, item, this)) return false;
}
return true;
},
handleImgRemove (file, item) {
handleImgRemove(file, item) {
console.log("handleImgRemove", file);
let url = file.response ? file.response.data.url : file.url;
if (url) {
@ -569,7 +609,7 @@ export default {
}
},
handleImgExceed (res, item) {
handleImgExceed(res, item) {
console.log(res);
// this.$message({
// type: "warning",
@ -577,7 +617,7 @@ export default {
// });
},
handleImgSuccess (res, file, item) {
handleImgSuccess(res, file, item) {
console.log("handleImgSuccess", res);
if (res.code === 0 && res.msg === "success") {
let { fmData } = this;
@ -613,12 +653,12 @@ export default {
}
},
handleImgError (res, file, item) {
handleImgError(res, file, item) {
console.log(res);
},
// 地图初始化函数，本例取名为init，开发者可根据实际情况定义
initMap (item) {
initMap(item) {
let { latitude, longitude } = this.$store.state.user;
map = new daiMap(
@ -639,9 +679,7 @@ export default {
map.setMarker(latitude, longitude);
},
async handleSearchMap (item) {
async handleSearchMap(item) {
const { msg, data } = await map.searchNearby(this.fmData[item.keyName]);
if (msg == "success") {
const { lat, lng } = data;
@ -654,72 +692,63 @@ export default {
}
},
async handleMoveCenter (item, e) {
async handleMoveCenter(item, e) {
console.log("handleMoveCenter", e);
//修改地图中心点
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 !== '') {
async remoteMethod(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 () {
async getInfo() {
let url = this.infoUrl;
if (!url) return;
const { idName, formId } = this;
@ -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,
@ -760,12 +795,12 @@ export default {
}
},
watchImg (src) {
watchImg(src) {
window.open(src);
},
// 过滤文本
dormatHtml (content) {
dormatHtml(content) {
if (
content.startsWith(
"<!DOCTYPE html>\n<html>\n<head>\n</head>\n<body>\n"
@ -777,7 +812,7 @@ export default {
return content;
},
cookBeforeSubmit (data) {
cookBeforeSubmit(data) {
Object.keys(data).forEach((k) => {
if (typeof data[k] == "string") {
data[k] = this.dormatHtml(data[k]);
@ -786,7 +821,7 @@ export default {
return data;
},
async handleComfirm () {
async handleComfirm() {
this.btnDisable = true;
setTimeout(() => {
this.btnDisable = false;
@ -818,7 +853,7 @@ export default {
});
},
async submit () {
async submit() {
const { editConfig, fmData, formType, editFixedParams } = this;
if (
typeof editConfig.beforeSubmit == "function" &&
@ -858,7 +893,7 @@ export default {
}
},
handleCancle () {
handleCancle() {
this.$emit("close");
},
},

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