{"id":225520,"date":"2021-09-06T10:48:13","date_gmt":"2021-09-06T02:48:13","guid":{"rendered":"https:\/\/gulass.cn\/?p=225520"},"modified":"2021-08-27T16:49:16","modified_gmt":"2021-08-27T08:49:16","slug":"vue-openlayer-select","status":"publish","type":"post","link":"https:\/\/gulass.cn\/vue-openlayer-select.html","title":{"rendered":"Vue+Openlayer\u4e2d\u4f7f\u7528select\u9009\u62e9\u8981\u7d20"},"content":{"rendered":"<table>\n<tbody>\n<tr>\n<td style=\"padding: 5px 12px; width: 25px; font-size: 22px; text-align: center; background: #E8E8E8; line-height: 30px; color: #999;\">\u5bfc\u8bfb<\/td>\n<td style=\"padding: 10px 10px 12px; line-height: 20px;\"><strong>\u672c\u6587\u901a\u8fc7\u5b9e\u4f8b\u4ee3\u7801\u7ed9\u5927\u5bb6\u4ecb\u7ecdVue+Openlayer\u4e2d\u4f7f\u7528select\u9009\u62e9\u8981\u7d20\uff0c\u4ee3\u7801\u7b80\u5355\u6613\u61c2\uff0c\u5bf9\u5927\u5bb6\u7684\u5b66\u4e60\u6216\u5de5\u4f5c\u5177\u6709\u4e00\u5b9a\u7684\u53c2\u8003\u501f\u9274\u4ef7\u503c\uff0c\u9700\u8981\u7684\u670b\u53cb\u53c2\u8003\u4e0b\u5427<\/strong><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\u6548\u679c\u56fe\uff1a<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-225527\" src=\"https:\/\/gulass.cn\/wp-content\/uploads\/2021\/08\/2021082616472087-1.png\" alt=\"\" width=\"334\" height=\"205\" srcset=\"https:\/\/gulass.cn\/wp-content\/uploads\/2021\/08\/2021082616472087-1.png 334w, https:\/\/gulass.cn\/wp-content\/uploads\/2021\/08\/2021082616472087-1-300x184.png 300w\" sizes=\"auto, (max-width: 334px) 100vw, 334px\" \/><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-225528\" src=\"https:\/\/gulass.cn\/wp-content\/uploads\/2021\/08\/2021082616472088-1.png\" alt=\"\" width=\"340\" height=\"191\" srcset=\"https:\/\/gulass.cn\/wp-content\/uploads\/2021\/08\/2021082616472088-1.png 340w, https:\/\/gulass.cn\/wp-content\/uploads\/2021\/08\/2021082616472088-1-300x169.png 300w\" sizes=\"auto, (max-width: 340px) 100vw, 340px\" \/><\/p>\n<p>\u5b9e\u73b0\u4ee3\u7801\uff1a<\/p>\n<pre>\r\n&lttemplate&gt\r\n  &ltdiv id=\"map\" ref=\"map\" style=\"width: 100vw; height: 100vh\"&gt&lt\/div&gt\r\n&lt\/template&gt\r\n  \r\n&ltscript&gt\r\nimport \"ol\/ol.css\";\r\nimport { Map, View } from \"ol\";\r\nimport { OSM, Vector as VectorSource } from \"ol\/source\";\r\nimport { Vector as VectorLayer, Tile as TileLayer } from \"ol\/layer\";\r\nimport GeoJSON from \"ol\/format\/GeoJSON\";\r\n  \r\nimport Select from \"ol\/interaction\/Select\";\r\nimport { altKeyOnly, click, pointerMove } from \"ol\/events\/condition\";\r\n  \r\nexport default {\r\n  name: \"gif\",\r\n  data() {\r\n    return {\r\n      map: {},\r\n      layer: {},\r\n      geojsonData: {\r\n        type: \"FeatureCollection\",\r\n        features: [\r\n          {\r\n            type: \"Feature\",\r\n            properties: {\r\n              title: \"\u8b66\u62a51\",\r\n            },\r\n            geometry: {\r\n              type: \"Point\",\r\n              coordinates: [91.48879670091165, 37.83814884701121],\r\n            },\r\n          },\r\n          {\r\n            type: \"Feature\",\r\n            properties: {\r\n              title: \"\u8b66\u62a52\",\r\n            },\r\n            geometry: {\r\n              type: \"Point\",\r\n              coordinates: [99.19515576149941, 26.713646654711134],\r\n            },\r\n          },\r\n          {\r\n            type: \"Feature\",\r\n            properties: {\r\n              title: \"\u8b66\u62a53\",\r\n            },\r\n            geometry: {\r\n              type: \"Point\",\r\n              coordinates: [123.74363825288785, 44.363694825734726],\r\n            },\r\n          },\r\n        ],\r\n      },\r\n      select: {},\r\n    };\r\n  },\r\n  mounted() {\r\n    this.initMap();\r\n  },\r\n  methods: {\r\n    \/\/ \u521d\u59cb\u5316\u5730\u56fe\r\n    initMap() {\r\n      this.layer = new VectorLayer({\r\n        source: new VectorSource({\r\n          features: new GeoJSON().readFeatures(this.geojsonData),\r\n        }),\r\n      });\r\n      this.map = new Map({\r\n        target: \"map\",\r\n        layers: [\r\n          new TileLayer({\r\n            source: new OSM(),\r\n          }),\r\n          this.layer,\r\n        ],\r\n        view: new View({\r\n          projection: \"EPSG:4326\",\r\n          center: [104.912777, 34.730746],\r\n          zoom: 4.5,\r\n        }),\r\n      });\r\n  \r\n      this.select = new Select({\r\n        condition: click, \/\/\u5355\u51fb\u9009\u62e9\r\n      });\r\n      this.map.addInteraction(this.select);\r\n      this.select.on(\"select\", (e) => {\r\n        let coordinate = e.mapBrowserEvent.coordinate; \/\/\u83b7\u53d6\u9009\u62e9\u7684\u5750\u6807\r\n        let properties = e.selected[0].getProperties(); \/\/\u83b7\u53d6\u5f53\u524d\u8981\u7d20\u7684\u6240\u6709\u5c5e\u6027\r\n      });\r\n  \r\n      \/\/ \u8bbe\u7f6e\u9f20\u6807\u5212\u8fc7\u77e2\u91cf\u8981\u7d20\u7684\u6837\u5f0f\r\n      this.map.on(\"pointermove\", (e) => {\r\n        const isHover = this.map.hasFeatureAtPixel(e.pixel);\r\n        this.map.getTargetElement().style.cursor = isHover ? \"pointer\" : \"\";\r\n      });\r\n    },\r\n  },\r\n};\r\n&lt\/script&gt\r\n<\/pre>\n<p>\u5230\u6b64\u8fd9\u7bc7\u5173\u4e8eVue+Openlayer\u4e2d\u4f7f\u7528select\u9009\u62e9\u8981\u7d20\u7684\u5b9e\u73b0\u4ee3\u7801\u7684\u6587\u7ae0\u5c31\u4ecb\u7ecd\u5230\u8fd9\u4e86<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u6548\u679c\u56fe\uff1a \u5b9e\u73b0\u4ee3\u7801\uff1a &#038;lttemplate&#038;gt &#038;ltdiv id=&#8221;map&#8221; ref=&#8221;map&#8221; sty [&hellip;]<\/p>\n","protected":false},"author":668,"featured_media":225529,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[55],"tags":[],"class_list":["post-225520","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-thread"],"acf":[],"_links":{"self":[{"href":"https:\/\/gulass.cn\/wp-json\/wp\/v2\/posts\/225520","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gulass.cn\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gulass.cn\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gulass.cn\/wp-json\/wp\/v2\/users\/668"}],"replies":[{"embeddable":true,"href":"https:\/\/gulass.cn\/wp-json\/wp\/v2\/comments?post=225520"}],"version-history":[{"count":9,"href":"https:\/\/gulass.cn\/wp-json\/wp\/v2\/posts\/225520\/revisions"}],"predecessor-version":[{"id":225570,"href":"https:\/\/gulass.cn\/wp-json\/wp\/v2\/posts\/225520\/revisions\/225570"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gulass.cn\/wp-json\/wp\/v2\/media\/225529"}],"wp:attachment":[{"href":"https:\/\/gulass.cn\/wp-json\/wp\/v2\/media?parent=225520"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gulass.cn\/wp-json\/wp\/v2\/categories?post=225520"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gulass.cn\/wp-json\/wp\/v2\/tags?post=225520"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}