|
@@ -2,7 +2,7 @@
|
|
|
<div class="search-layout">
|
|
|
<el-input
|
|
|
v-model="keyword"
|
|
|
- placeholder="输入名称搜索"
|
|
|
+ :placeholder="$t('sceneHome.nameSearch')"
|
|
|
style="width: 350px"
|
|
|
clearable
|
|
|
>
|
|
@@ -10,6 +10,20 @@
|
|
|
<el-button :icon="Search" />
|
|
|
</template>
|
|
|
</el-input>
|
|
|
+ <el-select
|
|
|
+ v-model="mapType"
|
|
|
+ placeholder="Select"
|
|
|
+ @change="handleMapTypeChange"
|
|
|
+ style="width: 160px;float: right;"
|
|
|
+
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in mapOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
<div class="rrr">
|
|
|
<div
|
|
|
class="search-result"
|
|
@@ -18,7 +32,7 @@
|
|
|
></div>
|
|
|
<div class="search-sh" v-show="keyword">
|
|
|
<el-button style="width: 100%" @click="showSearch = !showSearch">
|
|
|
- {{ showSearch ? "收起" : "展开" }}搜索结果
|
|
|
+ {{ showSearch ? $t('sys.retract') : $t('sys.expand') }}{{$t('sys.searchData')}}
|
|
|
</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -27,18 +41,26 @@
|
|
|
<GoogleMap v-if="mapType=='google'"
|
|
|
:api-key="ggMapKey"
|
|
|
class="def-select-map"
|
|
|
+ :zoomControl="false"
|
|
|
+ ref="GoogleMapEl"
|
|
|
+ :mapTypeControl="false"
|
|
|
+ :scaleControl="false"
|
|
|
+ :streetViewControl="false"
|
|
|
+ :overviewMapControl="false"
|
|
|
+ :rotateControl="false"
|
|
|
+ @click="handleMapClick"
|
|
|
:center="center"
|
|
|
- :zoom="15"
|
|
|
+ :zoom="13"
|
|
|
>
|
|
|
- <Marker :options="{ position: center }" />
|
|
|
+ <Marker ref="markerRef" :key="center && center.lat" :options="{ position: center }" />
|
|
|
</GoogleMap>
|
|
|
<div v-else class="def-select-map" ref="mapEl"></div>
|
|
|
</div>
|
|
|
|
|
|
- <div class="def-map-info" v-if="info">
|
|
|
- <p><span>纬度</span>{{ info.lat }}</p>
|
|
|
- <p><span>经度</span>{{ info.lng }}</p>
|
|
|
- <p><span>缩放级别</span>{{ info.zoom }}</p>
|
|
|
+ <div class="def-map-info" v-if="info || center.lat">
|
|
|
+ <p><span>{{$t("coord.lat")}}</span>{{ info && info.lat || center.lat }}</p>
|
|
|
+ <p><span>{{$t("coord.lng")}}</span>{{ info && info.lng || center.lng}}</p>
|
|
|
+ <p v-if="info && info.zoom"><span>{{$t("coord.zoomLevel")}}</span>{{ info.zoom }}</p>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -52,22 +74,31 @@ import { QuiskExpose } from "@/helper/mount";
|
|
|
import { debounce } from "@/util";
|
|
|
import html2canvas from "html2canvas";
|
|
|
import { router } from "@/router";
|
|
|
+import { ui18n } from "@/i18n";
|
|
|
import L from "leaflet";
|
|
|
import "leaflet/dist/leaflet.css";
|
|
|
export type MapImage = { blob: Blob | null; search: MapInfo | null };
|
|
|
type MapInfo = { lat: number; lng: number; zoom: number; text: string };
|
|
|
-
|
|
|
+let AMap = null;
|
|
|
const keyword = ref("");
|
|
|
const ggMapKey = ref("AIzaSyBGUvCR1bppO9pfuS0MUWzuftiZ127y4Os");
|
|
|
const showSearch = ref(true);
|
|
|
const info = ref<MapInfo>();
|
|
|
const searchInfo = ref<MapInfo>();
|
|
|
+const markerRef = ref(null);
|
|
|
const caseInfoData = ref<any>(null);
|
|
|
const mapType = ref("gaode");
|
|
|
const center = ref({
|
|
|
- lat: 113.0,
|
|
|
- lng: 22.61,
|
|
|
+ lat: 22.61,
|
|
|
+ lng: 113.0,
|
|
|
});
|
|
|
+const mapOptions = [{
|
|
|
+ label: ui18n.t("coord.edit.gmap"),
|
|
|
+ value: "gaode",
|
|
|
+}, {
|
|
|
+ label: ui18n.t("coord.edit.ggmap"),
|
|
|
+ value: "google",
|
|
|
+}];
|
|
|
const caseId = computed(() => {
|
|
|
const caseId = router.currentRoute.value.params.caseId;
|
|
|
if (caseId) {
|
|
@@ -81,12 +112,21 @@ watchEffect(() => {
|
|
|
}
|
|
|
});
|
|
|
|
|
|
+const GoogleMapEl = ref<HTMLDivElement>();
|
|
|
const mapEl = ref<HTMLDivElement>();
|
|
|
const resultEl = ref<HTMLDivElement>();
|
|
|
const searchAMap = ref<any>();
|
|
|
-
|
|
|
+const handleMapTypeChange = () => {
|
|
|
+ console.log(mapType.value);
|
|
|
+ if (mapType.value === "google") {
|
|
|
+ renderGgMapGd()
|
|
|
+ } else {
|
|
|
+ renderMapGd();
|
|
|
+ }
|
|
|
+}
|
|
|
const renderMapGd = async () => {
|
|
|
- const AMap = await AMapLoader.load({
|
|
|
+ let clickMarker;
|
|
|
+ AMap = await AMapLoader.load({
|
|
|
plugins: ["AMap.PlaceSearch", "AMap.Event"],
|
|
|
key: "e661b00bdf2c44cccf71ef6070ef41b8",
|
|
|
version: "2.0",
|
|
@@ -96,9 +136,15 @@ const renderMapGd = async () => {
|
|
|
preserveDrawingBuffer: true,
|
|
|
},
|
|
|
resizeEnable: true,
|
|
|
- center: [center.value.lat, center.value.lng], //中心坐标
|
|
|
- zoom: 10, //缩放级别
|
|
|
+ center: [center.value.lng, center.value.lat], //中心坐标
|
|
|
+ zoom: 13, //缩放级别
|
|
|
});
|
|
|
+ clickMarker = new AMap.Marker({
|
|
|
+ position: [center.value.lng, center.value.lat],
|
|
|
+ title: "点击位置",
|
|
|
+ });
|
|
|
+
|
|
|
+ map.add(clickMarker);
|
|
|
const placeSearch = new AMap.PlaceSearch({
|
|
|
pageSize: 5,
|
|
|
showCover: false,
|
|
@@ -125,7 +171,6 @@ const renderMapGd = async () => {
|
|
|
setSearch(e.data);
|
|
|
showSearch.value = false;
|
|
|
});
|
|
|
- let clickMarker;
|
|
|
//绑定地图移动与缩放事件
|
|
|
map.on("moveend", () => {
|
|
|
info.value = getMapInfo();
|
|
@@ -169,7 +214,19 @@ const renderMapGd = async () => {
|
|
|
}
|
|
|
}, 500);
|
|
|
});
|
|
|
- async function regeocoder(lnglatXY) {
|
|
|
+ const getMapInfo = (): MapInfo => {
|
|
|
+ var zoom = map.getZoom(); //获取当前地图级别
|
|
|
+ var centers = map.getCenter();
|
|
|
+ return {
|
|
|
+ text: "",
|
|
|
+ zoom,
|
|
|
+ lat: centers.lat,
|
|
|
+ lng: centers.lng,
|
|
|
+ };
|
|
|
+ };
|
|
|
+ searchAMap.value = placeSearch;
|
|
|
+};
|
|
|
+async function regeocoder(lnglatXY) {
|
|
|
return AMap.plugin("AMap.Geocoder", function () {
|
|
|
var geocoder = new AMap.Geocoder({
|
|
|
radius: 1000,
|
|
@@ -192,18 +249,22 @@ const renderMapGd = async () => {
|
|
|
// marker.setPosition(lnglatXY);
|
|
|
});
|
|
|
}
|
|
|
- const getMapInfo = (): MapInfo => {
|
|
|
- var zoom = map.getZoom(); //获取当前地图级别
|
|
|
- var centers = map.getCenter();
|
|
|
- return {
|
|
|
+const handleMapClick = (e) => {
|
|
|
+ center.value.lng = e.latLng.lng();
|
|
|
+ center.value.lat = e.latLng.lat();
|
|
|
+ searchInfo.value = {
|
|
|
text: "",
|
|
|
- zoom,
|
|
|
- lat: centers.lat,
|
|
|
- lng: centers.lng,
|
|
|
+ lat: center.value.lat,
|
|
|
+ lng: center.value.lng,
|
|
|
+ zoom: 0,
|
|
|
};
|
|
|
- };
|
|
|
- searchAMap.value = placeSearch;
|
|
|
-};
|
|
|
+ regeocoder([center.value.lng, center.value.lat]);
|
|
|
+ console.log(markerRef.value.marker, "handleMapClick")
|
|
|
+ markerRef.value.marker.position = center.value;
|
|
|
+ console.log( center.value, "handleMapClick", e)
|
|
|
+ // info.value.lat = center.value.lat
|
|
|
+ // info.value.lng = center.value.lng
|
|
|
+}
|
|
|
const renderGgMapGd = async () => {
|
|
|
// const map = new google.maps.Map(mapEl.value, {
|
|
|
// zoom: 10,
|
|
@@ -215,11 +276,11 @@ onMounted(async () => {
|
|
|
caseInfoData.value = await getCaseInfo(caseId.value);
|
|
|
if (caseInfoData.value?.latAndLong) {
|
|
|
let centerObj = caseInfoData.value.latAndLong.split(",").reverse()
|
|
|
- center.value.lat = parseFloat(centerObj[0]);
|
|
|
- center.value.lng = parseFloat(centerObj[1]);
|
|
|
+ center.value.lat = parseFloat(centerObj[1]);
|
|
|
+ center.value.lng = parseFloat(centerObj[0]);
|
|
|
}
|
|
|
- renderMapGd()
|
|
|
- renderGgMapGd()
|
|
|
+ console.log(caseInfoData.value, "centerObj", center.value)
|
|
|
+ handleMapTypeChange()
|
|
|
});
|
|
|
watchEffect(async (onCleanup) => {
|
|
|
if (!mapEl.value || !resultEl.value) {
|
|
@@ -252,25 +313,27 @@ watchEffect(() => {
|
|
|
defineExpose<QuiskExpose>({
|
|
|
submit() {
|
|
|
return new Promise<MapImage>((resolve) => {
|
|
|
- console.log("searchInfo", searchInfo.value, mapEl.value);
|
|
|
- if (mapEl.value) {
|
|
|
- const canvas = mapEl.value.querySelector("canvas") as HTMLCanvasElement;
|
|
|
- console.log(canvas, "canvas");
|
|
|
- canvas &&
|
|
|
- canvas.toBlob((blob) => resolve({ blob, search: searchInfo.value! })); // || resolve({ search: searchInfo.value! });
|
|
|
- if (!canvas) {
|
|
|
+ const mapDivEl = mapType.value === "google" ? GoogleMapEl.value.mapRef : mapEl.value;
|
|
|
+
|
|
|
+ console.log("searchInfo", mapDivEl);
|
|
|
+ // if (mapDivEl) {
|
|
|
+ // const canvas = mapDivEl.querySelector("canvas") as HTMLCanvasElement;
|
|
|
+ // console.log(canvas, "canvas");
|
|
|
+ // canvas &&
|
|
|
+ // canvas.toBlob((blob) => resolve({ blob, search: searchInfo.value! })); // || resolve({ search: searchInfo.value! });
|
|
|
+ // if (!canvas) {
|
|
|
//div内容生成图片
|
|
|
- html2canvas(mapEl.value, {
|
|
|
+ html2canvas(mapDivEl, {
|
|
|
useCORS: true, // 添加这个选项以解决跨域问题
|
|
|
}).then((canvas) => {
|
|
|
let imgUrl = canvas.toDataURL("image/png");
|
|
|
let blob = dataURLtoBlob(imgUrl);
|
|
|
resolve({ blob, search: searchInfo.value! });
|
|
|
});
|
|
|
- }
|
|
|
- } else {
|
|
|
- resolve({ blob: null, search: null });
|
|
|
- }
|
|
|
+ // }
|
|
|
+ // } else {
|
|
|
+ // resolve({ blob: null, search: null });
|
|
|
+ // }
|
|
|
});
|
|
|
},
|
|
|
});
|
|
@@ -278,9 +341,10 @@ defineExpose<QuiskExpose>({
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.search-layout {
|
|
|
- display: inline-block;
|
|
|
+ // display: inline-block;
|
|
|
position: relative;
|
|
|
margin-bottom: 15px;
|
|
|
+ width: 100%;
|
|
|
z-index: 2;
|
|
|
}
|
|
|
|