You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1148 lines
31 KiB
1148 lines
31 KiB
<template>
|
|
<div class="m-map" :class="{ 'z-td': mapType == 'td' }">
|
|
<div id="map"></div>
|
|
<div id="searchMap"></div>
|
|
<div
|
|
class="btn"
|
|
v-if="mapStyleType == 'light'"
|
|
v-show="mapType == 'qq'"
|
|
@click="shiftMapStyle('dark')"
|
|
>
|
|
切换深色模式
|
|
</div>
|
|
<div
|
|
class="btn"
|
|
v-show="mapType == 'qq'"
|
|
v-else
|
|
@click="shiftMapStyle('light')"
|
|
>
|
|
切换浅色模式
|
|
</div>
|
|
|
|
<cpt-popup
|
|
ref="popup"
|
|
@clickListItem="handleClickDotListItem"
|
|
@operate="handleClickDotBtn"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { requestPost } from "@/js/dai/request";
|
|
import cptCard from "@/views/modules/visual/cpts/card";
|
|
import cptTb from "@/views/modules/visual/cpts/tb";
|
|
import nextTick from "dai-js/tools/nextTick";
|
|
import cptPopup from "@/views/modules/visual/command/cpts/popup";
|
|
import { spliceIntoChunks } from "@/utils/index";
|
|
import { mapType, searchNearby } from "@/utils/dai-map";
|
|
import tdtWp from "@/utils/tdt-wp";
|
|
import tdtWpZw from "@/utils/tdt-wp-zw";
|
|
import Map from "ol/Map";
|
|
import View from "ol/View";
|
|
import TileLayer from "ol/layer/Tile";
|
|
import { Fill, Style, Stroke } from "ol/style";
|
|
import WMTS from "ol/source/WMTS.js";
|
|
import WMTSTileGrid from "ol/tilegrid/WMTS.js";
|
|
import { get as getProjection, Projection, addProjection } from "ol/proj.js";
|
|
import proj4 from "proj4";
|
|
import { register as registerProj4 } from "ol/proj/proj4";
|
|
import { getCenter, getWidth } from "ol/extent.js";
|
|
import {
|
|
defaults as defaultInteractions,
|
|
Modify,
|
|
Select,
|
|
DoubleClickZoom,
|
|
} from "ol/interaction.js";
|
|
import VectorLayer from "ol/layer/Vector.js";
|
|
import VectorSource from "ol/source/Vector.js";
|
|
import GeoJSON from "ol/format/GeoJSON.js";
|
|
import { Polygon } from "ol/geom";
|
|
import Feature from "ol/Feature";
|
|
import { click, pointerMove } from "ol/events/condition.js";
|
|
|
|
let myMap;
|
|
let scene;
|
|
let polygonLayer;
|
|
let lineLayer;
|
|
let textLayer;
|
|
let posLayer;
|
|
let circleLayer;
|
|
let dotLayer;
|
|
let dotBgLayer;
|
|
let dotLayer2;
|
|
let countTextLayer;
|
|
let countTextBgLayer;
|
|
let searchMarker;
|
|
let searchBgLayer;
|
|
let tdtSearchMap;
|
|
|
|
export default {
|
|
name: "l7",
|
|
inject: ["refresh"],
|
|
|
|
data() {
|
|
return {
|
|
mapType,
|
|
|
|
mapStyleType: localStorage.getItem("mapStyle") || "dark",
|
|
// srcGridData: {},
|
|
darkStyle: {
|
|
style: "amap://styles/blue",
|
|
polygonColor: [
|
|
"rgba(255, 100, 60, 0.5)",
|
|
"rgba(43, 231, 253, 0.35)",
|
|
"rgba(255, 255, 50, 0.35)",
|
|
],
|
|
lineColor: [
|
|
"rgba(255, 180, 150, 0.9)",
|
|
"rgba(43, 231, 253, 0.7)",
|
|
"rgba(255, 255, 50, 0.7)",
|
|
],
|
|
circleColor: [
|
|
"rgba(255, 180, 150, 0.99)",
|
|
"rgba(43, 231, 253, 0.99)",
|
|
"rgba(255, 255, 50, 0.99)",
|
|
],
|
|
textColor: [
|
|
"rgba(255, 100, 60, 0.99)",
|
|
"rgba(43, 231, 253, 0.99)",
|
|
"rgba(255, 255, 50, 0.99)",
|
|
],
|
|
textStrokeColor: "#fff",
|
|
},
|
|
|
|
lightStyle: {
|
|
style: "amap://styles/whitesmoke",
|
|
polygonColor: [
|
|
"rgba(255, 100, 60, 0.3)",
|
|
"rgba(43, 231, 253, 0.3)",
|
|
"rgba(255, 255, 50, 0.3)",
|
|
],
|
|
lineColor: [
|
|
"rgba(220, 150, 120, 0.9)",
|
|
"rgba(33, 201, 223, 0.8)",
|
|
"rgba(200, 200, 50, 0.9)",
|
|
],
|
|
circleColor: [
|
|
"rgba(255, 180, 150, 0.99)",
|
|
"rgba(13, 181, 203, 0.8)",
|
|
"rgba(255, 255, 50, 0.99)",
|
|
],
|
|
textColor: [
|
|
"rgba(200, 50, 10, 0.99)",
|
|
"rgba(0, 130, 153, 0.99)",
|
|
"rgba(120, 120, 0, 0.99)",
|
|
],
|
|
textStrokeColor: "#666",
|
|
},
|
|
};
|
|
},
|
|
|
|
props: {
|
|
pitch: {
|
|
type: Number,
|
|
default: 60,
|
|
},
|
|
|
|
srcGridData: {
|
|
type: Object,
|
|
default: null,
|
|
},
|
|
|
|
gridCountData: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
|
|
dotList: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
|
|
dotIcoList: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
|
|
dotList2: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
|
|
dotIcoList2: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
},
|
|
|
|
components: {
|
|
cptCard,
|
|
cptTb,
|
|
cptPopup,
|
|
},
|
|
|
|
computed: {
|
|
polygonData() {
|
|
const { srcGridData } = this;
|
|
if (
|
|
!srcGridData ||
|
|
!srcGridData.children ||
|
|
!Array.isArray(srcGridData.children)
|
|
) {
|
|
return [];
|
|
}
|
|
|
|
const polygons = [
|
|
...srcGridData.children
|
|
.filter((item) => item.coordinates.length > 0)
|
|
.map((item, index) => {
|
|
const f = new Feature({
|
|
type: "Polygon",
|
|
properties: {
|
|
// id: item.id,
|
|
// name: item.name,
|
|
// level: item.level,
|
|
center: [item.longitude, item.latitude],
|
|
...item,
|
|
},
|
|
geometry: new Polygon([
|
|
spliceIntoChunks(
|
|
item.coordinates.split(",").map((item) => parseFloat(item)),
|
|
2
|
|
).filter((item) => item.length == 2),
|
|
]),
|
|
});
|
|
return f;
|
|
}),
|
|
];
|
|
return polygons;
|
|
},
|
|
|
|
polygonDotData() {
|
|
const { srcGridData, gridCountData } = this;
|
|
if (
|
|
!srcGridData ||
|
|
!srcGridData.children ||
|
|
!Array.isArray(srcGridData.children)
|
|
) {
|
|
return { type: "FeatureCollection", features: [] };
|
|
}
|
|
const polygon = [
|
|
...srcGridData.children
|
|
.filter((item) => item.coordinates.length > 0)
|
|
.map((item) => {
|
|
let countItem = gridCountData.find(
|
|
(item2) => item2.orgId == item.id
|
|
);
|
|
console.log("countItem", countItem);
|
|
return {
|
|
type: "Feature",
|
|
properties: {
|
|
...item,
|
|
center: [item.longitude, item.latitude],
|
|
dotCount: countItem
|
|
? countItem.categoryName + "：" + countItem.total
|
|
: "",
|
|
},
|
|
geometry: {
|
|
type: "Polygon",
|
|
coordinates: [
|
|
item.latitude
|
|
? [[item.longitude, item.latitude]]
|
|
: spliceIntoChunks(
|
|
item.coordinates
|
|
.split(",")
|
|
.map((item) => parseFloat(item)),
|
|
2
|
|
).filter((item) => item.length == 2),
|
|
],
|
|
},
|
|
};
|
|
}),
|
|
];
|
|
return { type: "FeatureCollection", features: polygon };
|
|
},
|
|
|
|
dotData() {
|
|
const { dotList } = this;
|
|
return {
|
|
type: "FeatureCollection",
|
|
features: [
|
|
...dotList
|
|
.filter((item) => item.latitude)
|
|
.map((item) => ({
|
|
type: "Feature",
|
|
properties: {
|
|
...item,
|
|
},
|
|
geometry: {
|
|
type: "Point",
|
|
coordinates: [
|
|
parseFloat(item.longitude),
|
|
parseFloat(item.latitude),
|
|
],
|
|
},
|
|
})),
|
|
],
|
|
};
|
|
},
|
|
|
|
dotData2() {
|
|
const { dotList2 } = this;
|
|
return {
|
|
type: "FeatureCollection",
|
|
features: [
|
|
...dotList2
|
|
.filter((item) => item.latitude)
|
|
.map((item) => ({
|
|
type: "Feature",
|
|
properties: {
|
|
...item,
|
|
},
|
|
geometry: {
|
|
type: "Point",
|
|
coordinates: [
|
|
parseFloat(item.longitude),
|
|
parseFloat(item.latitude),
|
|
],
|
|
},
|
|
})),
|
|
],
|
|
};
|
|
},
|
|
},
|
|
|
|
watch: {
|
|
srcGridData(val, oldValue) {
|
|
if (oldValue == null) {
|
|
this.iniMap();
|
|
} else {
|
|
this.updateGrid();
|
|
}
|
|
this.zoomInABit();
|
|
},
|
|
gridCountData() {
|
|
this.updateGridCount();
|
|
},
|
|
dotData(val, oldValue) {
|
|
this.updateDot();
|
|
},
|
|
dotData2(val, oldValue) {
|
|
this.updateDot2();
|
|
},
|
|
},
|
|
|
|
async mounted() {
|
|
console.log("指挥调度map初始化啦");
|
|
// 临时这么用吧
|
|
window._AMapSecurityConfig = {
|
|
securityJsCode: "92ea2c965c6cf1ba7ee3a8fe01449ef2",
|
|
};
|
|
|
|
this.iniMap();
|
|
|
|
// 为了避免刷新残留
|
|
searchMarker = null;
|
|
searchBgLayer = null;
|
|
},
|
|
|
|
methods: {
|
|
async iniMap() {
|
|
const { darkStyle, lightStyle, srcGridData } = this;
|
|
if (!srcGridData) return false;
|
|
|
|
let styleConfig = darkStyle;
|
|
if (this.mapStyleType == "light") {
|
|
styleConfig = lightStyle;
|
|
}
|
|
|
|
const iniCenter = [
|
|
srcGridData.longitude ||
|
|
this.$store.state.user.longitude ||
|
|
116.39743841556731,
|
|
srcGridData.latitude ||
|
|
this.$store.state.user.latitude ||
|
|
39.9088810666821,
|
|
];
|
|
|
|
proj4.defs(
|
|
"EPSG:4490",
|
|
'GEOGCS["China Geodetic Coordinate System 2000",DATUM["China_2000",SPHEROID["CGCS2000",6378137,298.257222101,AUTHORITY["EPSG","1024"]],AUTHORITY["EPSG","1043"]],PRIMEM["Greenwich",0,AUTHORITY["EPSG","8901"]],UNIT["degree",0.0174532925199433,AUTHORITY["EPSG","9122"]],AUTHORITY["EPSG","4490"]]'
|
|
);
|
|
registerProj4(proj4);
|
|
//重写projection4490，
|
|
var projection = new Projection({
|
|
code: "EPSG:4490",
|
|
units: "degrees",
|
|
axisOrientation: "neu",
|
|
});
|
|
projection.setExtent([-180, -90, 180, 90]);
|
|
projection.setWorldExtent([-180, -90, 180, 90]);
|
|
addProjection(projection);
|
|
|
|
let projectionExtent = projection.getExtent();
|
|
let size = getWidth(projectionExtent) / 256; //size就是一个像素代表的经纬度
|
|
let matrixIds = [];
|
|
|
|
function getResolutions() {
|
|
let resolutions = [];
|
|
for (let z = 7; z < 19; ++z) {
|
|
resolutions[z] = size / Math.pow(2, z);
|
|
matrixIds[z] = z;
|
|
}
|
|
return resolutions;
|
|
}
|
|
|
|
const resolutions = getResolutions();
|
|
|
|
console.log("========= getProjection", getProjection("EPSG:4490"));
|
|
|
|
let url = "http://59.206.203.34/tileservice/SDPubMap";
|
|
if (window.SITE_CONFIG["nodeEnv"] == "dev_sdtdt") {
|
|
url =
|
|
"http://service.sdmap.gov.cn/tileservice/sdpubmap?tk=e758167d5b90c351b70a979c0820840c";
|
|
}
|
|
|
|
const baseMapLayer = new TileLayer({
|
|
title: "地图",
|
|
source: new WMTS({
|
|
url,
|
|
layer: "sdvec",
|
|
matrixSet: "c",
|
|
format: "image/png",
|
|
projection: getProjection("EPSG:4490"),
|
|
tileGrid: new WMTSTileGrid({
|
|
origin: [-180, 90],
|
|
resolutions,
|
|
matrixIds,
|
|
}),
|
|
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;
|
|
},
|
|
}),
|
|
});
|
|
|
|
//创建地图容器
|
|
myMap = new Map({
|
|
//加载瓦片图层数据
|
|
layers: [baseMapLayer],
|
|
//初始化map和地图底图
|
|
view: new View({
|
|
center: iniCenter,
|
|
projection: getProjection("EPSG:4490"),
|
|
zoom: 15,
|
|
}),
|
|
//目标加载到map中
|
|
target: "map",
|
|
});
|
|
|
|
myMap.on("singleclick", (event) => {
|
|
myMap.forEachFeatureAtPixel(event.pixel, function (feature) {
|
|
// 为移动到的 feature 发送自定义的 mousemove 消息
|
|
feature.dispatchEvent({ type: "click", event });
|
|
});
|
|
});
|
|
|
|
await nextTick();
|
|
this.iniGridArea(myMap);
|
|
|
|
myMap.on("loadend", async () => {
|
|
console.log("--------地图加载新东西完毕");
|
|
// if (mapType == "td") {
|
|
// this.iniMapBase(scene);
|
|
// } else if (mapType == "tdzw") {
|
|
// this.iniMapBase2(scene);
|
|
// }
|
|
|
|
// this.iniMapDot(scene);
|
|
// this.iniMapDot2(scene);
|
|
// await nextTick(0);
|
|
// this.zoomInABit();
|
|
});
|
|
},
|
|
|
|
iniGridArea(map) {
|
|
const { darkStyle, lightStyle, polygonData, polygonDotData } = this;
|
|
|
|
console.log("--------------初始化网格");
|
|
|
|
const polygonSource = new VectorSource({
|
|
features: polygonData,
|
|
});
|
|
|
|
polygonLayer = new VectorLayer({
|
|
title: "gridArea",
|
|
source: polygonSource,
|
|
opacity: 1,
|
|
className: "",
|
|
zIndex: 10,
|
|
background: "",
|
|
});
|
|
|
|
polygonLayer.getSource().on("featuresloadstart", async (evt) => {
|
|
console.log("===============featuresloadstart", evt);
|
|
|
|
await nextTick();
|
|
polygonLayer
|
|
.getSource()
|
|
.getFeatures()
|
|
.forEach((item, index) => {
|
|
const baseStyles = [
|
|
new Style({
|
|
fill: new Fill({
|
|
color: "rgba(255, 100, 60, 0.5)",
|
|
}),
|
|
stroke: new Stroke({
|
|
color: "rgba(220, 150, 120, 0.9)",
|
|
width: 2,
|
|
}),
|
|
}),
|
|
new Style({
|
|
fill: new Fill({
|
|
color: "rgba(43, 231, 253, 0.3)",
|
|
}),
|
|
stroke: new Stroke({
|
|
color: "rgba(33, 201, 223, 0.8)",
|
|
width: 2,
|
|
}),
|
|
}),
|
|
new Style({
|
|
fill: new Fill({
|
|
color: "rgba(255, 255, 50, 0.3)",
|
|
}),
|
|
stroke: new Stroke({
|
|
color: "rgba(200, 200, 50, 0.9)",
|
|
width: 2,
|
|
}),
|
|
}),
|
|
];
|
|
|
|
item.on("click", function (event) {
|
|
console.log("我被点击拉", item, event);
|
|
// 修改feature的样式为半径100像素的园，用蓝色填充
|
|
this.setStyle(
|
|
new ol.style.Style({
|
|
image: new ol.style.Circle({
|
|
radius: 100,
|
|
fill: new ol.style.Fill({
|
|
color: "blue",
|
|
}),
|
|
}),
|
|
})
|
|
);
|
|
});
|
|
|
|
setInterval(() => {
|
|
let currStyle = item.getStyle();
|
|
if (!Array.isArray(currStyle)) {
|
|
item.setStyle([
|
|
baseStyles[index % baseStyles.length],
|
|
new Style({
|
|
stroke: new Stroke({
|
|
color: [0, 0, 0, 0.5],
|
|
width: 2,
|
|
lineDash: [6, 12],
|
|
lineDashOffset: 0,
|
|
}),
|
|
}),
|
|
]);
|
|
} else {
|
|
let currStroke = currStyle[1].getStroke();
|
|
let lineDashOffset = currStroke.getLineDashOffset();
|
|
currStroke.setLineDashOffset(
|
|
lineDashOffset == 16 ? 0 : lineDashOffset + 2
|
|
);
|
|
item.setStyle(currStyle);
|
|
}
|
|
}, 100);
|
|
});
|
|
});
|
|
|
|
let clickSelect = new Select({
|
|
condition: click,
|
|
layers: [polygonLayer],
|
|
});
|
|
clickSelect.on("select", (e) => {
|
|
let fet = e.selected[0];
|
|
console.log("点击我了", fet.getProperties());
|
|
// let props = fet.getProperties().properties;
|
|
// this.$emit("clickAgency", props);
|
|
// if (props.level == "grid") {
|
|
// this.handleClickDot({ ...props, placeType: "grid" }, props.center);
|
|
// }
|
|
});
|
|
|
|
map.addLayer(polygonLayer);
|
|
map.addInteraction(clickSelect);
|
|
},
|
|
updateGridArea() {},
|
|
|
|
iniMapGrid(scene) {
|
|
const { darkStyle, lightStyle, polygonData, polygonDotData } = this;
|
|
|
|
let styleConfig = darkStyle;
|
|
if (this.mapStyleType == "light") {
|
|
styleConfig = lightStyle;
|
|
}
|
|
|
|
console.log("地图初始化数据", polygonData);
|
|
console.log("地图初始化数据2222", polygonDotData);
|
|
|
|
polygonLayer = new PolygonLayer({
|
|
autoFit: true,
|
|
})
|
|
// .size(0)
|
|
.source(polygonData)
|
|
.color("name", styleConfig.polygonColor)
|
|
// .shape("extrude")
|
|
.shape("fill")
|
|
.style({
|
|
opacityLinear: {
|
|
enable: true, // true - false
|
|
dir: "out", // in - out
|
|
},
|
|
opacity: 1,
|
|
// heightfixed: true,
|
|
// pickLight: true,
|
|
raisingHeight: 0,
|
|
// sourceColor: "#333",
|
|
// targetColor: "rgba(255,255,255, 0.5)",
|
|
});
|
|
|
|
scene.addLayer(polygonLayer);
|
|
|
|
lineLayer = new LineLayer({
|
|
zIndex: 2,
|
|
name: "line2",
|
|
})
|
|
.source(polygonData)
|
|
.shape("line")
|
|
.size(1)
|
|
.color("name", styleConfig.lineColor)
|
|
.style({
|
|
opacity: 1,
|
|
})
|
|
.animate({
|
|
interval: 1, // 间隔
|
|
duration: 2, // 持续时间，延时
|
|
trailLength: 2, // 流线长度
|
|
});
|
|
scene.addLayer(lineLayer);
|
|
|
|
circleLayer = new PolygonLayer({
|
|
zIndex: 3,
|
|
})
|
|
.source(polygonDotData)
|
|
.color("name", styleConfig.circleColor)
|
|
.shape("circle")
|
|
.active(true)
|
|
.animate(true)
|
|
.size(50)
|
|
.style({
|
|
offsets: [0, -10], // 文本相对锚点的偏移量 [水平, 垂直]
|
|
opacity: 1,
|
|
});
|
|
scene.addLayer(circleLayer);
|
|
|
|
scene.addImage("pos-red", require("@/assets/img/shuju/grid/pos-red.png"));
|
|
scene.addImage(
|
|
"pos-green",
|
|
require("@/assets/img/shuju/grid/pos-green.png")
|
|
);
|
|
scene.addImage(
|
|
"pos-yellow",
|
|
require("@/assets/img/shuju/grid/pos-yellow.png")
|
|
);
|
|
posLayer = new PolygonLayer({
|
|
zIndex: 4,
|
|
})
|
|
.source(polygonDotData)
|
|
.shape("name", ["pos-red", "pos-green", "pos-yellow"])
|
|
.size(12)
|
|
.style({
|
|
offsets: [0, 8], // 文本相对锚点的偏移量 [水平, 垂直]
|
|
rotation: 0,
|
|
// layerType: "fillImage",
|
|
});
|
|
scene.addLayer(posLayer);
|
|
|
|
textLayer = new PolygonLayer({
|
|
zIndex: 20,
|
|
})
|
|
.source(polygonDotData)
|
|
.color("name", styleConfig.textColor)
|
|
.shape("name", "text")
|
|
.size(16)
|
|
.style({
|
|
textAnchor: "center", // 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
|
textOffset: [0, 40], // 文本相对锚点的偏移量 [水平, 垂直]
|
|
spacing: 2, // 字符间距
|
|
padding: [2, 2], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
|
|
stroke: styleConfig.textStrokeColor, // 描边颜色
|
|
strokeWidth: 0.1, // 描边宽度
|
|
strokeOpacity: 0.8,
|
|
textAllowOverlap: true,
|
|
})
|
|
.active(true);
|
|
scene.addLayer(textLayer);
|
|
|
|
polygonLayer.on("mousemove", (e) => {
|
|
polygonLayer.style({
|
|
raisingHeight: 0,
|
|
});
|
|
});
|
|
|
|
polygonLayer.on("click", (e) => {
|
|
console.log(e.feature.properties);
|
|
this.$emit("clickAgency", e.feature.properties);
|
|
|
|
if (e.feature.properties.level == "grid") {
|
|
this.handleClickDot(
|
|
{ ...e.feature.properties, placeType: "grid" },
|
|
e.feature.properties.center
|
|
);
|
|
}
|
|
});
|
|
|
|
polygonLayer.on("unmousemove", (e) => {
|
|
polygonLayer.style({
|
|
raisingHeight: 0,
|
|
});
|
|
});
|
|
|
|
countTextLayer = new PolygonLayer({
|
|
zIndex: 20,
|
|
})
|
|
.source(polygonDotData)
|
|
.color("name", styleConfig.textColor)
|
|
.shape("dotCount", "text")
|
|
.size(14)
|
|
.style({
|
|
textAnchor: "center", // 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
|
textOffset: [0, -80], // 文本相对锚点的偏移量 [水平, 垂直]
|
|
spacing: 2, // 字符间距
|
|
padding: [2, 2], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
|
|
stroke: styleConfig.textStrokeColor, // 描边颜色
|
|
strokeWidth: 0.1, // 描边宽度
|
|
strokeOpacity: 0.8,
|
|
textAllowOverlap: true,
|
|
})
|
|
.active(true);
|
|
scene.addLayer(countTextLayer);
|
|
},
|
|
|
|
iniMapDot(scene) {
|
|
const { darkStyle, lightStyle, dotIcoList, dotData } = this;
|
|
console.log("--------------------------图标", dotIcoList);
|
|
Object.keys(dotIcoList).forEach((k) => {
|
|
scene.addImage(k, dotIcoList[k]);
|
|
});
|
|
dotBgLayer = new PointLayer({
|
|
zIndex: 20,
|
|
})
|
|
.source(dotData)
|
|
.shape("circle")
|
|
.color("rgba(255,255,255,0.8)")
|
|
.size(20)
|
|
.style({
|
|
strokeWidth: 3,
|
|
strokeOpacity: 0.1,
|
|
stroke: "#000",
|
|
});
|
|
|
|
dotLayer = new PointLayer({
|
|
zIndex: 20,
|
|
})
|
|
.source(dotData)
|
|
.shape("categoryKey", (k) => k)
|
|
.style({
|
|
offsets: [0, 0],
|
|
rotation: 0,
|
|
layerType: "fillImage",
|
|
})
|
|
.size(10);
|
|
|
|
scene.addLayer(dotBgLayer);
|
|
scene.addLayer(dotLayer);
|
|
|
|
dotBgLayer.on("click", (e) => {
|
|
console.log("--------clickDot", e);
|
|
this.handleClickDot(
|
|
e.feature.properties,
|
|
e.feature.geometry.coordinates
|
|
);
|
|
});
|
|
|
|
dotBgLayer.on("mousemove", (e) => {
|
|
// console.log(e);
|
|
});
|
|
|
|
dotBgLayer.on("unmousemove", (e) => {});
|
|
},
|
|
|
|
iniMapDot2(scene) {
|
|
const { dotIcoList2: dotIcoList, dotData2: dotData } = this;
|
|
Object.keys(dotIcoList).forEach((k) => {
|
|
scene.addImage(k + "2", dotIcoList[k]);
|
|
});
|
|
|
|
dotLayer2 = new PointLayer({
|
|
zIndex: 30,
|
|
})
|
|
.source(dotData)
|
|
.shape("categoryKey", (k) => k + "2")
|
|
.style({
|
|
offsets: [0, 0],
|
|
rotation: 0,
|
|
layerType: "fillImage",
|
|
})
|
|
.size(30);
|
|
scene.addLayer(dotLayer2);
|
|
|
|
dotLayer2.on("click", (e) => {
|
|
console.log("--------clickDot2", e);
|
|
if (
|
|
e.feature.properties.dataList &&
|
|
e.feature.properties.dataList.length == 1
|
|
) {
|
|
this.handleClickDot(
|
|
{ ...e.feature.properties, ...e.feature.properties.dataList[0] },
|
|
e.feature.geometry.coordinates
|
|
);
|
|
} else {
|
|
this.handleClickDot(
|
|
{ ...e.feature.properties, placeType: "list" },
|
|
e.feature.geometry.coordinates
|
|
);
|
|
}
|
|
});
|
|
|
|
dotLayer2.on("mousemove", (e) => {
|
|
// console.log(e);
|
|
});
|
|
|
|
dotLayer2.on("unmousemove", (e) => {});
|
|
},
|
|
|
|
handleClickDotBtn(type, info) {
|
|
console.log(type, info);
|
|
this.$emit("clickDotBtn", type, info);
|
|
},
|
|
|
|
handleClickDotListItem(item) {
|
|
console.log("handleClickDotListItem", item);
|
|
this.handleClickDot(item, [
|
|
parseFloat(item.longitude),
|
|
parseFloat(item.latitude),
|
|
]);
|
|
},
|
|
|
|
async handleClickDot(item, posArr) {
|
|
console.log("handleClickDot", item, posArr);
|
|
const res = await this.$refs.popup.show(item);
|
|
if (res) {
|
|
const popup = new Popup({
|
|
closeButton: true,
|
|
closeOnClick: true,
|
|
maxWidth: 400,
|
|
})
|
|
.setLnglat(posArr)
|
|
.setDOMContent(this.$refs.popup.$el);
|
|
scene.addPopup(popup);
|
|
}
|
|
},
|
|
|
|
drawSearchBg(lng, lat) {
|
|
function getPoints(lng, lat) {
|
|
// lng 经度；lat 纬度；dis 距离（千米）
|
|
let r = 6371; //地球半径千米
|
|
let dis = 1.5; //3千米距离
|
|
let dlng =
|
|
2 *
|
|
Math.asin(Math.sin(dis / (2 * r)) / Math.cos((lat * Math.PI) / 180));
|
|
dlng = (dlng * 180) / Math.PI; // 经度半径
|
|
let dlat = dis / r;
|
|
dlat = (dlat * 180) / Math.PI; // 纬度半径
|
|
// 圆形每一度 都算出一个经纬度
|
|
for (let sides = 1; sides <= 360; sides++) {
|
|
var angle = Math.PI * (1 / sides - 1 / 2);
|
|
var rotatedAngle, x, y;
|
|
var points = [];
|
|
for (var i = 0; i < sides; ++i) {
|
|
rotatedAngle = angle + (i * 2 * Math.PI) / sides;
|
|
x = lng + dlng * Math.cos(rotatedAngle);
|
|
y = lat + dlat * Math.sin(rotatedAngle);
|
|
points.push([x, y]);
|
|
}
|
|
}
|
|
console.log("points=======", points);
|
|
return points;
|
|
}
|
|
|
|
let sourceData;
|
|
if (lng) {
|
|
sourceData = {
|
|
type: "FeatureCollection",
|
|
features: [
|
|
{
|
|
type: "Feature",
|
|
properties: {
|
|
center: [lng, lat],
|
|
},
|
|
geometry: {
|
|
type: "Polygon",
|
|
coordinates: [getPoints(lng, lat)],
|
|
},
|
|
},
|
|
],
|
|
};
|
|
} else {
|
|
sourceData = {
|
|
type: "FeatureCollection",
|
|
features: [],
|
|
};
|
|
}
|
|
|
|
if (searchBgLayer) {
|
|
console.log("searchBgLayer已经存在了", searchBgLayer);
|
|
searchBgLayer.setData(sourceData);
|
|
} else {
|
|
searchBgLayer = new PolygonLayer({
|
|
// autoFit: true,
|
|
})
|
|
.source(sourceData)
|
|
.color("#f0f")
|
|
.shape("fill")
|
|
.style({
|
|
opacityLinear: {
|
|
enable: true, // true - false
|
|
dir: "out", // in - out
|
|
},
|
|
opacity: 0.3,
|
|
raisingHeight: 0,
|
|
});
|
|
|
|
scene.addLayer(searchBgLayer);
|
|
}
|
|
},
|
|
|
|
async setDotMarker(item, posArr) {
|
|
this.removeDotMarker();
|
|
this.drawSearchBg(...posArr);
|
|
const marker = new Marker({
|
|
offsets: [0, -20],
|
|
}).setLnglat(posArr);
|
|
|
|
const res = await this.$refs.popup.show(item);
|
|
if (res) {
|
|
const popup = new Popup({
|
|
closeButton: true,
|
|
closeOnClick: true,
|
|
maxWidth: 400,
|
|
})
|
|
.setLnglat(posArr)
|
|
.setDOMContent(this.$refs.popup.$el);
|
|
marker.setPopup(popup);
|
|
}
|
|
|
|
marker.on("click", (e) => {
|
|
console.log("click", e);
|
|
// this.handleClickDot(item, posArr);
|
|
marker.openPopup();
|
|
});
|
|
|
|
scene.addMarker(marker);
|
|
scene.setZoomAndCenter(14, posArr);
|
|
marker.openPopup();
|
|
searchMarker = marker;
|
|
},
|
|
|
|
removeDotMarker() {
|
|
console.log("removeDotMarker");
|
|
if (searchMarker) {
|
|
searchMarker.remove();
|
|
}
|
|
if (searchBgLayer) {
|
|
console.log("removeDotMarker-----searchBgLayer");
|
|
this.drawSearchBg();
|
|
}
|
|
},
|
|
|
|
// 把地图缩放等级在原来基础上大一点
|
|
zoomInABit() {
|
|
// let current = scene.getZoom();
|
|
// scene.setZoomAndCenter(current + 0.5);
|
|
},
|
|
|
|
shiftMapStyle(type) {
|
|
this.mapStyleType = type;
|
|
localStorage.setItem("mapStyle", type);
|
|
this.refresh();
|
|
},
|
|
|
|
updateMap() {
|
|
this.updateGrid();
|
|
this.updateGridCount();
|
|
this.updateDot();
|
|
this.updateDot2();
|
|
},
|
|
|
|
updateGrid() {
|
|
const { polygonData, polygonDotData } = this;
|
|
if (polygonLayer) {
|
|
polygonLayer.setData(polygonData);
|
|
lineLayer.setData(polygonData);
|
|
textLayer.setData(polygonDotData);
|
|
posLayer.setData(polygonDotData);
|
|
circleLayer.setData(polygonDotData);
|
|
}
|
|
},
|
|
|
|
updateGridCount() {
|
|
const { polygonDotData } = this;
|
|
if (countTextLayer) {
|
|
countTextLayer.setData(polygonDotData);
|
|
}
|
|
},
|
|
|
|
updateDot() {
|
|
const { dotData } = this;
|
|
if (dotLayer) {
|
|
console.log(dotData);
|
|
dotLayer.setData(dotData);
|
|
dotBgLayer.setData(dotData);
|
|
}
|
|
},
|
|
|
|
updateDot2() {
|
|
const { dotData2: dotData } = this;
|
|
if (dotLayer2) {
|
|
console.log(dotData);
|
|
dotLayer2.setData(dotData);
|
|
}
|
|
},
|
|
|
|
searchPos(name) {
|
|
return new Promise(async (reslove) => {
|
|
if (mapType == "td") {
|
|
let center = scene.getCenter();
|
|
console.log("=----------------------=searchPos", name);
|
|
if (!tdtSearchMap) {
|
|
tdtSearchMap = new T.Map(document.getElementById("searchMap"), {
|
|
center,
|
|
});
|
|
await nextTick(1000);
|
|
console.log("=----------------------=searchPos2", center);
|
|
}
|
|
tdtSearchMap.panTo(center);
|
|
await nextTick(100);
|
|
const { msg, data } = await searchNearby(tdtSearchMap, name);
|
|
console.log("=----------------------=searchPos3", data);
|
|
if (msg == "success") {
|
|
reslove(data.resultList);
|
|
}
|
|
reslove([]);
|
|
} else {
|
|
window.AMap.plugin("AMap.PlaceSearch", () => {
|
|
const city = this.$store.state.user.areaCodePath[1] || "全国";
|
|
console.log("搜索区域", city);
|
|
// 实例化Autocomplete
|
|
let autoOptions = {
|
|
//city 限定城市，默认全国
|
|
city,
|
|
};
|
|
let autoComplete = new window.AMap.PlaceSearch(autoOptions);
|
|
autoComplete.search(name, function (status, result) {
|
|
reslove(result);
|
|
});
|
|
});
|
|
}
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.m-map {
|
|
position: relative;
|
|
height: 100%;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
|
|
&.z-td {
|
|
#app {
|
|
/deep/ .l7-scene {
|
|
canvas {
|
|
background-color: rgba(43, 51, 73, 0.82);
|
|
background-image: radial-gradient(
|
|
rgba(0, 0, 0, 0),
|
|
rgba(0, 0, 0, 0.3),
|
|
#000
|
|
);
|
|
}
|
|
.gray {
|
|
-webkit-filter: grayscale(100%);
|
|
filter: grayscale(100%);
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/deep/ .l7-popup-content {
|
|
background: rgba(#020340, 0.58);
|
|
box-shadow: 0 0 20px 3px inset rgba(#22f, 0.1);
|
|
}
|
|
/deep/ .l7-popup-close-button {
|
|
padding: 4px;
|
|
font-size: 36px;
|
|
color: rgba(#fff, 0.8);
|
|
}
|
|
|
|
#map {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
#searchMap {
|
|
position: absolute;
|
|
width: 200px;
|
|
height: 200px;
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
}
|
|
.btn {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100px;
|
|
line-height: 36px;
|
|
height: 36px;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
font-size: 14px;
|
|
background-color: rgba(#000, 0.2);
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
</style>
|
|
|