|
|
@@ -109,6 +109,7 @@
|
|
|
<!-- bottomBox end -->
|
|
|
</section>
|
|
|
</template>
|
|
|
+
|
|
|
<script>
|
|
|
import statisTop from "./components/statisTop";
|
|
|
import statisBottom from "./components/statisBottom";
|
|
|
@@ -124,6 +125,7 @@ mapData;
|
|
|
|
|
|
// 地图
|
|
|
import AMap from "AMap";
|
|
|
+
|
|
|
// import AMapUI from "AMapUI";
|
|
|
|
|
|
import api from "@/api/home/home.js";
|
|
|
@@ -183,6 +185,9 @@ export default {
|
|
|
["#7dc", "#F33"],
|
|
|
],
|
|
|
colorIndList: [-1, 7, 21, 26, 31, 37, 46, 52, 57, 66, 68, 71, 74, 100],
|
|
|
+
|
|
|
+ district: null,
|
|
|
+ polygons: [],
|
|
|
};
|
|
|
},
|
|
|
watch: {
|
|
|
@@ -207,6 +212,8 @@ export default {
|
|
|
this.htAnalogData_api();
|
|
|
// this.eptrendIco_api();
|
|
|
this.eptrendIcoMonth_api();
|
|
|
+
|
|
|
+
|
|
|
},
|
|
|
methods: {
|
|
|
// searchSite(){
|
|
|
@@ -282,7 +289,6 @@ export default {
|
|
|
this.initMap();
|
|
|
});
|
|
|
},
|
|
|
-
|
|
|
//地图撒点
|
|
|
|
|
|
// 日月年用电量
|
|
|
@@ -313,6 +319,7 @@ export default {
|
|
|
Overview() {
|
|
|
// this.$router.push({ path: "/Overview" }); //, query: { title: title }
|
|
|
},
|
|
|
+
|
|
|
async initMap() {
|
|
|
this.map = await new AMap.Map("mapF", {
|
|
|
mapStyle: "amap://styles/blue", //设置地图的显示样式
|
|
|
@@ -321,7 +328,6 @@ export default {
|
|
|
zooms: [3, 16],
|
|
|
// features: [] //清空背景道路等
|
|
|
});
|
|
|
- // this.initMapUi();
|
|
|
|
|
|
var con = `<div class="siteModelBox" >
|
|
|
<h2>
|
|
|
@@ -368,6 +374,8 @@ export default {
|
|
|
});
|
|
|
|
|
|
this.addMarker(dataList, "water");
|
|
|
+
|
|
|
+ // this.drawBounds();
|
|
|
},
|
|
|
|
|
|
addMarker(lnglats) {
|
|
|
@@ -430,32 +438,32 @@ export default {
|
|
|
this.map.add(new AMap.OverlayGroup(markers));
|
|
|
this.map.setFitView(); // 根据所有点自适应
|
|
|
|
|
|
- this.mapPolList = mapData.map((val, ind) => {
|
|
|
- // console.log(val)
|
|
|
- let color =
|
|
|
- this.colorList[
|
|
|
- this.colorIndList.findIndex(
|
|
|
- (value, index) =>
|
|
|
- value <= ind && ind < this.colorIndList[index + 1]
|
|
|
- )
|
|
|
- ];
|
|
|
- return [
|
|
|
- new AMap.Polygon({
|
|
|
- map: this.map,
|
|
|
- fillOpacity: 0.5,
|
|
|
- path: val[3],
|
|
|
- fillColor: color[0],
|
|
|
- strokeColor: color[1],
|
|
|
- }),
|
|
|
- new AMap.Polygon({
|
|
|
- map: this.map,
|
|
|
- fillOpacity: 0.5,
|
|
|
- path: val[3],
|
|
|
- fillColor: color[1],
|
|
|
- strokeColor: color[0],
|
|
|
- }),
|
|
|
- ];
|
|
|
- });
|
|
|
+ // this.mapPolList = mapData.map((val, ind) => {
|
|
|
+ // // console.log(val)
|
|
|
+ // let color =
|
|
|
+ // this.colorList[
|
|
|
+ // this.colorIndList.findIndex(
|
|
|
+ // (value, index) =>
|
|
|
+ // value <= ind && ind < this.colorIndList[index + 1]
|
|
|
+ // )
|
|
|
+ // ];
|
|
|
+ // return [
|
|
|
+ // new AMap.Polygon({
|
|
|
+ // map: this.map,
|
|
|
+ // fillOpacity: 0.5,
|
|
|
+ // path: val[3],
|
|
|
+ // fillColor: color[0],
|
|
|
+ // strokeColor: color[1],
|
|
|
+ // }),
|
|
|
+ // new AMap.Polygon({
|
|
|
+ // map: this.map,
|
|
|
+ // fillOpacity: 0.5,
|
|
|
+ // path: val[3],
|
|
|
+ // fillColor: color[1],
|
|
|
+ // strokeColor: color[0],
|
|
|
+ // }),
|
|
|
+ // ];
|
|
|
+ // });
|
|
|
this.map.on("mousemove", (e) => {
|
|
|
var point = [e.lnglat.getLng(), e.lnglat.getLat()];
|
|
|
var pointList = mapData.map((val) => {
|
|
|
@@ -472,7 +480,6 @@ export default {
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
-
|
|
|
// 添加标点
|
|
|
addMarkerInfo(position, content, value = "") {
|
|
|
value;
|
|
|
@@ -488,57 +495,54 @@ export default {
|
|
|
infoWindow.open(this.map, position);
|
|
|
},
|
|
|
|
|
|
- poiPickerReady(poiPicker) {
|
|
|
- // console.log(poiPicker);
|
|
|
- var marker = new AMap.Marker();
|
|
|
-
|
|
|
- var infoWindow = new AMap.InfoWindow({
|
|
|
- offset: new AMap.Pixel(0, -20),
|
|
|
- });
|
|
|
-
|
|
|
- //选取了某个POI
|
|
|
- poiPicker.on("poiPicked", (poiResult) => {
|
|
|
- var source = poiResult.source,
|
|
|
- poi = poiResult.item,
|
|
|
- info = {
|
|
|
- source: source,
|
|
|
- id: poi.id,
|
|
|
- name: poi.name,
|
|
|
- location: poi.location.toString(),
|
|
|
- address: poi.address,
|
|
|
- };
|
|
|
-
|
|
|
- marker.setMap(this.map);
|
|
|
- infoWindow.setMap(this.map);
|
|
|
-
|
|
|
- marker.setPosition(poi.location);
|
|
|
- infoWindow.setPosition(poi.location);
|
|
|
-
|
|
|
- infoWindow.setContent(
|
|
|
- "POI信息: <pre>" + JSON.stringify(info, null, 2) + "</pre>"
|
|
|
- );
|
|
|
- // infoWindow.open(this.map, marker.getPosition());
|
|
|
-
|
|
|
- this.map.setCenter(marker.getPosition());
|
|
|
- });
|
|
|
+ // 嘉定区边界高亮 start
|
|
|
+ drawBounds() {
|
|
|
+ //加载行政区划插件
|
|
|
+ if (!this.district) {
|
|
|
+ //实例化DistrictSearch
|
|
|
+ var that=this
|
|
|
+ AMap.plugin("AMap.DistrictSearch", function () {
|
|
|
+ that.district = new AMap.DistrictSearch({
|
|
|
+ subdistrict: 0, //获取边界不需要返回下级行政区
|
|
|
+ extensions: "all", //返回行政区边界坐标组等具体信息
|
|
|
+ level: "district", //查询行政级别为 市
|
|
|
+ });
|
|
|
|
|
|
- poiPicker.onCityReady(() => {
|
|
|
- // poiPicker.suggest("美食");
|
|
|
- });
|
|
|
+ //行政区查询
|
|
|
+ that.district.search("嘉定区", function (status, result) {
|
|
|
+ that.map.remove(that.polygons); //清除上次结果
|
|
|
+ that.polygons = [];
|
|
|
+ var bounds = result.districtList[0].boundaries;
|
|
|
+ if (bounds) {
|
|
|
+ for (var i = 0, l = bounds.length; i < l; i++) {
|
|
|
+ //生成行政区划polygon
|
|
|
+ var polygon = new AMap.Polygon({
|
|
|
+ strokeWeight: 1,
|
|
|
+ path: bounds[i],
|
|
|
+ fillOpacity:.2,
|
|
|
+ fillColor: "pink",
|
|
|
+ strokeColor: "pink",
|
|
|
+ });
|
|
|
+ that.polygons.push(polygon);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ that.map.add(that.polygons);
|
|
|
+ that.map.setFitView(that.polygons); //视口自适应
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
},
|
|
|
- // initMapUi() {
|
|
|
- // AMapUI.load(["ui/misc/PoiPicker"], (PoiPicker) => {
|
|
|
- // // console.log(PoiPicker);
|
|
|
- // let poiPickers = new PoiPicker({
|
|
|
- // input: "pickerInput",
|
|
|
- // });
|
|
|
- // this.poiPickerReady(poiPickers);
|
|
|
- // });
|
|
|
- // },
|
|
|
+
|
|
|
+ // 嘉定区边界高亮 end
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
<style lang="scss">
|
|
|
#pickerBox {
|
|
|
position: absolute;
|
|
|
@@ -569,7 +573,6 @@ export default {
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
-
|
|
|
#poiInfo {
|
|
|
background: #fff;
|
|
|
}
|
|
|
@@ -577,5 +580,4 @@ export default {
|
|
|
.amap-icon img {
|
|
|
width: 25px;
|
|
|
}
|
|
|
-
|
|
|
</style>
|
fanghuisheng