2c:null 2d:["$","title",null,{"children":"周边搜索 | Zhida Cheng | Observable"}] 32:T40f,searchNearby = async (poi1, poi2, radius, count) => { var placeSearch = new M.AMap.PlaceSearch({ city: placeid || "010", citylimit: false, extensions: "base", pageSize: count || 2 }); const poi1_pos = await search(poi1); let center = _.get(poi1_pos, "[0].location"); center = [center.lng, center.lat]; const key = `${poi2}:${center || city.center}:${radius || 2000}:${ count || 2 }`; const cache = await storage.getItem("search_nearby_" + placeid); const res = cache ? cache[key] : null; if (res) { return new Promise((resolve) => { resolve(res); }); } else { return new Promise((resolve, reject) => { placeSearch.searchNearBy( poi2, center, radius, async function (status, result) { const r = [poi1_pos[0], ..._.get(result, "poiList.pois")]; storage.setItem("search_nearby_" + placeid, { ...cache, ..._.zipObject([key], [r]) }); resolve(r); } ); }); } }33:Taf9,location_markers = { // return false; const circles = nearByResult .filter((d) => d) .map((place, i) => { const markerSize = i == 0 ? 8 : 5; const random = (() => { const radius = Math.random() * 0.0004; const angle = Math.PI * 2 * Math.random(); return [radius * Math.sin(angle), radius * Math.cos(angle)]; })(); const circle = new M.AMap.CircleMarker({ center: place.location, radius: markerSize, strokeColor: "white", strokeWeight: 1, strokeOpacity: 1, fillColor: i == 0 ? "orange" : "red", fillOpacity: 0.5, zIndex: 100, bubble: true, cursor: "pointer", clickable: true }); const circle2 = i == 0 ? new M.AMap.Circle({ center: place.location, radius: radius, strokeColor: "white", strokeWeight: 1, strokeOpacity: 1, fillColor: i == 0 ? "orange" : "red", fillOpacity: 0.1, zIndex: 5, bubble: false, cursor: "pointer", clickable: false }) : null; const text = new M.AMap.Text({ text: `${place.name}
${place.address} ${ place.distance || "" }`, anchor: "middle-left", // 设置文本标记锚点 draggable: true, position: place.location, //new M.AMap.LngLat(+place.经度, +place.纬度), offset: new M.AMap.Pixel(7, 0), cursor: "pointer", visible: false, zIndex: 900, style: { "font-family": "Helvetica Neue,Arial", "font-size": "12px", "line-height": "12px", "text-shadow": "-1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff", background: "transparent", //'#FFFFFFC0', border: "none", color: "#555" } }); circle.on("click", () => { text.setExtData({ alwaysOn: !_.get(text.getExtData(), "alwaysOn") }); }); circle.on("mouseover", () => { circle.setOptions({ fillOpacity: 1, radius: markerSize * 1.5 }); text.show(); // date.show(); }); circle.on("mouseout", () => { circle.setOptions({ fillOpacity: 0.5, radius: markerSize }); if (!_.get(text.getExtData(), "alwaysOn")) { text.hide(); // date.hide(); } }); return [i == 0 ? circle2 : null, circle, text]; }); const location_markers = circles.flat().filter((d) => d); map.add(location_markers); invalidation.then(() => [map.remove(location_markers)]); map.setCenter(location_markers[0].getCenter()); return location_markers; }34:[] 30:{"id":"e5cc55db746eb7a2","slug":"nearby_search","title":"周边搜索","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2022-03-16T10:07:20.086Z","update_time":"$D2022-04-28T05:55:56.598Z","view_time":null,"first_public_time":"$D2022-03-16T11:07:54.615Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"48148a053565269d","login":"vorbei","name":"Zhida Cheng","avatar_url":"https://avatars-next.observableusercontent.com/822b12b275e376949723f33263e80abf4e86ebca145552e79921c4fc06c9e011","tier":"starter_2024"},"version":224,"publish_version":224,"role":null,"authored":false,"authors":[{"type":"individual","id":"f06197efa68be3b4","login":"vorbei","name":"Zhida Cheng","avatar_url":"https://avatars-next.observableusercontent.com/822b12b275e376949723f33263e80abf4e86ebca145552e79921c4fc06c9e011","tier":null}],"members":[{"type":"individual","id":"f06197efa68be3b4","login":"vorbei","name":"Zhida Cheng","avatar_url":"https://avatars-next.observableusercontent.com/822b12b275e376949723f33263e80abf4e86ebca145552e79921c4fc06c9e011","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"周边搜索","cells":[{"id":0,"value":"# 周边搜索","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"viewof M = {\n const height = 600;\n const srcdoc = `\n\n\n\n

\n \n \n`;\n\n const iframe = html`\n\n`;\n iframe.value = null;\n\n iframe.onload = async () => {\n iframe.value = {\n AMap: iframe.contentWindow.AMap,\n Loca: iframe.contentWindow.Loca,\n gcj02towgs84: await require(\"coordtransform\").then((d) => d.gcj02towgs84)\n };\n iframe.dispatchEvent(new CustomEvent(\"input\"));\n };\n\n return iframe;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"viewof center = Inputs.text({\n value: \"健康智谷\",\n label: \"中心地点\",\n submit: \"确定\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"viewof keyword = Inputs.text({\n value: \"核酸\",\n label: \"搜索地点\",\n submit: \"确定\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"viewof radius = Inputs.range([0, 5000], {\n value: 1000,\n label: \"半径\",\n step: 100,\n submit: \"\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"Inputs.table(nearByResult, {\n columns: [\"name\", \"address\", \"distance\", \"lnglat\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"nearByResult = searchNearby(center, keyword, radius, 20).then((d) =>\n d.map((f) => ({ ...f, lnglat: [f.location.lng, f.location.lat] }))\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"md`---\\n#### 定位相关`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"placeid = \"北京\"\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"map = new Promise((resolve) => {\n const map = new M.AMap.Map(\"mapdom\", {\n zooms: [4, 16],\n zoom: 5,\n showLabel: true,\n viewMode: \"3D\",\n center: [105.425968, 35.882505],\n mapStyle: \"amap://styles/0dcb670a24ce02241f9fe8b7b0b7b5e2\"\n });\n\n map.on(\"complete\", function () {\n resolve(map);\n });\n\n const heatmap = new M.AMap.HeatMap(map, {\n radius: 20,\n opacity: [0, 0.5],\n gradient: {\n 0.1: \"blue\",\n 0.2: \"lime\",\n // 0.2: 'yellow',\n 0.4: \"yellow\",\n 0.6: \"orange\",\n 1: \"red\"\n },\n \"3d\": {\n heightScale: 0.3\n },\n zIndex: 10\n });\n\n map.heatmap = heatmap;\n\n const metresPerPixel = (zoom) =>\n (40075016.686 * Math.abs(Math.cos((map.getCenter().lat * Math.PI) / 180))) /\n Math.pow(2, (zoom || map.getZoom()) + 8);\n\n map.on(\"zoomchange\", function () {\n heatmap.setOptions({\n ...heatmap.getOptions,\n radius: 1000 / metresPerPixel()\n });\n });\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"city = new Promise((resolve, reject) => {\n const district = new M.AMap.DistrictSearch({\n extensions: \"base\",\n subdistrict: 0,\n level: \"city\"\n });\n district.search(placeid, function (status, result) {\n const city = _.get(result, \"districtList[0]\");\n map.setZoom(10);\n map.setCenter(city.center);\n resolve(city);\n });\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"searched_districts = new Promise((resolve, reject) => {\n const district = new M.AMap.DistrictSearch({\n extensions: \"base\",\n subdistrict: 2,\n level: \"district\"\n });\n //分区基本信息\n district.search(placeid, function (status, result) {\n //Promise 包装，再下钻搜索分区具体信息\n resolve(_.get(result, \"districtList[0].districtList[0].districtList\"));\n });\n})\n .then((areas) => {\n const district = new M.AMap.DistrictSearch({\n extensions: \"all\",\n citycode: city,\n subdistrict: 2,\n level: \"district\"\n });\n\n //按上一步的分区搜索具体Boundary\n return areas.map((area) => {\n return new Promise((_res, _rej) => {\n district.search(area.adcode, function (status, result) {\n _res(_.get(result, \"districtList[0]\"));\n });\n });\n });\n })\n .then((arr) => Promise.all(arr))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"search = async (poi, count) => {\n var placeSearch = new M.AMap.PlaceSearch({\n city: placeid || \"010\",\n citylimit: false,\n extensions: \"base\",\n pageSize: count || 2,\n });\n\n const key = `${poi}:${count}`;\n const cache = await storage.getItem(\"search_\" + placeid);\n const res = cache ? cache[key] : null;\n\n if (res) {\n return new Promise((resolve) => {\n resolve(res);\n });\n } else {\n return new Promise((resolve, reject) => {\n placeSearch.search(poi, async function (status, result) {\n const r = _.get(result, \"poiList.pois\");\n storage.setItem(\"search_\" + placeid, {\n ...cache,\n ..._.zipObject([key], [r])\n });\n resolve(r);\n });\n });\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"storage = {\n const lf = await require(\"localforage\");\n const localName = document.baseURI;\n lf.config({ name: localName });\n return lf;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"