1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
|
<template>
<div>
<div id="map">
</div>
</div>
</template>
<script>
import Map from 'ol/Map';
import View from 'ol/View';
import XYZ from 'ol/source/XYZ';
import { Tile as TileLayer } from 'ol/layer';
import { fromLonLat, transform } from "ol/proj";
import { Polygon } from "ol/geom";
import { Feature } from "ol";
import { Style, Icon, Stroke } from "ol/style";
import VectorLayer from "ol/layer/Vector";
import { Vector as VectorSource } from "ol/source";
import { getCenter } from 'ol/extent';
export default {
name: 'HelloWorld',
data() {
return {
map: null,
}
},
mounted() {
this.init();
},
methods: {
init() {
let baseLayer = new TileLayer({
visible: true,
name: "电子图",
source: new XYZ({
url: 'https://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
crossOrigin: "anonymous",
}),
});
this.map = new Map({
target: 'map',
layers: [baseLayer],
view: new View({
center: fromLonLat([113.90314496806384, 32.55119145031371]),
zoom: 16
})
});
this.addpolygon()
},
addpolygon() {
let polygonData = [[113.90314496806384, 32.55119145031371], [113.90323996014925, 32.55090529821837], [113.90357286938732, 32.551129876009725], [113.90367281288155, 32.550699598512765], [113.90333990487254, 32.55047502105481], [113.90368767113986, 32.550267223522305], [113.90369757646867, 32.54997897350877], [113.90395035190585, 32.5500573277816], [113.90412794770106, 32.54984533440191], [113.90438072322067, 32.549923687809084], [113.9043104942128, 32.54948921561037], [113.90448066108058, 32.54949340928286], [113.90451036815635, 32.548628658438524], [113.9047755173468, 32.54834669792548], [113.90455245100283, 32.547403594497126], [113.90490267737313, 32.547123730008416], [113.9052430024095, 32.5471321149814], [113.90552299189441, 32.54641777644994], [113.90620363718125, 32.54643454179698], [113.9063812200704, 32.546222544369044], [113.90689170329237, 32.54623511517295], [113.90715436459246, 32.54602521144418], [113.9077474548084, 32.54611193626682], [113.90792503354562, 32.54589993638597], [113.90843798782572, 32.5458404379363], [113.90878819653909, 32.54556056144315], [113.90937881459087, 32.545719341400854], [113.90961181459905, 32.546374187481184], [113.90970430901407, 32.5461600917095], [113.91012971271965, 32.54617055626247], [113.90989670926501, 32.54551571092959], [113.91025926548397, 32.544875514957695], [113.91001390995845, 32.544580984898275], [113.91035422704749, 32.54458935545819], [113.91036163846013, 32.544373166390464], [113.91028644140913, 32.544082821772825], [113.9101162838133, 32.54407863657368], [113.91012863683154, 32.543718321507605], [113.90995847994863, 32.54371413613639], [113.90996589206036, 32.543497947119434], [113.90979820644107, 32.54342169855699], [113.90981303118669, 32.54298932055956], [113.91007320554333, 32.542851472659976], [113.91000048086588, 32.54248906492205], [113.91026312379994, 32.54227915347875], [113.91027794566644, 32.541846775212704], [113.91044809907875, 32.541850959939126], [113.91037043297916, 32.5416326784409], [113.91097090813003, 32.54150319725995], [113.91098325651244, 32.54114288175522], [113.9112409542698, 32.541077094085765], [113.91125083196881, 32.54078884159088], [113.91185376938945, 32.54058729259663], [113.91195365790371, 32.540157004783815], [113.9123063013929, 32.53980505305578], [113.91258374028897, 32.53916275651838], [113.91310405761527, 32.5388870466459], [113.9131089930907, 32.53874292009655], [113.91285623906342, 32.538664585592834], [113.91287351431106, 32.538160142753], [113.91253322066216, 32.538151780473626], [113.91254062502054, 32.53793559073944], [113.91228293717215, 32.53800138170718], [113.9123556690464, 32.53836378868], [113.91218552190357, 32.538359606931365], [113.91202524898776, 32.53806717212243], [113.91201784335712, 32.538283361746856], [113.91176262296501, 32.53827708836587], [113.91183782158076, 32.53856743232279], [113.91132737935567, 32.53855488421624], [113.91140504579953, 32.53877316519334], [113.91114735486948, 32.53883895362658], [113.91104993397039, 32.539197177600286], [113.91070716730486, 32.53926087325699], [113.91069728844909, 32.5395491256738], [113.91104499511974, 32.53934130385884], [113.91103264783891, 32.539701619487815], [113.91077742367277, 32.539695343865304], [113.91077248429225, 32.539839470075314], [113.91051478989218, 32.539905256987446], [113.91049997026673, 32.54033763548378], [113.91032981970007, 32.54033345099976], [113.91025709515614, 32.53997104334702], [113.91008694531986, 32.53996685857608], [113.90999198903864, 32.54025301829684], [113.90965910028163, 32.54002845867007], [113.90959379046302, 32.53944986171187], [113.90993408806226, 32.53945823224086], [113.90992420666178, 32.53974648443799], [113.91009188581964, 32.53982273246239], [113.91027685585965, 32.53939453877603], [113.91011658778956, 32.53910210183425], [113.91036934016415, 32.53918044178133], [113.91037674999994, 32.53896425252454], [113.91004139450976, 32.53881175717589], [113.90969121741807, 32.539091639248085], [113.90841016459281, 32.539204368776986], [113.90719193093331, 32.53996774517776], [113.90709449295646, 32.54032596499882], [113.90692434295984, 32.54032177590824], [113.90693176137525, 32.5401055873951], [113.90675913888862, 32.540173460936586], [113.90683184927668, 32.54053586976365], [113.90708954757307, 32.54047009069239], [113.90716967743691, 32.54061631086422], [113.90759258166594, 32.54069884529187], [113.90758763700734, 32.5408429710448], [113.90715731407454, 32.54097662509968], [113.90697232570167, 32.54140481300036], [113.90712516829994, 32.5419134419955], [113.90668494683062, 32.54233534528869], [113.9065850301948, 32.542765627108906], [113.90632485136695, 32.54290346746939], [113.9055071961949, 32.5443979255134], [113.90500167350972, 32.54424122439846], [113.90497445098079, 32.54503391359986], [113.90463165884752, 32.54509759100395], [113.90445159921997, 32.54538164848305], [113.90402372590263, 32.545443227524686], [113.90401629899581, 32.545659415259095], [113.90367597991103, 32.54565102730171], [113.9030151535793, 32.54505774853975], [113.90258975798623, 32.54504726023392], [113.90249724846049, 32.545261349837354], [113.90215693136729, 32.54525295785942], [113.90224944167088, 32.54503886855521], [113.901743922261, 32.54488215445498], [113.90158862952849, 32.544445583073994], [113.901075681114, 32.54450505374248], [113.9009831687481, 32.544719142060764], [113.90100051440794, 32.544214705374465], [113.90040001053524, 32.54434413683037], [113.9003223676838, 32.54412585053409], [113.9001522116122, 32.544121651846474], [113.90024472516818, 32.54390756420614], [113.89998949171041, 32.543901265968344], [113.8999845342963, 32.544045390609845], [113.89973177942635, 32.543967029517425], [113.89972682158798, 32.544111154122184], [113.89947654592453, 32.54396073022827], [113.8995541865722, 32.54417901691967], [113.89938155131196, 32.54424687946321], [113.89921139516392, 32.54424267948866], [113.89930391104731, 32.544028592688875], [113.89904867747491, 32.54402229252068], [113.89896855867552, 32.543876067847236], [113.89895120187934, 32.544380503588535], [113.8986959673967, 32.54437420264413], [113.8988537253938, 32.54473871451615], [113.89851341144814, 32.544730312796396], [113.8985860903678, 32.545092724385675], [113.89952195788341, 32.545115826590035], [113.9000448253185, 32.54476811329713], [113.90106329156315, 32.5448653656753], [113.90164150097074, 32.545384493006345], [113.90231222797706, 32.54568952874086], [113.90256994386186, 32.54562376009215], [113.9031456906539, 32.54621494376071], [113.9033984552233, 32.54629329851553], [113.9032985171086, 32.54672357626872], [113.9037140168832, 32.547022312824126], [113.90344886880894, 32.547304271179684], [113.90343896370348, 32.547592521247935], [113.90360665068957, 32.54766877840982], [113.90357198348109, 32.54867765367136], [113.90281119422364, 32.548514650298486], [113.9023758734501, 32.54879241003964], [113.90201572256113, 32.54936051614028], [113.90215368103873, 32.55030152413928], [113.90249401717941, 32.55030991727787], [113.90239406871913, 32.5507401935432], [113.90256423763823, 32.55074438995211], [113.90264189039584, 32.55096267534089], [113.90264932211105, 32.55074648807037], [113.9029070525999, 32.55068071963754], [113.90289466742465, 32.55104103184189], [113.903154875479, 32.55090320049075], [113.90314496806384, 32.55119145031371]]
let newpolygonData = []
polygonData.forEach(el => {
newpolygonData.push(fromLonLat(el))
})
let polygonFeature = new Feature({
geometry: new Polygon([newpolygonData])
})
let geo = polygonFeature.getGeometry()
let center = getCenter(geo.getExtent())
let color = 'green';
let polygonStyle = new Style({
stroke: new Stroke({
color: color,
width: 4,
}),
});
// 添加线的样式
polygonFeature.setStyle(polygonStyle);
let polygonSource = new VectorSource({
features: [polygonFeature]
})
let polygonLayer = new VectorLayer({
source: polygonSource
})
this.map.addLayer(polygonLayer);
this.map.getView().animate({
center: center,
})
},
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#map {
width: 1920px;
height: 1080px;
}
</style>
|
次阅读
